html 5

Nya semantiska taggar för smidigare uppmärkning

I och med HTML5 introduceras en rad nya element som ersätter de semantiskt tomma <div>- och <span>-elementen. De nya uppmärkningselementen anger redan i maskinkoden vilken typ av innehåll som presenteras inom taggarna, t.ex <time> för datum och <footer> för innehåll i webbsidans sidfot.

Hade jag själv fått bestämma hade taggarna varit ännu fler. Jag önskar att det funnits fördefinierade element även för "webbsida", "högerspalt" och "vänsterspalt", men det handlar naturligtvis inte om layout utan semantik. Med andra ord kommer <div> och id fortfarande till användning, liksom <span> och givetvis class.

<article>

<article> märker upp innehåll som ska kunna återanvändas i sin helhet i annat sammanhang. Det kan också röra sig om innehåll som i sin helhet har klipps och klistrats in på den aktuella webbsidan, t.ex en tidningsartikel eller ett blogginlägg. <article> syftar dock inte enbart på redaktionellt material utan kan lika gärna innehålla ett matrecept eller en applikation.

Eftersom man kan ha flera <article> på samma webbsida kan man i och med HTML5 ha flera <h1>-element, dvs huvudrubriker, på samma sida – otänkbart i HTML4. En <article> kan även innehålla egen <header> och <footer>.

<aside>

<aside> används för innehåll som inte ligger i själva textflödet men som ändå hör ihop med detta. Faktarutor är typiskt aside-material, liksom annat tillhörande innehåll – jämför med tidningarnas användning av extramaterial.

<footer>

<footer> ersätter tidigare konstruktioner i stil med <div id="footer">, för att märka upp innehåll i webbsidans sidfot. Skillnaden är att <footer> även kan förekomma inom <article> och <section>.

<header>

<header> får inte blandas ihop med <head>, som ju enbart innehåller metainformation. <header> ersätter <div id="header"> och märker upp innehåll i webbsidans sidhuvud. Liksom <footer> kan <header> förekomma flera gånger på samma sida, inom <article> och <section>.

<hgroup>

<hgroup> grupperar rubriker i olika nivåer, alltså <h1> till <h6>. Förutom vid rubriker och underrubriker kan <hgroup> användas för uppmärkning av taglines till webbplatsens namn; i HTML5 kan <h1> och <h2> användas inom headerpartiet.

<mark>

<mark> märker upp text av referensskäl. Syns inte i layouten.

<nav>

<nav> ersätter tidigare konstruktioner med <div id="navigation"> och liknande, för att märka upp länksamlingar för navigering inom webbplatsen. Övriga länksamlingar uppmärks hellre med exempelvis <div>.

<section>

<section> grupperar innehåll, vanligen tematiskt, och innehåller minst en rubrik. Det kan röra sig om kapitel i ett längre dokument, eller delar av en webbsida – dock inte sådant som vänster- och högerspalt.

<time>

<time> märker upp datum. Du kan välja att lägga till klockslag och publiceringsdatum.

<time datetime="2011-07-05T14:48:10" pubdate="2011-08-12">Augusti 2011</time>

Nya taggar introduceras i och med html 5.

Förenklad doctype-deklaration

Goda nyheter: doctype-deklarationen i HTML5 är mycket enklare än i tidigare versioner. Se bara till att den kommer allra först i HTML-dokumentet, för att undvika problem i vissa webbläsare.

<!DOCTYPE HTML>

Exempel på HTML-kod

Så här kan HTML-koden till en (mycket enkel) webbsida se ut:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="html5.css" />
</head>
<body>
<header></header>
<nav></nav>
<section>
<article>
</article>
</section>
<footer>
</footer>
</body>
</html>

Observera att länken till CSS-filen är förenklad, jämfört med HTML4; type="text/css" är överflödig i HTML5.

Bortrationaliserade taggar (deprecated)

Vissa taggar var redan utgångna i XHTML 1.0 Strict, men accepterade i XHTML 1.0 Transitional. I och med HTML5 är dessa nu helt borta:

Observera att frame-, frameset och noframes-taggarna alltså är borta, men däremot inte <iframe> som bl.a används när man bäddar in YouTube-klipp.

Läs mer på www.html5doctor.com. Här tar författarna upp vanliga missuppfattningar om HMTL5.