Så bygger du moderna webbsidor med HTML5

Introduktion till HTML5

Ska man hålla på och bygga hemsidor är det viktigt att man förstår ramverken man jobbar med. HTML är det språk som gör att en hemsida ser ut som den gör och HTML5 är den senaste versionen av HTML-standarden som släpptes år 2014. Den ersätter tidigare versioner av HTML som HTML 4.01 och XHTML 1.0.

HTML5 utvecklades med flera viktiga mål i åtanke. Några av de främsta målen var:

Att göra det enklare att skapa multimedia och grafik direkt i HTML, utan behov av tillägg som Flash.
Att förbättra semantiken och strukturen i HTML för att göra koden mer lättläst och tillgänglig.
Att göra HTML mer anpassat för mobila enheter och app-utveckling.
Att göra HTML mer kompatibelt med nya webbläsare och standarder.

Utvecklingen av HTML5 påbörjades redan år 2004 av WHATWG (Web Hypertext Application Technology Working Group). År 2007 bildades sedan en arbetsgrupp av W3C och WHATWG för att samarbeta kring nästa stora version av HTML-standarden.

HTML5 har successivt vunnit mark sedan det lanserades, tack vare starkt stöd från de största webbläsarna som Google Chrome, Mozilla Firefox, Opera och Apple Safari. Numera har HTML5 bred kompatibilitet och kan användas på de flesta moderna webbplatser.

Några av de viktigaste nyheterna i HTML5 är stöd för multimedia, grafik och animationer (via canvas, svg och video/audio-element), bättre formulärkontroller, semantiska element som header, footer, article, och stöd för offline-lagring samt körning av JavaScript API:er lokalt i webbläsaren.

HTML5 banade också väg för ett antal relaterade tekniker och standarder som tillsammans utgör en modern webbplattformsutvecklingsstack, däribland CSS3, JavaScript och olika ramverk och bibliotek.

Övergången från HTML4 och tidigare versioner till HTML5 har generellt sett varit smidig, mycket tack vare att HTML5 är bakåtkompatibelt. De flesta nya funktioner i HTML5 fungerar i moderna webbläsare utan särskild anpassning, samtidigt som äldre HTML4-kod fortfarande fungerar.

Sammanfattningsvis har HTML5 haft en enorm påverkan på webbutveckling och gjort det möjligt att bygga mer avancerade och dynamiska webbapplikationer direkt i webbläsaren, utan behov av insticksprogram eller externa ramverk.

HTML5 struktur och semantik

HTML5 introducerar ett antal nya semantiska element som ger bättre struktur åt dokumentet och gör koden mer beskrivande. Några av de viktigaste nya elementen är:

Nya semantiska element

<header> – Huvuddelen högst upp på en sida, vanligtvis innehåller logotyper, titlar, sökfält etc.
<nav> – Innehåller navigering, menyer och länkar till andra sidor på webbplatsen.
<footer> – Sidfoten längst ner, vanligtvis kontaktinfo, upphovsrättsinfo, länkar etc.
<article> – Ett fristående innehåll såsom blogginlägg, nyhetsartiklar etc.
<section> – Avgränsar olika sektioner på sidan.
<aside> – Relaterat innehåll vid sidan av huvudinnehållet, såsom sidebars.

Fördelar med semantisk kod

Semantiska element gör koden tydligare och lättare att förstå för både människor och sökmotorer. Det blir enklare att strukturera upp innehållet på rätt sätt. Vissa fördelar är:

Bättre SEO eftersom sökmotorer kan tolka innehållet bättre.
Ökad tillgänglighet då skärmläsare kan navigera sidan på ett smidigare sätt.
Lättare underhåll av kodbasen över tid.
Separerar presentationen från innehållet bättre.
Öppnar upp för nya möjligheter med CSS, såsom stilmallar för specifika element.

Genom att använda semantiska element får man en renare och mer lättläst kodstruktur.

Multimedia och grafik i HTML5

HTML5 introducerar flera nya element för att förenkla integration av multimedia och vektorgrafik i webbsidor. Med HTML5 blir det enklare att inkludera video, ljud, canvas och SVG utan att behöva använda plugins.

Video

<video>-elementet gör det möjligt att spela upp video direkt i webbsidan. Man anger källan till videon med src-attributet och webbläsaren kommer att välja det första videoformat den stöder av de angivna alternativen. Populära videoformat är MP4, WebM och OGG.

