Grundläggande struktur och element i HTML 5 (Web Applications 1.0) – del 2

on

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.

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

Jag ska väl också tillägga att i XHTML 5 så behöver man inte använda något doctype. Dock kan man använda <!DOCTYPE html> för standard compliant mode. Läs gärna mer.

Andra bloggar om: , ,

Liknande poster:

0 Comments Add yours

  1. zcorpan says:

    > Jag ska väl också tillägga att i HTML 5 så behöver man inte använda något doctype.

    Jo, det behöver man. 🙂 http://www.whatwg.org/specs/web-apps/current-work/multipage/section-writing0.html

    Däremot behöver man inte ha någon doctype i XHTML5. http://www.whatwg.org/specs/web-apps/current-work/multipage/section-conformance.html#authors-using-xhtml

    xhtml development skrev:
    > Är det troligt att html 5 kommer bli standard och utmana xhtml som idag verkar vart på framgång för att förenkla kodandet och styra allt med CSS??

    HTML5 utmanar inte XHTML, utan uppdaterar XHTML.

    CSS kan du använda på samma sätt för både HTML och XHTML.

    Hej, förutom länkarna här ovanför hänvisar jag bland annat till diskussionerna i topic http://forums.whatwg.org/viewtopic.php?t=113 och sedan var det ännu en tråd där ni diskuterade doctypes och att de egentligen inte skulle behövas för ämnet. Många röster och krafter är det – men bra att du påpekar.
  2. Det låter intressant att jobba med html 5 och verkar helt klart enklare. Är det dock inte fler begränsningar då det inte är klart ännu med standarder och css i kombination??

    Är det troligt att html 5 kommer bli standard och utmana xhtml som idag verkar vart på framgång för att förenkla kodandet och styra allt med CSS??

    VOre trevligt med kommentarer om förnyelser och ändringar för visst har CSS att göra med standarden med.. hänger inte den med blir det kanske kaos om man besklutar sig för tidigt om standarden i framtiden…

    Förlåt för sent svar men jag ville vänta in intervjun med Robert innan jag svarade, läs gärna den. Sedan kommer det en fördjupad artikel om CSS – HTML 5 och XHTML i början av nästa år som jag hoppas att ska kunna besvara några av alla frågor vi funderar över.
    mvh/Lena

Leave a Reply

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