Een belangrijk principe bij webdesign is het idee om HTML-elementen te gebruiken om aan te geven wat ze eigenlijk zijn, in plaats van hoe ze standaard in de browser kunnen verschijnen. Dit staat bekend als het gebruik van semantische HTML.

Wat is semantische HTML?

Semantische HTML of semantische opmaak is HTML die betekenis geeft aan de webpagina in plaats van alleen de presentatie. Bijvoorbeeld, een

 tag geeft aan dat de bijgevoegde tekst een alinea is. Dit is zowel semantisch als presentatief omdat mensen weten wat alinea's zijn en browsers weten hoe ze deze moeten weergeven.

Aan de andere kant van deze vergelijking, tags zoals  en  zijn niet semantisch. Ze definiëren alleen hoe de tekst eruit moet zien (vet of cursief) en geven geen extra betekenis aan de opmaak.

Voorbeelden van semantische HTML-tags zijn:

• Header-tags

   door

Er zijn veel meer semantische HTML-tags die u kunt gebruiken bij het bouwen van een website die aan de normen voldoet.

Waarom u om semantiek zou moeten geven

Het voordeel van het schrijven van semantische HTML komt voort uit wat het belangrijkste doel van elke webpagina zou moeten zijn: de wens om te communiceren. Door semantische tags aan uw document toe te voegen, geeft u aanvullende informatie over dat document, wat helpt bij de communicatie. Met name semantische tags maken het voor de browser duidelijk wat de betekenis van een pagina en de inhoud ervan is. Die duidelijkheid wordt ook gecommuniceerd met zoekmachines, zodat de juiste pagina's voor de juiste zoekopdrachten worden opgeleverd.

Semantische HTML-tags bieden informatie over de inhoud van die tags die verder gaat dan alleen hoe ze eruitzien op een pagina. Tekst die is ingesloten in de  tag wordt door de browser onmiddellijk herkend als een soort codeertaal. In plaats van te proberen die code weer te geven, begrijpt de browser dat u die tekst gebruikt als voorbeeld van de code voor een artikel of online tutorial.

Het gebruik van semantische tags geeft je ook veel meer haken voor het stylen van je inhoud. Misschien geeft u er vandaag de voorkeur aan uw codevoorbeelden in de standaard browserstijl weer te geven, maar morgen wilt u ze misschien oproepen met een grijze achtergrondkleur; later wil je misschien de precieze mono-spaced fontfamilie definiëren of lettertype stapel te gebruiken voor uw monsters. U kunt al deze dingen eenvoudig doen door semantische opmaak en slim toegepaste CSS te gebruiken.

Semantische tags correct gebruiken

Wanneer u semantische tags gebruikt om betekenis over te brengen in plaats van voor presentatiedoeleinden, pas dan op dat u ze niet verkeerd gebruikt, alleen vanwege hun algemene weergave-eigenschappen. Enkele van de meest misbruikte semantische tags zijn:

• blokcitaat — Sommige mensen gebruiken de tag voor het laten inspringen van tekst die geen aanhalingsteken is. Dit komt omdat blockquotes standaard ingesprongen zijn. Als u alleen tekst wilt laten inspringen die geen blokcitaat is, gebruikt u in plaats daarvan CSS-marges.
• p — Sommige webeditors gebruiken (een vaste spatie in een alinea) om extra ruimte tussen pagina-elementen toe te voegen, in plaats van daadwerkelijke alinea's voor de tekst van die pagina te definiëren. Net als in het vorige voorbeeld, moet u in plaats daarvan de eigenschap marge of opvulstijl gebruiken om ruimte toe te voegen.
• ul — Zoals bij

  , tekst insluitend in a

   tag laat die tekst in de meeste browsers inspringen. Dit is zowel semantisch incorrect als ongeldige HTML, omdat alleen
  •  tags zijn geldig binnen a
    label. Gebruik opnieuw de marge- of opvulstijl om tekst te laten inspringen.
  • h1, h2, h3, h4, h5 en h6 — U kunt koptags gebruiken om lettertypen groter en vetter te maken, maar als de tekst geen kop is, gebruikt u in plaats daarvan de CSS-eigenschappen font-weight en font-size.

  Door HTML-tags te gebruiken die betekenis hebben, maakt u pagina's die meer informatie verstrekken dan pagina's die alles gewoon omringen met

   labels.

  Welke HTML-tags zijn semantisch?

  Hoewel bijna elke HTML4-tag en alle HTML5 tags hebben semantische betekenissen, sommige tags zijn in de eerste plaats semantisch.

  HTML5 heeft bijvoorbeeld de betekenis van de. opnieuw gedefinieerd  en  tags om semantisch te zijn. De  tag brengt geen extra belang over; in plaats daarvan wordt de getagde tekst meestal vet weergegeven. Evenzo, de  tag brengt geen extra belang of nadruk over; het definieert eerder tekst die doorgaans cursief wordt weergegeven.

  Semantische HTML-tags

  Afkorting
  Acroniem
  Lange offerte
  Definitie
  Adres voor auteur(s) van het document
  Citaat
  Codereferentie
  Teletype tekst
  Logische indeling
  Generieke inline-stijlcontainer
  verwijderde tekst
  Ingevoegde tekst
  Nadruk
  sterke nadruk
  Kop op het eerste niveau
  Kop op het tweede niveau
  Kop op het derde niveau
  Kop op het vierde niveau
  Kop op het vijfde niveau
  Kop op het zesde niveau
  	Thematische pauze
  Door de gebruiker in te voeren tekst
  Vooraf opgemaakte tekst
  Korte inline offerte
  Voorbeelduitvoer
  abonnement
  Superscript
  Variabele of door de gebruiker gedefinieerde tekst