<video src="video.mp4" controls>
  Din webbläsare stöder inte HTML5 video.
</video>

För att tillhandahålla stöd för flera format kan man ange flera källor inuti <source>-element. Webbläsaren kommer då att använda den första källa den stöder.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Din webbläsare stöder inte HTML5 video.  
</video>

Video-elementet har även attribut för att styra uppspelningen, som autoplay, loop och muted.

Ljud

På samma sätt kan <audio>-elementet användas för att spela upp ljud. Ange ljudkällan med src-attributet och webbläsaren kommer att välja det första ljudformat den stöder. Populära ljudformat är MP3, WAV och OGG.

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  Din webbläsare stöder inte HTML5 audio.
</audio>

Även <audio>-elementet har attribut för att styra uppspelningen.

Canvas

<canvas>-elementet gör det möjligt att rita grafik med JavaScript. Man anger storleken på canvasen med höjd- och breddattribut. Sedan använder man canvas rendering context för att rita linjer, cirklar, text mm.

<canvas id="myCanvas" width="200" height="100"></canvas> 

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 200, 100); 
</script>

Canvas kan användas för att skapa komplex grafik, spel, animationer m.m. direkt i webbläsaren.

SVG

SVG står för Scalable Vector Graphics och är ett XML-baserat format för vektorgrafik. SVG-filer kan bäddas in direkt i HTML5-dokument med <svg>-elementet.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

SVG-grafik kan skapas direkt i HTML-koden eller länkas in med <object>, <iframe> eller <img>. SVG skalar upp sig väl på stora och små skärmar och kan animeras med CSS och JavaScript.

HTML5 formulär

HTML5 introducerade flera nya funktioner för att förbättra formulärhantering och användarupplevelse. Några av de viktigaste nyheterna är:

Nya input-typer

HTML5 lägger till flera nya input-typer som kan valideras automatiskt:

email: Validerar att input är en korrekt formaterad e-postadress.
url: Validerar att input är en korrekt formaterad webbadress.
number: Validerar att input är ett nummer.
range: Visar en slider för att välja ett värde i ett intervall.
date/time/week/month: Inbyggda datum- och tidsväljare.
color: Färgpalett för att välja färg.

Dessa inputs ger bättre användarupplevelse och minskar behovet av custom validering.

Nya attribut

Nya globala attribut i HTML5:

placeholder: Visar en hint i input när den är tom.
autofocus: Sätter fokus på specifikt fält vid sidladdning.
autofill: Ger webbläsaren info för automatisk ifyllning.
required: Gör fält obligatoriskt att fylla i.
pattern: Reguljärt uttryck för custom validering.

Dessa attribut förenklar formulär utan att behöva använda JavaScript.

Inbyggd validering

HTML5 har inbyggd validering av formulärfält som kan användas med required, pattern, min, max etc. Valideringsmeddelanden visas automatiskt vid fel utan custom kod.

Det finns också nya DOM-metoder för validering som checkValidity() och reportValidity().

Ny form-attribut

Nya attribut för <form>:

autocomplete: Slår på/av automatisk fyllning.
novalidate: Stänger av automatisk validering.

Detta ger större kontroll över formulärhantering.

Med HTML5:s förbättrade stöd för formulär blir det smidigare att skapa användarvänliga formulär utan tung JavaScript-kod. Automatisk validering och andra funktioner förbättrar tillgänglighet och användarupplevelse.

HTML5 och CSS3

HTML5 och CSS3 kompletterar varandra och ger möjlighet att skapa mer avancerade webbplatser. CSS3 introducerar många nya egenskaper för layout, animationer, typografi, m.m. som inte var möjliga med tidigare versioner.

Några exempel på nyheter i CSS3:

Flexbox och CSS Grid för avancerad layout. Ger mer flexibilitet att positionera element på olika skärmstorlekar.
Media queries för responsiv design. Gör att man kan anpassa layouten beroende på enhetens skärmstorlek.
Border radius för rundade hörn.
Box shadow för skuggor runt element.
Text shadow för textskuggor.
RGBA färgmodell för transparens i färger.
Gradients för färgövergångar.
Transitions för mjuka animationer mellan tillstånd.
Transform för att rotera, skala och luta element.
Animationer för mer avancerade keyframe-baserade animationer.
Columns för text i spalter.

