En introduktion till HTML 5

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. Helt nytt semantiskt element för vår del är aside.

Så här fungerar det:
<header> är inte samma sak som <head> utan är “huvudet” för en section (avdelning). Man kan därför hitta elementet <header> i blocket div id=”footer” om denna innehåller en <section>.

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

<hgroup> används när man grupperar två eller fler rubriker, se exempel – h1 titel och under denna h2 som underrubrik

<hgroup>
<h1>Lär mer om HTML5</h1>
<h2>Nya strukturella element</h2>
</hgroup>

EDIT(2013-12-19)/ hgroup-specifikationen är inte längre aktuell och därför borttagen.
RIP HTML5 <hgroup> Element

Att skriva html5

Bara för att de nya elementen tillkommit så betyder det inte att man inte fortfarande kan använda sig av de traditionella div-blocken. Tvärtom – istället för att som så många numer börjar göra, definiera elementet <section> med ett id likt <section id=”main”> ska man använda div id=”main” som ju är HTML. I div id=”main” läggs sedan elementet <section> in och för varje artikel elementet <article>. De nya strukturella och semantiska elementen ska inte användas i kombination med något ID för att tillsammans med css utgöra presentationen, då försvinner ju själva idén med dem.

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.

Här listar jag vad som skrivs i ämnet.

Jag ska väl också tillägga att i HTML 5 så använder man <!DOCTYPE html> för standard compliant mode.

8 Comments Add yours

  1. Yvonne says:

    Ska göra en site och funderar på att göra den i HTML5. Vilket utvecklingsverktyg är bäst? Microsofts web3 eller något annat?

    Yvonne

    1. Lena says:

      Hej Yvonne!

      Jag knackar mina koder för hand med hjälp av dreamweaver i öppet kodläge. Microsofts web3 vet jag tyvärr inte så mycket om.

  2. Niclas says:

    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!

    1. Lena says:

      Hej!

      Ja det vore en bra guide. Jag ska fundera på saken. Tack för ditt beröm =)

  3. Alexander says:

    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.

    1. Lena says:

      Hej!
      Japp så är det, varför inte lägga upp ett enklare template? Tack för din kommentar =)

  4. Välformulerad kortis! Bra!

    1. Lena says:

      Tack!

Leave a Reply

Your email address will not be published. Required fields are marked *