Vad är HTML5?
Framtidens standard

HTML5 är en officiell webbstandard från World Wide Web Consortium (W3C). Den är fortfarande inte slutgodkänd men de viktigaste HTML5-funktionerna används redan idag.

Den tidigare versionen av HTML (4.01) hanterar främst text och bild. Nya HTML5 inkluderar tekniker för video, ljud, grafik och webbapplikationer, såväl som text och bild.

Paraplybegrepp

Html 5 är också ett paraplybegrepp som inte enbart innefattar html-språket utan även CSS 3 och javascript. När man pratar om möjligheterna med HTML5 menar man vanligvis kombinationen av HTML5, CSS 3 och javascript.

Vilken funktionalitet finns i HTML5?

Webbapplikationer

Man kan skapa webbapplikationer via det nya html elementet <canvas>. Man kan säga att det är ett alternativ till Flash , även om det ännu inte matchar prestanda och funktionalitet. Det är hur som helst mycket attraktivt att slippa det plug-in flash kräver och ändå kunna erbjuda en ökad interaktivitet och funktionalitet.

Semantisk mark up

Ett flertal nya element införs och om man använder sig av dessa blir sidorna mer logiska. Tidigare använde man ofta id och class för att få en semantisk mark up på olika sätt trots att det i många fall ser likadant ut.

Exempel på nya element:

<article>
<aside>
<hgroup>
<header>
<footer>
<time>
<mark>

Formulärshantering

HTML5 har förbättrad formulärshantering med fler elementtyper och funktioner som placeholder text, autofokus, obligatoriska fält och validering. Tidigare använde man ofta javascript med en serverfallback för att åstakomma detta. Man har även förbättrade element som till exempel spinboxar för nummer.

Video

Det är möjligt att spela upp video och ljud direkt i webbläsaren utan flash.

Positionering

HTML5 stödjer positionsbestämning via Geolocation API.

Stand alone och offline

Det finns möjlighet att lagra data lokalt på användarnas datorer. Tidigare har cookies använts för detta men de är begränsande. Med HTML5 kan man lagra större mängder data och göra mer avancerade webbapplikationer. Med cache manifest kan man ha en hel eller delar av en webbplats eller webbapplikation användbar lokalt.

Hur ser kompatibiliteten ut?

Html 5 fungerar inte i alla webbläsare och man har kommit olika långt med att implementera de olika funktionerna. Den populära webbläsaren Internet Explorer ligger tyvärr lite efter i utvecklingen men stort hopp sätts till den kommande IE9. Främst hittar vi webkit-baserade webbläsare som Chrome och Safari. Webkit är alltså en renderingsmotor för webbläsare. Firefox använder sig av renderingsmotorn Gecko och även den innehåller mycket HTML5-funktionalitet.

Quirksmode har en bra kompatibilitetsöversikt:
http://www.quirksmode.org/compatibility.html

Testa din egen webbläsare på:
http://html5test.com/

Vad är CSS och vilka funktioner finns i CSS3?

Css står för Cascading Style Sheets och översätts till stilmall på svenska. Det är ett språk som beskriver presentationsstilen för ett strukturerat dokument som till exempel typsnitt, textstorlek och färg. HTML använder alltså css för att presentera text och bild på ett snyggt sätt. Man kan ha olika stilregler för olika enheter, exempelvis mobiltelefoner.

Css 3 har utvecklats sedan 2005 och tillför en mängd funktionalitet, till exempel:

  • Skuggor
  • Reflektioner
  • Rundade hörn
  • Rotation
  • Fonthantering med @font-face
  • Vilkorade regler i stylesheet - t ex zebramönster eller ikoner framför en viss filtyp
  • Rgba - för att styra opacitet direkt i färgdefinitionen
  • Övertoningar
  • Multipla bakgrundsbilder

Exempel på HTML5

Författare: Mattias Axelsson

Källor

HTML5