HTML: semantiek
Tags
De HTML taal bestaat uit tags. Deze tags geven een specifieke betekenis aan de inhoud die je ertussen plaatst. Ze vormen de fundamentele bouwstenen van elke webpagina en vertellen browsers hoe ze de inhoud moeten interpreteren, structureren en weergeven.
HTML-tags zijn speciale codes die aangeven wat voor soort content tussen de tags staat. Ze worden gemarkeerd door haken (< en >). De meeste HTML-tags komen voor in paren:
- een openings tag (bvb:
<p>) markeert het begin van een element - een sluitings tag (bvb:
</p>) markeert het einde van een element. Een sluitingstag herken je makkelijk door de/na het eerste haakje.
Dit soort tags noemen we tweeledige tags (container tags of paired tags). Tussen de openings en de sluitings tag zet je jouw inhoud. De inhoud tussen deze tags wordt beïnvloed door de betekenis van de tag:
<h1>Dit is een hoofdtitel</h1>
<p>Dit is een paragraaf met tekst.</p>Een tag kan ook zelfsluitend zijn of enkelvoudig (self-closing tags). De <img> tag (voor afbeeldingen) is hier een voorbeeld van. Deze heeft dus geen sluitings tag maar gebruikt een attribuut om te verwijzen naar het bronbestand van de foto:
<img src="foto.jpg">Voorbeelden van semantische tags:
<header>: Identificeert het bovenste deel van een pagina of sectie<nav>: Bevat navigatie-elementen<article>: Bevat een op zichzelf staand stuk inhoud<section>: Groepeert gerelateerde inhoud<footer>: Identificeert het onderste deel van een pagina of sectie
Structurele tags
Bepalen de algemene structuur van de pagina:
<html>: Omvat het hele HTML-document<head>: Bevat meta-informatie over het document<body>: Bevat alle zichtbare inhoud<div>: Een generiek blok-element voor het groeperen van inhoud
Inhoudsgerichte tags
Geven specifieke betekenis aan de inhoud zelf:`
<h1>t/m<h6>: Verschillende niveaus van koppen<p>: Paragrafen met tekst<ul>,<ol>,<li>: Lijsten (ongeordend, geordend en lijst-items)<a>: Hyperlinks naar andere pagina's of bronnen<img>: Afbeeldingen
Semantische betekenis van tags
HTML-tags geven niet alleen aan hoe iets eruit moet zien, maar ook wat de semantische betekenis is van de inhoud. Dit is cruciaal voor:
- Toegankelijkheid: Schermlezers gebruiken tags om de inhoud correct voor te lezen aan mensen met visuele beperkingen
- SEO: Zoekmachines gebruiken tags om de structuur en relevantie van je inhoud te begrijpen
- Compatibiliteit: Verschillende apparaten en browsers kunnen de inhoud consistent weergeven
- Computer leesbaar: Haakjes voor andere tools om hier op verder te bouwen (Browsers, zoekmachines, schermlezers, data analyse, chatbots...)
Door HTML-tags te begrijpen en correct toe te passen, leg je een solide basis voor webontwikkeling en zorg je ervoor dat je websites toegankelijk zijn voor zowel gebruikers als zoekmachines.