Wat betekent semantische HTML?
Semantische HTML betekent dat je elementen gebruikt waarvoor ze bedoeld zijn. Een kop is een kop, een lijst is een lijst, een knop is een knop.
Het tegenovergestelde: je bouwt alles op uit neutrale blokken en geeft die met opmaak het juiste uiterlijk.
Dat ziet er hetzelfde uit en werkt slechter.
Waarom het uitmaakt
Omdat software die je pagina leest, op die betekenis vaart. Voorleessoftware kan door koppen springen, maar alleen als het echte koppen zijn.
Zoekmachines gebruiken dezelfde signalen. Meer daarover lees je bij accessibility.
Het klassieke voorbeeld
Een knop die eigenlijk een neutraal blok is met een klikfunctie eraan. Die ziet eruit als een knop, maar je bereikt hem niet met een toetsenbord.
Een echte knop is dat wel, zonder dat je er iets voor doet.
Wat je ermee wint
Toegankelijkheid, vindbaarheid en onderhoudbaarheid. En vaak minder code, omdat de browser al gedrag meelevert.
Meer daarover lees je bij dom.
Mijn vuistregels
- Een knop is een knop, een link is een link.
- Koppen alleen voor structuur.
- Lijsten als lijsten opmaken.
- Gebruik neutrale blokken alleen als er geen passend element is.
Die eerste is het verschil tussen een site die met een toetsenbord te bedienen is en een die dat niet is.
Link of knop?
Ga je ergens naartoe, dan is het een link. Doet er iets op deze pagina, dan is het een knop.
Dat onderscheid wordt vaak genegeerd en levert verwarring op bij voorleessoftware.
Bij een paginabouwer
Die maakt vaak meer neutrale blokken dan nodig. Je kunt er meestal per element aangeven welke soort het moet worden.
Meer daarover lees je bij waarom een goede koppenstructuur belangrijk is.