Rory blogt:

U bevindt zich hier: Rory Servaas HTML5 - Deel 3 'Vrijheid binnen HTML5'

HTML5 - Deel 3 'Vrijheid binnen HTML5'

HTML5 is niet alleen makkelijk te lezen en indexeren voor een zoekmachine maar het wordt de webdesigner ook makkelijker gemaakt. Zoals in HTML5 - Deel 2 'Nieuwe content elementen' besproken kan je bijvoorbeeld nu (w3c valid) Header tags (<h1>) binnen een <a> tag gebruiken. Handig! Zo hoef je geen rekening te houden om overal span's van te maken maar krijg je meer vrijheid voor de content die je wil linken. Maar dit is niet de enige vrijheid binnen HTML5 die je krijgt. Er zijn zelf tags die je niet hoeft te gebruiken of kan gebruiken maar niet af hoeft te sluiten. 

Optionele HTML5 tags

Binnen HTML5 zijn er een aantal tags die je eigenlijk niet hoeft te gebruiken. Het gebruik hiervan staat dus vrij.

Dit zijn optionele tags:

  • <html>
  • <head>
  • <body>

Het kleinste voorbeeld om een complete HTML5 pagina op te zetten ziet er als volgt uit:

<!doctype html>
<title>Mijn eerste HTML5 pagina</title>
<p>Dit is de content van de pagina

Er zitten dus wel guidelines aan HTML5 en het gebruik van de nieuwe tags (zoals <header> en <section>) maar deze zijn dus niet verplicht om altijd te gebruiken.

Is de code in het voorbeeld wel valid? Want de <p> tag is niet afgesloten. Ja! Dit leg ik hieronder verder uit. 

Afsluiten van tags

Naast de optionele tags binnen HTML5 zijn er ook tags die je kan gebruiken maar niet noodzakelijk hoeft af te sluiten. Dit kan handig zijn om je code kleiner te houden of makkelijker leesbaar te houden. Dit is allemaal naar eigen inzicht te gebruiken natuurlijk, het resultaat is w3c valid.

Deze tags zijn in de meeste gevallen optioneel om af te sluiten:

  • </html>
  • </head>
  • </body>
  • </dt>
  • </dd>
  • </li>
  • </tbody>
  • </th>
  • </tr>
  • </td>
  • </tfoot>
  • </p>
  • </option>

Voorbeeld:

<!doctype html>
<meta charset="utf-8">
<p>Vanaf dit moment kunnen we een lijst opbouwen:
<ul>
 <li>Optie 1 is beschikbaar
 <li>Optie 2 ook
 <li>Optie 3 is hierna te lezen
</ul>
<p>De lijst lijkt zo compleet
<p>Hier sluiten wij de pagina

Dit voorbeeld zal zonder problemen valid worden verklaard.

Uitzonderingen

Er zitten bij sommige tags nog wel een paar haken en ogen aan zoals dat je je content nooit mag beginnen met een comment (<!-- comment -->). Voor een volledige lijst met uitsluitsels kijk dan op de HTML5 Specifitation overview van w3.