kaxigt.com

Jag skriver om webben för webben

Hem » HTML-guider » En introduktion till HTML 5

En introduktion till HTML 5

Postad: 8 januari 2009 | HTML-guider | 8 Comments
Lästid: 3 minuter

I denna guide får du bekanta dig HTML5 – det mest använda märkspråket idag.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

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 i detta fall handlar det inte om avgränsande block-element. Helt nytt semantiskt element för vår del är aside.

Så här fungerar det:

<header> är <em>inte</em> 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 <em>avgränsad</em> del på sidan, likt en del eller ett kapitel i en bok. I section kan du sedan koppla ett <em>samband</em> mellan olika ämnen via <article> på ett bra semantiskt vis.
<article> är ett självständigt element vilket <em>specificerar</em> 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).
<nav> är ett <em>nytt strukturellt element</em> 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>
Uppdaterat 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.