En introduktion till HTML 5/XHTML 2
8 Jan 2009 Av LenaGrundläggande struktur och element i HTML 5 (Web Applications 1.0)
Vi som är vana att skriva HTML/XHTML använder oss av olika div- element, exempelvis div-header, div-footer, div-sidebar och div-main + några till efter behov. När det däremot handlar om HTML 5 så finns det speciella element till specifika ändamål. Vi ska nu kika lite närmare på dessa och göra en jämförelse.
Så här brukar en layout oftast vara strukturerad i xhtml:
<html>
<head>
<title>Min hemsida</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Min hemsida</h1>
</div>
<div id="main">
<p>Lite text</p>
</div>
<div id="sidebar">
<div id="navcontainer">
<ul>
<li>länk</li>
<li>länk</li>
<li>länk</li>
</ul>
</div>
<p>Lite text i sidebar</p>
</div>
</div>
<div id="footer">
<p>Copyright och liknande</p>
</div>
</body>
</html>
Som du ser så är det olika nästlade div-block. Det är ett och samma div-block som vi ger olika karaktärer och egenskaper utifrån där vi vill placera dem, och det enda vi egentligen specificerar dem med är olika id som sedan presenteras via css. Men – så länge vi semantiskt strukturerar upp koderna är det ju inga problem. I HTML 5 har däremot semantiken ytterligare stramats åt, eller vi kanske mer ska säga att den har gjorts mer överblickbar och direkt specificerad. Låt oss kika på hur samma sida som jag kodade ovanför kan se ut med elementen för HTML 5:
<html>
<head>
<title>Min hemsida</title>
</head>
<body>
<header>
<h1>Min hemsida</h1>
</header>
<section>
<article>
<p>Lite text</p>
</article>
</section>
<aside>
<nav>
<ul>
<li>länk</li>
<li>länk</li>
<li>länk</li>
</ul>
</nav>
<p>Lite text i sidebar</p>
</aside>
<footer>
<p>Copyright och liknande</p>
</footer>
</body>
</html>
De strukturella elementen är således header, section, article, nav och footer. I och för sig så använder vi ju elementen header och footer redan nu, men ge akt på kodningen. I HTML 5 använder du inga div id-taggar för dessa. Helt nytt semantiskt element för vår del är aside.
Så här fungerar det:
<header> är inte samma sak som <head> utan motsvarar <div id=”header”>, samma sak gäller <footer> som motsvarar <div id=”footer”>.
<section> är en avgränsad del på sidan, likt en del eller ett kapitel i en bok. I section kan du sedan koppla ett samband mellan olika ämnen via <article> på ett bra semantiskt vis.
<article> är ett självständigt element vilket specificerar ett ämne på en sida som är sammankopplad till en speciell artikel. Det kan exempelvis vara varje post i en blogg, där alla poster (articles) ligger inom en och samma section (block). Enklare uttryckt kan man säga att section är det block som motsvarar div-main. I div-main har du dina poster/inlägg där vart och ett av dessa motsvarar en article.
<nav> är ett nytt strukturellt element för att samla din navigering eller länksamling. Där du väljer att lägga dina länkar, där använder du element nav.
Det nya semantiska elementet för vår del är aside. Aside används som ett yttre element, exempelvis som en sidebar, pullquotes och fotnoter. Pullquote är en större textmängd citat man lyfter ur en artikel eller längre text, ofta med ett större typsnitt. Tidningarna brukar använda sig av detta. I vårt fall använder vi aside till en sidebar.
Andra nya semantiska element att kunna är <figure> vilket används i olika block-nivåer som är relevant för ämnet, exempelvis bilder (img), object, embed, audio, video och iframe, med deras respektive beskrivningar (caption). <dialog> specificerar en avgränsad del på en sida där det förs en kommunikation (vilket hörs av namnet). <dialog> kan omsluta en tabell dt – dd och lämpar sig bra för forum eller bloggar där fler människor konverserar med varandra.
En mer fördjupad lista om elementen i HTML 5 och dess egenskaper kan du läsa hos Simon. Tror du att design och layout för HTML5 särskiljer sig från XHTML/HTML? Kika in hos HTML5 Gallery så får du svaret. Robert Nyman är exempelvis en som har har valt att konverterat hela sin site till HTML5.
Här listar jag vad som skrivs i ämnet.
- whatwg.org/wiki/FAQ
- whatwg.org/specs/web-apps
- Comparison_of_layout_engines
- w3.org – HTML 5 differences from HTML 4
- w3.org – HTML 5
- wikipedia.org/wiki/HTML5
- 456bereastreet.com – HTML från en annan synvinkel
- 456bereastreet.com om HTML 5
Jag ska väl också tillägga att i XHTML 5 så använder man <!DOCTYPE html> för standard compliant mode.
6 kommentarer till En introduktion till HTML 5/XHTML 2
RSS feed for comments on this post. TrackBack URL
Lena: 
Anna: 
Hej
Ska precis bygga en ny hemsida och håller på att välja arkitektur. Har läst lite om 960-Grid skulle det vara intressant att ta upp här på din eminenta sida?
Tack för nätets bästa överblickssida!
Hej!
Ja det vore en bra guide. Jag ska fundera på saken. Tack för ditt beröm =)
Bra guide!
Har precis satt mig ner och börjat bygga ett slimmat HTML5 WP-tema. Skulle vilja hålla mig till en helt semantisk uppbyggnad men 960 grid kräver rätt många div-containers.
Hej!
Japp så är det, varför inte lägga upp ett enklare template? Tack för din kommentar =)
Välformulerad kortis! Bra!
Tack!