En introduktion till HTML 5/XHTML 2

Webben - börja gärna här

Doctypes

HTML

Web standards

XHTML

HTML5

En introduktion till HTML5/XHTML2

CSS

CSS3

XHTML/CSS

Serverscript

.htaccess

JS-files - guider, exempel

Skapa en JS-file

Javascript

En introduktion till HTML 5/XHTML 2

8 Jan 2009 Av Lena

Grundlä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.