Logga in
HTML var från början ett enkelt sidbeskrivningsspråk för att visa innehållet i en webbsida. HTML har funnits i flera versioner som standardiserats av W3C (World wide web consortium) - läs mer i guiden W3C - webbstandards »
Efter versionen HTML4 så utvecklades en ny standard; XHTML (eXtensible HyperText Markup Language) som skulle ersätta HTML4 men XHTML har aldrig blivit en fungerande standard. Anledningarna är flera men en orsak är att XHTML2 inte är bakåtkompatibelt med tidigare versioner. Element och attribut är delvis borttagna eller har fått ändrad funktion i förhållande till HTML.
W3C (World Wide Web Consortium) har beslutat att stödja HTML5 framför XHTML2 och HTML5 kombinerar det bästa från både HTML4 och XHTML. En fördel med HTML5 är att HTML-element kan utföra funktioner som tidigare krävde olika typer av script. Funktioner som tidigare krävde tex javascript kan nu utföras med element i HTML5.
Du kan börja använda HTML5 redan nu även om inte alla webbläsare, framförallt de äldre, inte har stöd för HTML5. Du behöver inte koda om dina sidor, det som fungerade i HTML4 kommer att fortsätta fungera i HTML5.
Att börja använda HTML5 kan du göra genom att ändra på den DOCTYPE dina dokument använder idag till den nya enkla som gäller för alla HTML5-dokument:
Om du vill ändra teckenuppsättningen så kan du använda den nya kortare meta-charset:
Läs mer om teckenkoder i guiden Teckenkoder - charsets »
I övrigt så är grundkoden för sidorna lika som tidigare:
Exempel på nya element i HTML5 är:
Ett semantiskt element beskriver innehållet för webbläsaren. Ett icke-semantiskt element som <div> och <span> anger inte vad elementet egentligen innehåller.
De nya semantiska elementen i HTML5 är:
<footer>
Sidfoten i dokumentet. Kan innehålla tex information om författaren, copyright, kontaktuppgifter, sidkarta eller relaterade dokument. Du kan ha flera <footer> i ett dokument.
<header>
Sidhuvudet i dokumentet. Kan användas för introduktion av innehåll eller navigering etc. OBS! Kan inte placeras i <footer>, eller annat <header> element.
<nav>
Navigation eller meny. Används för block eller grupper av länkar som tex menyer. Ökar användarvänligeten för de som använder screen readers eller talsyntes.
<main>
Huvudinnehållet i dokumentet. Innehållet ska vara unikt för dokumentet. Ska inte innehålla upprepat innehåll som tex menyer, copyright, logotyper och sökfomulär. OBS! Det får bara finnas ett <main> i ett dokument och detta får inte vara underordnat <article>, <aside>, <footer>, <header> eller <nav>.
<section> En sektion i dokumentet. Kan vara tex kapitel, introduktionstext, nyheter och kontaktinformation.
<article>
Innehåller en oberoende artikel som ska kunna återges oberoende av övrigt innehåll i dokumentet. Kan vara tex forum, bloggar, news/nyheter.
<aside> Definierar ett innehåll vid sidan av det huvudinnehåll det anknyter till. Ska vara relaterat till omgivande innehåll och kan vara tex ett förtydligande eller en förklaring till huvudinnehållet.
<details>
Ytterligare detaljer som användaren kan visa eller gömma. Kan användas för att skapa en interaktiv funktion som kan visas eller döljas. Kan innehålla alla typer av innehåll och bör vara dolt när dokumentet hämtas.
<summary> En synlig rubrik till elementet <details>. När användaren klickar på rubriken så visas eller döljs innehållet i <details>.
<figure> Innehåll som tex bilder, illustrationer, diagram etc.
<figcaption> En bildtext till elementet <figure>.
<mark> Markerad text eller textfokus.
<time> Datum och tid. Kan användas för att lägga till kod för datum och tid så att webbläsaren kan generera påminnelser, schemalagda aktiviteter mm.
Här är ett exempel på hur du kan använda de semantiska elementen:
<body>
<header>
<h1>HTML5</h1>
</header>
<nav>
<ul>
<li>Meny 1</li>
<li>Meny 2</li>
<li>Meny3</li>
</ul>
</nav>
<main>
<section>
<article>
<h2>Artikel 1</h2>
<p>Det här är artikel 1 som är en del av huvudtexten</p>
<aside>Det här är en notis i anslutning till artikeln.</aside>
</article>
<article>
<h2>Artikel 2</h2>
<p>Det här är artikel 2 som är en del av huvudtexten</p>
</article>
</section>
</main>
<footer>
<p>© 2015 Webdesignskolan</p>
</footer>
</body>
</html>
Så här kan resultatet se ut:
HTML5 har stöd i alla moderna webbläsare. För äldre webbläsare gäller att de hanterar okända element som inline element, dvs placerar dem på en linje, i rad.
Du kan använda en CSS-kod för att hjälpa äldre webbläsare att hantera de nya semantiska elementen som block-element, dvs som boxar/containers som kan placeras över/under/efter varandra:
Placera CSS-koden ovan i din externa CSS-mall.
Internet Explorer 8 och tidigare versioner tillåter inte CSS-formatering av okända element. Genom att använda javascriptet nedan och placera det inom <HEAD> så kommer även IE att fungera med semantiska element:
En grundtanke med de semantiska elementen är att de ska ersätta <DIV>. Flera av de nya semantiska elementen har dessutom namn som liknar de mest använda namnen på de DIV som används.
Om du vill börja använda HTML5 i dina befintliga sidor så kan du byta ut namnen på de DIV du använder som tex:
<div id="header"> byts till <header>
<div id="menu"> byts till <nav>
<div id="content"> byts till <section>
<div id="footer"> byts till <footer>
osv...
Gör samma ändringar i din CSS-kod så fungerar sidorna exakt likadant som tidigare men är nu anpassade till HTML5.
En enkel CSS-formatering av de semantiska elementen som vi använde i vårt tidigare exempel ovan. Förutom de semantiska elementen har vi även formaterat <BODY> och <UL>:
Här ser du tydligare att de semantiska elementen fungerar som block-element:
Klicka här för att se exemplet ovan »
I exemplet nedan är alla använda sematiska element formaterade. Notera att listan <ul> som används till menyn nu är underordnad elementet <nav>. Detta för att inte alla eventuella andra listor ska formateras samtidigt:
Så här kan resultatet bli i webbläsaren:
När du formaterar de semantiska elementen gäller samma format för alla förekomster av tex <article>. För att använda olika formatering kan du använda classer som tillämpas på det aktuella semantiska elementet.
I exemplet nedan använder "Artikel 2" en annan bakgrundsfärg än "Artikel 1":
Klicka här för att se exemplet ovan »
Vi har lagt till en class med valfritt namn som kan tillämpas på elementet <article>:
Här tillämpas classen på elementet <article>:
Ett semantiskt element beskriver innehållet för webbläsaren. Ett icke-semantiskt element som <div> anger inte vad elementet egentligen innehåller.
Elementet <DIV> har i HTML4 använts för att strukturera dokumentet. Men även om du kunnat använda dina egna namn på ID och CLASS som haft en logisk innebörd för dokumentets innehåll så hade de ingen semantisk innebörd för webbläsaren.
Men du kan fortfarande använda <DIV> när det inte finns något semantiskt element som passar. Ett användningsområde kan tex vara för att anpassa layouten genom att placera de semantiska elementen i en CSS-formaterad box.
I exemplet nedan används en DIV som omsluter alla semantiska element och används som en layout-box med angiven bredd och skugga:
Klicka här för att se exemplet ovan »
HTML-koden med den DIV som omsluter alla semantiska element:
CSS-koden som formaterar vår DIV:
En metod för att underlätta för webbläsaren och dessutom göra dina sidor snabbare är att använda en Doctype-deklaration - DTD (Document type declaration).
Här är en lista över rekommenderade doctypes från W3C: http://www.w3.org/QA/2002/04/valid-dtd-list.html 
OBS! Om du börjar bygga dina sidor idag ska du använda den doctype som gäller för HTML5 och den fungerar även för dina äldre dokument med kod skriven för HTML4 och XHTML:
Om du vill använda HTML4 eller XHTML kan du använda någon av de äldre doctypes du ser exempel på nedan:
Strict innebär att nästan all formatering sker med CSS och ingen formatering bör ske i övrig kod. Här gäller alltså strikt separering av innehåll och layout. Om din kod validerar enligt W3C bör du använda denna doctype (läs om W3C och validering » )
Strict HTML:
Avsnittet: http://www.w3.org/TR/html4/strict.dtd är egentligen en länk till W3C:s egna riktlinjer för denna doctype. Observera att det finns en viss risk att adressen ändras av W3C i framtiden och om så sker så måste du också ändra informationen i dina egna dokument...
Strict XHTML:
Transitional kan beskrivas som en övergång mellan den strikta separeringen av innehåll och layout och de tidigare standarderna. Beskrivningen innehåller förutom allt som är godkänd enligt Strict även äldre element. Formatering direkt i sidorna är tillåten. Tillägg som bara stöds av vissa webbläsare är normalt inte tillåtna. Om din kod inte validerar enligt W3C bör du använda denna doctype.
Transitional HTML:
Transitional XHTML:
Om du använt en Doctype-deklaration och den dessutom är korrekt enligt innehållet i din kod så väljer webbläsaren sitt standardläge "Standard mode" och sidan ska då presenteras enligt gällande regler för respektive doctype. Detta är alltså det optimala läget som i längden främjar framtida webbstandards.
Om angiven doctype däremot inte stämmer mot innehållet i koden går webbläsaren över i "quirks mode" vilket innebär att webbläsaren bryter mot W3C:s rekommendationer och visar sidorna enligt sina egna metoder för bla bakåtkompatibilitet. Olika webbläsare har olika quirks mode och kan alltså visa sidorna på olika sätt. Om ingen Doctype-deklaration alls använts så används automatiskt quirks mode. Begreppet "quirks" kan liknas vid olika "klurigheter" som egentligen betyder annat än utlovat...
Läs mer om olika webbläsare i guiden webbläsare och säkerhet »
Läs mer om val av rätt doctype i guiden CSS - positionering »
skriv ut »