Webpagina's zijn geschreven in HTML-taal. Deze taal is samengesteld uit elementen, dat wil zeggen kleine stukjes code, die delen van de pagina aangeven. Het is essentieel om de exacte html-naam te gebruiken om jouw tekst te definiëren. Voorbeelden: een titel, een koptekst, een tabel, een lijst zal een andere en precieze naam hebben.
Door de exacte termen te gebruiken, verhoog je de toegankelijkheid van je site voor ondersteunende technologieën, evenals de zichtbaarheid ervan in zoekmachines, omdat de betekenis van de verschillende elementen van de pagina in de HTML-code zelf wordt opgeslagen.
Hoe pas je dit toe?
Als er een HTML-element is met de betekenis die je wilt overbrengen, moet je dat specifieke element gebruiken. Dit wordt semantische opmaak genoemd. Sommige HTML-elementen zijn bedoeld om de structuur van een pagina aan te geven (secties, navigatiemenu's, paragrafen...). Daarnaast zijn er nog andere die gebruikt worden om delen van de tekst betekenis te geven. Bijvoorbeeld om een woord of een groep woorden te benadrukken.
Een goede editor heeft knoppen waarmee een editor bijvoorbeeld de juiste HTML-elementen voor een tabel of gemarkeerde (vetgedrukte) tekst kan invoegen.
Voorbeelden
Voorbeelden van semantische elementen:
- <form>: formulier
- <table>: tabel
- <img>: afbeelding
- <header> en >footer>: bovenaan en onderaan een webpagina
- <em> en <strong>: nadruk leggen
- <blockquote>: citaat
- <ul> en <ol>: bulletlijst en genummerde lijst
- De volgende elementen zijn niet semantisch. Ze zeggen niets over hun inhoud. Het verdient de voorkeur om ze alleen te gebruiken als er geen semantisch element kan worden gebruikt.
- <div>
- <span>
- De keuze van de te gebruiken elementen is afhankelijk van de HTML-versie op de website.
Voorbeeld: een artikel met een titel
Helemaal bovenaan een artikel staat de titel. Dit wordt in een groter formaat en vetgedrukt weergegeven. Het kan ook in een andere kleur zijn dan de rest van de tekst.
- Goede methode: de titel wordt opgeslagen in een kopelement (<h1>, <h2>, enz.).
- Slechte methode: de titel wordt opgeslagen in een paragraafelement met een klasse-attribuut (<p klasse: "title">).
Voor redacteurs
De redacteur moet zorgen dat hij de functies van de editor gebruikt om bijvoorbeeld koppen, paragrafen, lijsten en tabellen in te voegen, zodat de juiste HTML-elementen worden toegepast.
Voor ontwikkelaars
De bouwer moet ervoor zorgen dat de editor in het CMS de mogelijkheid biedt om verschillende semantische elementen te gebruiken.