Med HTML5 och CSS3 kan man alltså skapa mer avancerade visuella effekter och bättre anpassa innehållet för olika enheter. De kompletterar varandra på ett bra sätt för modern webbutveckling.

Offline och lagring med HTML5

HTML5 introducerar flera nya API:er för offline-lagring och offline-användning av webbplatser. Detta gör det möjligt att cachelagra resurser och data lokalt i webbläsaren och därmed förbättra prestandan och tillgängligheten för användare även när de är offline.

LocalStorage och SessionStorage

LocalStorage och SessionStorage är två relaterade webb-API:er som låter webbplatser lagra nyckel/värde-par i webbläsaren. Skillnaden är att data i LocalStorage sparas tills de tas bort medan SessionStorage rensas när webbläsarsessionen avslutas. Detta gör LocalStorage lämpligt för att spara användardata som ska finnas kvar, medan SessionStorage passar för tillfälliga data som bara behövs under en session.

LocalStorage har stöd för 5-10MB data per domän i de flesta webbläsare. Detta gör det användbart för saker som:

Spara användarinställningar för en webbplats
Cachelagra resurser eller data för snabbare åtkomst
Spara uppgifter som ska finnas kvar mellan besök

SessionStorage har ungefär samma gräns men rensas som sagt när webbläsaren stängs. Det kan användas för saker som:

Tillfälligt lagra formulär-data
Cachelagra resurser under en session
Spara tillståndsinformation som bara behövs temporärt

Båda API:erna är enkla att använda med metoder som setItem(), getItem() och removeItem().

AppCache för offline-användning

AppCache är en cache-mekanism i HTML5 som gör att webbplatser kan fungera offline. Genom att lista ut nödvändiga resurser i en ”cache-manifest”-fil kan dessa automatiskt cachelagras lokalt. Nästa gång användaren besöker webbplatsen utförs begäran från den lokala cachen om nätverket inte är tillgängligt.

Fördelarna med AppCache är:

Gör webbplatser tillgängliga offline
Förbättrad prestanda genom att resurser loaded från cache istället för att hämtas
Minskad belastning på servern

Nackdelar inkluderar att cachelagringen sker automatiskt och utvecklaren har begränsad kontroll. AppCache rekommenderas inte längre och Service Workers föredras för modern offline-hantering. Men för enklare behov kan AppCache fortfarande vara användbart.

Med HTML5 har webbplatser flera alternativ för att förbättra användarupplevelsen offline. Genom smart användning av API:er som LocalStorage, SessionStorage och AppCache kan resurser och data göras tillgängliga även när användaren inte har uppkoppling.

HTML5 och JavaScript

JavaScript har fått en central roll i HTML5. Många nya funktioner i HTML5 är tätt integrerade med JavaScript.

Några exempel:

WebSockets gör det möjligt att öppna en tvåvägs kommunikationskanal mellan webbläsare och server. Detta möjliggör realtidsappar som chattar och multiplayer-spel.
Web Workers låter JavaScript köras i bakgrunden utan att påverka GUI-tråden. Detta förbättrar prestanda för tunga beräkningar.
Local Storage API:et ger möjlighet att lagra data lokalt i webbläsaren.
Geolocation API:et ger access till användarens geografiska position.
Canvas möjliggör avancerad grafik via JavaScript.
WebGL tar grafiken ett steg längre med 3D-grafik och effekter i webbläsaren.
Media Capture API:et ger access till kameran och mikrofonen.
Drag and drop-stöd gör det enkelt att implementera drag and drop med JavaScript.
Page Visibility API:et låter dig pausa JavaScript när användaren växlar till en annan tab.

HTML5 pushar webbapplikationer framåt och gör dem mer kapabla och närmare vanliga appers funktionalitet. Med hjälp av HTML5 och JavaScript kan man bygga avancerade webbapplikationer.

HTML5 prestanda

HTML5 introducerar flera nya funktioner som förbättrar webbprestanda.

Snabbare parsing och rendering

HTML5 har en ny parser som är mer effektiv och snabbare än tidigare HTML-versioner. Parsern kan börja rendera sidan innan den har läst in hela dokumentet, vilket minskar tiden till första render.

