Nya taggar i HTML5

Prenumerera via RSS Prenumerera via Mail

HTML5 är den nya kommande standarden för att koda webbsajter. Det har tillkommit många nya spännade taggar för en mer semantisk struktur över koden. Idag används mesta dels div taggen för att strukturera upp innehållet vilket i grund och botten inte är så meningsfullt. Vi tar en titt på några av de nya taggarna.

Är en allmän sektion och används för att gruppera innehåll. Section taggar kan nästlas i varandra och kan innehålla vilken typ av taggar som helst.

Definierar en header sektion. Kan tex vara sidhuvudet på sajten men även huvudet inom en enskild artikel eller sektion.

Definierar en footer sektion och kan precis som <header> vara definierad för hela sajten eller enskild sektion eller artikel.

<nav>

<nav> definierar ett navigationsområde, oftast en lista med länkar till andra sidor.

<article> taggen används för att strukturera upp en fristående artikel eller ett inlägg på en blogg / magazin.

<aside>

Ifall man har extra information till en artikel som tex ett litet tips kan det definieras med <aside>. Det största användningsområdet kommer nog dock blir för sidebaren i bloggar.

Sammansatt kod för en HTML5 sida

<!DOCTYPE html>
<html>
  <head>
    <title>Min bloggtitel</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Bloggtitel</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Sida 1</a></li>
        <li><a href="#">Sida 2</a></li>
        <li><a href="#">Sida 3</a></li>
        <li><a href="#">Sida 4</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h2><a href="#">Artikeltitel</a></h2>
        </header>
        <section>
          <p>Artikelinnehåll...</p>
        </section>
      </article>
      <aside>
        <h4>Länkar</h4>
        <nav>
	  <ul>
	    <li><a href="#">Länk 1</a></li>
	    <li><a href="#">Länk 1</a></li>
	  </ul>
        </nav>				
      </aside>
    </section>
    <footer>
      <p>Copyright © 2009</p>
    </footer>
  </body>
</html>

Hur du använder dessa taggar idag

Du kan börja använda dessa taggar redan nu även fast alla webbläsare inte stödjer dom med hjälp av några små knep. Doctype deklarationen i ett HTML5 dokument skrivs <!DOCTYPE html>, ja visst är den enkel? Den doctype deklarationen känner dock inte alla webbläsare till men webbläsarna är så pass flexibla att dom kan hantera de okända taggarna ändå. Problemet är att dom inte har några speciella CSS värden som default och därför renderas alla dessa taggar som inline element vilket är lite felaktigt. Så det du ska göra är att sätta taggarna som blockelement i din CSS vilket fixar renderingen.

Problem med IE

Ja som vanligt måste man göra några extrasteg för att få detta att fungera i IE. IE kan nämligen inte applicera CSS:en på de nya taggarna. Så vad gör vi då? Jo vi adderar taggarna med hjälp utav lite Javascript och plötsligt kan också IE lägga till CSS:en på rätt sätt.

<script type="text/javascript">
   document.createElement('header');
   document.createElement('footer');
   document.createElement('section');
   document.createElement('aside');
   document.createElement('nav');
   document.createElement('article');
</script>

Sammanfattning

Som du märker har stort fokus lagts på att ge bättre och mer meningsfull struktur åt koden. Efter att ha satt mig in i HTML5 en del så ser det riktigt intressant och smidigt ut. Det finns dock mer nyheter än bara nya taggar i HTML5. Tänkte gå igenom mer av dessa här framöver.

Skrivet 14 oktober - 2009 Postat i: Tips & Trick, Övrigt

4 kommentarer till Nya taggar i HTML5

Johan Leitet
14 oktober 2009, kl 12:28

Utmärkt artikel. Var dock försiktig med att säga att section kan liknas med div. Det är inte helt korrekt. Om man ska skapa en del av en sida ska man fortfarande använda exempelvis. Sektion ska man använda då sektionen har ett väl definierat innehåll och som t.ex. olika delar av en blogpost etc. Lite svårt att förklara men läs gärna mer på:

http://html5doctor.com/the-section-element/

Svara
- Johan Leitet
  14 oktober 2009, kl 12:38
  
  Opps, tänkte inte på att man inte kan skriva kod här.
  
  ”Om man ska skapa en del av en sida ska man fortfarande använda exempelvis <div id=’content’>.”
  
  Svara
- Johannes Holmberg
  14 oktober 2009, kl 16:09
  
  Tack för länken Johan! Den gav bra information om när man bör använda section och när man bör använda div.
  
  Ska fixa så att kommentarerna kan innehålla viss kod också, dundertabbe av mig.
  
  Svara
Tommie Hansen
08 november 2009, kl 21:34

Kortfattat och bra artikel faktiskt! Det känns dock inte helt vettigt att använda HTML5 när det har så dåligt stöd allas kära IE.

Det ska bli intressant att se vad HTML5 kan göra för SEO och annat då det blir så mycket tydligare vad som är vad.

Svara