HTML5 Basics: de markup van een pagina

HTML is al sinds jaar en dag de markup-taal van het wereldwijde web. Al sinds 1997, inmiddels dus al zestien jaar, gebruiken we de vierde versie van HTML als internationale standaard. Eind 2014 zal daar echter hoogstwaarschijnlijk verandering in komen, verwacht wordt namelijk dat binnen nu en een jaar HTML5 zijn definitieve goedkeuring krijgt als nieuwe standaard op het web. Op deze Tutorial Tuesday leggen we uit hoe je een basis kan leggen voor een goede pagina-structuur met HTML5.

Wat is HTML5?

HTML5 is de vernieuwde versie van HTML. Aan de ene kant bouwt het verder op zijn voorganger, maar aan de andere kant introduceert het een geheel nieuwe manier van markup (opmaak). Zoals we eerder al even noemden, krijgen we verbeterde media ondersteuning. Dat is echter slechts het begin: de vijfde versie van HTML maakt het de ontwikkelaar een stuk makkelijker door met nieuwe elementen voor de layout te komen.

HTML5 heeft veel weg van de notatie en denkwijze die bij xml gehanteerd wordt. We zullen hieronder voorbeelden geven van de mogelijke nieuwe structuren waarmee je HTML5-pagina’s kan opbouwen.

HTML5 Basis Structuur

  <header>
  </header>

  <nav>
  </nav>

  <section id="sidebar">
  </section>

  <section id="main">
  </section>

  <aside>
  </aside>

  <footer>
  </footer>

Nieuwe Elementen, Minder DIVs

Zoals je kunt zien in het voorbeeld hierboven, onderscheiden we een header, nav, aside, footer en twee sections. Hierdoor wordt het voor zowel de bouwer als de web browser meteen duidelijk welk deel van de pagina op welke positie staat. Wat opvalt is dat het gebruik van DIVs (en spans) hiermee sterk wordt teruggedronken, immers: we hoeven geen divs meer te definiëren voor headers, footers of navigatiebalken.

Content

Voor de content in onze HTML5 pagina hebben we hierboven een ‘main’ section gedefinieerd. Daarin kunnen we alle primaire inhoud van de pagina kwijt, bijvoorbeeld de tekst van een artikel. De main section zou er dan bijvoorbeeld zou uit kunnen komen te zien:

<section id="main">
<article>
Hier komt de content van je artikel.
</article>
</section>

Headers en footers

Headers en footers beperken zich niet tot de pagina’s zelf bij HTML5: je kunt ze ook toevoegen aan sections. Zo zou je bijvoorbeeld een header en footer aan je article kunnen toevoegen, waarin je de publicatiedatum, titel en auteur kwijt kan:

<section id="main">
  <article>

    <header>
      <h1>Titel van het artikel</h1>
    </header>

    <section id="content">
      De inhoud van het artikel.
    </section>

    <footer>
      <time>Dinsdag 10 september 2013, 12:30</time>
    </footer>
  </article>

</section>

Aside

Een ander belangrijk nieuw element in HTML5 is aside. Met aside voeg je informatie toe die gerelateerd is aan de kern van je pagina. Bij het artikel hierboven zou je bijvoorbeeld aside kunnen gebruiken om informatie over de auteur weer te geven.

  <article>

    <header>
      <h1>Titel van het artikel</h1>
    </header>

    <section id="content">
      De inhoud van het artikel.
    </section>
    <aside>
      Informatie over de auteur.
    </aside>
    <footer>
      <time>Dinsdag 10 september 2013, 12:30</time>
    </footer>

  </article>

Zijn DIVs overbodig?

Zo op het eerste oog lijkt het dat DIVs door de komst van deze nieuwe HTML5 elementen compleet overbodig zou worden. Dat dachten we ook toen jaren terug DIVs werden opgeworpen als vervanger voor TABLEs. TABLEs zijn nog tot op de dag van vandaag relevant voor weergave van content en dat zal tevens gelden voor DIVs in HTML5. Er blijven vele pagina-onderdelen over die niet met HTML5 elementen zijn vervangen, zo zal het altijd nuttig blijven om groepen content in een DIV te stoppen om deze vervolgens eenzelfde stijl toe te kennen met CSS.

Conclusie

HTML5 komt met een flinke hoeveelheid nieuwe, handige elementen die de layout van je webpagina’s een stuk overzichtelijker en praktischer maakt. Meer informatie over de globale HTML5 structuur vind je hier. Een overzicht van overige nieuwe HTML5 elementen is hier te bekijken.