HTML5 har också nya element som , , och som ger webbläsaren mer kontextuell information om dokumentstrukturen. Detta gör att webbläsaren kan prioritera vilka delar av sidan som ska renderas först för en snabbare första vy.

Asynkron kommunikation

HTML5 har stöd för asynkron kommunikation via XMLHttpRequest Level 2 och WebSockets. Detta tillåter att data kan hämtas i bakgrunden utan att behöva ladda om sidan, vilket ger en smidigare upplevelse.

Offline-stöd

Med HTML5 Cache API kan sidor och resurser cachas lokalt i webbläsaren för åtkomst offline. Detta tar bort behovet av att hämta resurser på nytt varje gång sidan besöks, vilket minskar svarstiderna.

Multimedia prestanda

HTML5 har nya multimedia element som

HTML5 har även WebGL för 3D-grafik som utnyttjar grafikkortets maskinvara för att rendera 3D-scenen, vilket ger högre bildfrekvens och bättre respons än tidigare tekniker.

Genom att använda dessa nya HTML5 funktioner kan man bygga snabbare webbplatser med bättre användarupplevelse. Användning av semantiska element och asynkron kommunikation bidrar särskilt till förbättrad prestanda.

HTML5 och tillgänglighet

HTML5 innehåller flera nya element och attribut som förbättrar tillgängligheten på webben. Detta gör det enklare för personer med funktionsnedsättningar att använda och navigera på webbplatser.

Några exempel på hur HTML5 förbättrar tillgängligheten:

Det nya <main>-elementet identifierar sidans huvudsakliga innehåll. Detta gör det lättare för skärmläsare att hoppa direkt till huvudinnehållet.
Det nya <nav>-elementet identifierar navigation på sidan, vilket gör att skärmläsare och andra hjälpmedel kan hoppa direkt till navigeringen.
Attributet aria-label gör att du kan ange beskrivningar av icke-textuellt innehåll, till exempel bilder och knappar. Detta gör innehållet mer tillgängligt för skärmläsare.
Attributet role gör att du kan ange vilken funktion ett element har, till exempel role="navigation". Detta förbättrar tillgängligheten genom att göra strukturen och innehållet tydligare.
Videospelare och media-element har inbyggda kontroller för textning, syntolkning och ljudbeskrivning. Detta gör multimedia-innehåll mer tillgängligt.

Genom att använda de nya HTML5-elementen och attributen på rätt sätt kan man alltså skapa mer tillgängliga webbplatser som fungerar bra för alla användare, oavsett funktionsförmåga. Detta är en stor förbättring jämfört med HTML4 och bidrar till ett mer inkluderande och tillgängligt web!

HTML5 och SEO

HTML5 innehåller flera nya element och attribut som kan förbättra en webbsidas placering i sökmotorernas resultat. Genom att använda de nya semantiska elementen korrekt, blir sidans struktur och innehåll tydligare för sökmotorerna.

Nyckelelement för SEO i HTML5

header, nav, footer – Dessa element beskriver tydligt olika delar av sidan och hjälper sökmotorerna att förstå innehållsstrukturen.
article – Används för att markera upp delar av sidan som är självständigt innehåll, t.ex. blogginlägg eller nyhetsartiklar. Detta hjälper sökmotorerna att avgöra viktigt innehåll.
section – Grupperar relaterat innehåll, t.ex. kapitel eller avsnitt på en sida.
aside – Används för relaterat innehåll vid sidan om huvudinnehållet, t.ex. sidomenu eller faktarutor.
figure – Innehåller grafik, diagram, illustrationer etc. tillsammans med en caption.
time – Används för att markera tidpunkter och datum i innehållet.

Schema.org och microdata

HTML5 introducerar också microdata, en metod för att lägga till maskinläsbar metadata i HTML-koden. Med hjälp av schema.org-vocabulären kan man beskriva innehållet mer detaljerat för sökmotorerna. Detta kan ge bättre sökresultat och rikare snippets i SERPs.

Några exempel på microdata som kan användas:

itemscope och itemtype för att definiera objekt.
itemprop för egenskaper på objekten.
Datum, organisationer, personer, recensioner etc.

Genom att kombinera semantisk HTML5 och microdata kan man alltså optimera sin sida både för användare och sökmotorer. Det blir tydligare vad sidans olika delar innehåller och man kan framhäva viktigt innehåll.