Veel mensen denken dat HTML gaat over hoe een website eruitziet. Dat klopt niet. HTML gaat over wat iets is. Dit is een kop, dit is een alinea, dit is een knop. Hoe die kop er vervolgens uitziet, wordt ergens anders bepaald.
Dat onderscheid klinkt theoretisch, maar het raakt drie dingen die er echt toe doen. Je vindbaarheid, je toegankelijkheid en of je site over vijf jaar nog te onderhouden is.
Bij Empowerment Diensten merkte ik hoeveel dat scheelt. Ik verzorgde daar het webdesign en de vindbaarheid. Op de site staan lange teksten over trajecten en werkwijzen.
Ik heb die pagina’s opgebouwd met een strakke koppenstructuur. Een H1 met het onderwerp, daaronder H2’s per hoofdstuk en H3’s voor de details. Daardoor is de pagina te scannen voor een lezer, voor een zoekmachine en voor hulpsoftware. Dezelfde structuur bedient alle drie.
HTML bepaalt wat iets is, niet hoe het eruitziet.
Wat is HTML?
HTML staat voor HyperText Markup Language. Het is de taal waarmee je de structuur van je pagina vastlegt.
Je werkt met tags: stukjes code tussen punthaken die om je inhoud heen staan. Een openingstag, je tekst, een sluitingstag. Zo weet de browser wat hij voor zich heeft.
Het verschil met CSS
HTML zegt wat iets is, CSS zegt hoe het eruitziet. In HTML schrijf je dat iets een kop van niveau twee is. In CSS schrijf je dat koppen van niveau twee donkerblauw en veertig pixels zijn.
Die scheiding maakt je site onderhoudbaar. Je verandert de opmaak op een plek en je hele site schuift mee.
Semantiek
semantiek betekent dat je de juiste tag gebruikt voor wat iets werkelijk is. Een knop is een button, geen div waar je een klik op plakt.
Dat is meer dan netheid. Een button werkt automatisch met het toetsenbord, krijgt focus en wordt door hulpsoftware als knop aangekondigd. Een div doet niets van dat alles.
De tags die het meeste verschil maken
header, nav, main en footer voor de indeling van je pagina.
h1 tot en met h6 voor je koppen, in de juiste volgorde.
button voor knoppen en a voor links naar een andere pagina.
label bij elk formulierveld.
ul en ol voor lijsten, in plaats van losse regels met streepjes.
Doe je dit goed, dan is je site vanzelf toegankelijker. Meer daarover lees je bij accessibility.
Waarom je koppenstructuur telt
Een zoekmachine leest je koppen om te begrijpen waar je pagina over gaat. Een screenreader gebruikt ze om door je pagina te springen.
Gebruik dus een H1 per pagina, met daaronder een logische volgorde. Sla geen niveaus over en kies een kop niet omdat de opmaak toevallig mooi is. Meer daarover lees je bij SEO.
Zelf naar de code kijken
Bij het broncode bekijken klik je met de rechtermuisknop en kies je paginabron bekijken. Dan zie je de HTML zoals hij door de server is verstuurd.
Kies je inspecteren, dan zie je iets anders. Dat is de actuele situatie, inclusief alles wat scripts hebben aangepast. Meer over dat verschil lees je bij DOM.
Moet je het kunnen?
Om je site te beheren niet. Teksten en afbeeldingen wijzig je gewoon zonder code.
Wat wel helpt, is het betekenis vastleggen begrijpen. Weet je dat een kop iets betekent en niet alleen groot is? Dan maak je andere keuzes in je editor. Dat scheelt je bouwer werk en je site wordt er beter van. Meer over de voorkant lees je bij frontend.
De meest gemaakte fout
Een kop kiezen op basis van de opmaak. Deze tekst moet groot, dus maak ik er een H2 van. Dat is de omgekeerde volgorde.
Kies je kop op basis van de structuur van je verhaal. Past de opmaak je niet, dan pas je die aan in je stijlbestand.
Een test die je zelf kunt doen
Haal de opmaak van je pagina weg en lees hem van boven naar beneden. Klopt de volgorde nog en snap je het verhaal?
Zo ja, dan zit je structuur goed. Zo nee, dan zie je precies wat een zoekmachine en een screenreader ook zien.
Meer vragen over HTML
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is HTML?
Wat is het verschil tussen HTML en CSS?
Wat betekent semantische HTML?
Moet je HTML kunnen om een website te beheren?
Hoe bekijk je de HTML van een pagina?
Waarom is een goede koppenstructuur belangrijk?
Wat is HTML?
HTML zegt wat iets is, CSS zegt hoe het eruitziet. Dat is het hele verschil en het is fundamenteel.
In HTML schrijf je dat iets een kop van niveau twee is. In CSS schrijf je dat koppen van niveau twee donkerblauw zijn en veertig pixels groot.
Die scheiding maakt je site onderhoudbaar. Je verandert de opmaak op een plek en je hele website schuift mee. Zonder die scheiding zou je elke pagina apart moeten aanpassen.
Er is een tweede voordeel dat vaak wordt vergeten. Hulpsoftware zoals een screenreader leest de HTML, niet de opmaak. Een correcte structuur maakt je site dus ook toegankelijker.
Doe eens een test. Haal de opmaak weg en lees je pagina van boven naar beneden. Klopt de volgorde nog en snap je het verhaal? Dan zit je structuur goed.
Doe die test met je opmaak uit een keer op je belangrijkste pagina. Je ziet dan precies wat een zoekmachine leest.
Wat is het verschil tussen HTML en CSS?
HTML staat voor HyperText Markup Language. Het is de taal waarmee je de structuur van een webpagina vastlegt.
Veel mensen denken dat het gaat over hoe een website eruitziet. Dat klopt niet. HTML gaat over wat iets is: dit is een kop, dit is een alinea, dit is een knop.
Je werkt met tags, kleine stukjes code tussen punthaken die om je inhoud heen staan. Een openingstag, je tekst, een sluitingstag. Zo weet de browser wat hij voor zich heeft.
Hoe die kop er vervolgens uitziet, wordt ergens anders bepaald. Dat onderscheid klinkt theoretisch, maar het raakt drie dingen die er echt toe doen.
Je vindbaarheid, je toegankelijkheid en of je site over vijf jaar nog te onderhouden is. Alle drie hangen ze aan de vraag of je de juiste tag hebt gebruikt.
Je hoeft dit niet te kunnen schrijven om er profijt van te hebben. Het helpt al als je weet dat er een structuur onder je pagina zit.
Wat betekent semantische HTML?
Semantiek betekent dat je de juiste tag gebruikt voor wat iets werkelijk is. Een knop is een button, geen div waar je een klik op plakt.
Dat is meer dan netheid. Een button werkt automatisch met het toetsenbord, krijgt focus en wordt door hulpsoftware als knop aangekondigd. Een div doet niets van dat alles.
De tags die het meeste verschil maken zijn header, nav, main en footer voor de indeling. Daarnaast h1 tot en met h6 voor je koppen, in de juiste volgorde.
Verder button voor knoppen en a voor links, label bij elk formulierveld, en ul of ol voor lijsten in plaats van losse regels met streepjes.
Gebruik je die goed, dan is je site vanzelf toegankelijker zonder dat je er iets extra’s voor doet. Meer daarover lees je bij accessibility.
Vraag je bouwer of hij semantische elementen gebruikt. Het antwoord zegt veel over de kwaliteit van wat je krijgt.
Waarom is een goede koppenstructuur belangrijk?
Omdat drie partijen je koppen gebruiken om je pagina te begrijpen.
Een zoekmachine leest ze om te bepalen waar je pagina over gaat. Een screenreader gebruikt ze om door je pagina te springen zonder alles voor te lezen. En je lezer scant ze om te zien of er staat wat hij zoekt.
Gebruik daarom een H1 per pagina, met daaronder een logische volgorde. Sla geen niveaus over, dus ga niet van H2 naar H4.
De meest gemaakte fout is een kop kiezen op basis van de opmaak. Deze tekst moet groot, dus maak ik er een H2 van. Dat is de omgekeerde volgorde.
Kies je kop op basis van de structuur en pas daarna de opmaak aan. Meer over het effect op je vindbaarheid lees je bij SEO.
Controleer je koppen na elke grote tekstwijziging. Juist bij het bijwerken sluipen er dubbele of overgeslagen niveaus in. Loop ze na met de structuurweergave van je editor, dat gaat sneller dan lezen.
Moet je HTML kunnen om een website te beheren?
Om je site te beheren niet. Teksten en afbeeldingen wijzig je gewoon in je beheeromgeving, zonder een regel code.
Wat wel helpt, is het principe begrijpen. Weet je dat een kop iets betekent en niet alleen groot is, dan maak je andere keuzes in je editor.
Je gaat dan geen alinea vetgedrukt maken om hem als kop te laten werken. En je gaat geen H1 gebruiken halverwege je pagina omdat de lettergrootte je bevalt.
Dat scheelt je bouwer werk en je site wordt er meetbaar beter van, zonder dat je iets technisch hoeft te leren.
Wil je toch eens kijken, klik dan met de rechtermuisknop op een pagina en kies paginabron bekijken. Je hoeft er niets van te snappen om te zien dat er structuur onder zit. Meer over de voorkant lees je bij frontend.
Gebruik in je editor de koppenkeuze en niet de knop voor vet en groot. Dat is het enige wat je hoeft te onthouden.
Twijfel je of jouw pagina’s een logische structuur hebben? Stuur me een pagina via het formulier hieronder. Ik loop je koppenstructuur na en kijk of de juiste elementen gebruikt zijn. Dat raakt je vindbaarheid en je toegankelijkheid tegelijk. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: HyperText Markup Language, opmaaktaal, broncode
