Wat is HTML?

HTML is de taal waarin webpagina's worden geschreven. Hypertext Markup Language voluit. Het is geen programmeertaal maar een opmaaktaal: je markeert wat iets is, niet wat er moet gebeuren.

Elke pagina die je opent bestaat eruit, ook deze. Klik met de rechtermuisknop en kies broncode bekijken, dan zie je de tekst die je nu leest terug tussen de markeringen. Tim Berners-Lee beschreef de taal in 1991 bij het CERN, en de basisgedachte is sindsdien niet veranderd.

Hoe een pagina is opgebouwd

Bovenaan staat het doctype, één regel die de browser vertelt dat dit HTML is. Laat je hem weg, dan schakelt de browser over op een noodstand waarin hij zich gedraagt als een browser uit 1998. Je opmaak klopt dan op onverklaarbare punten niet.

Daarna komt het head-gedeelte. Dat zie je niet op de pagina en het bevat het meeste van wat voor je vindbaarheid telt: de paginatitel, de omschrijving, de verwijzing naar je stijlbestand en eventuele gestructureerde gegevens.

In de head staat ook de tekencodering, en die moet binnen de eerste kilobyte van het bestand staan. Ontbreekt hij, dan zie je op je site tekens als é waar een e met een accent hoort. Dat is de meest voorkomende oorzaak van rare tekens in Nederlandse teksten.

De taal van de pagina zet je op het html-element zelf. Een schermlezer bepaalt daarmee zijn uitspraak. Staat er Engels terwijl je Nederlands schrijft, dan wordt je tekst met een Engels accent voorgelezen en verstaat niemand er iets van.

Daaronder komt de body: alles wat de bezoeker ziet.

Tags, elementen en attributen

Je zet tekst tussen tags die aangeven wat het is. Een alinea tussen p, een kop tussen h2, een link tussen a. De browser leest die markering en weet wat hij moet tonen.

De meeste tags komen in paren: een openingstag en een sluitingstag met een schuine streep. Een tag met alles wat ertussen staat heet samen een element. Sommige elementen hebben geen inhoud en dus geen sluitingstag, zoals img voor een afbeelding en br voor een regelafbreking.

Attributen zijn extra informatie in de openingstag. Er zijn er een paar die overal mogen staan.

• class. Een of meer namen waarmee je opmaak en scripts een groep elementen kunnen aanspreken. Mag zo vaak voorkomen als je wilt.
• id. Een unieke naam voor één element op de pagina. Twee keer dezelfde id is een echte fout: ankerlinks springen dan naar het verkeerde punt en formulierlabels raken los van hun veld.
• style. Opmaak rechtstreeks op het element. Werkt, en het is de moeilijkst te overschrijven plek om iets neer te zetten.
• title. De tekst die verschijnt als je met de muis blijft hangen. Op een telefoon zie je hem nooit, dus zet er niets in dat mensen moeten weten.

Daarnaast hoort bij vrijwel elk element een eigen set: href bij een link, src en alt bij een afbeelding, type bij een invoerveld. Die bepalen wat het element concreet doet.

De koppenstructuur is het skelet

Koppen lopen van h1 tot h6 en vormen een inhoudsopgave. Eén h1 per pagina met het onderwerp, daaronder h2's die de tekst opdelen, en h3's binnen zo'n deel.

Sla geen niveau over. Van een h2 naar een h4 springen is hetzelfde als een hoofdstuk zonder paragraafnummer: technisch werkt het, alleen klopt de inhoudsopgave niet meer.

Dat is geen theorie. Mensen die een schermlezer gebruiken springen van kop naar kop om te zien wat er op een pagina staat, en dat is voor veel van hen de eerste manier om een pagina te verkennen. Klopt je koppenstructuur niet, dan verkennen ze een pagina die anders in elkaar zit dan hij eruitziet.

Hier gaat het in een paginabouwer bijna altijd mis. Het niveau van een kop zit daar in hetzelfde uitklapmenu als de grootte, dus kiest iemand h4 omdat het formaat goed staat. Kies het niveau op de plek in je verhaal en regel de grootte met je opmaak.

Links

Een link maak je met de a-tag en het href-attribuut, waarin het adres staat waar hij naartoe gaat. Meer is er niet nodig.

Met target open je de link in een nieuw tabblad. Doe dat spaarzaam, want je neemt daarmee een beslissing over die van de bezoeker is. Vroeger moest je bij een nieuw tabblad een beveiligingsattribuut meesturen; sinds enkele jaren doen browsers dat vanzelf.

Met een id op een kop en een adres met een hekje ervoor spring je naar een plek op dezelfde pagina. Handig bij lange teksten en bij een inhoudsopgave bovenaan.

De belangrijkste keuze is je linktekst. Schermlezers kunnen alle links op een pagina in één lijst opvragen, los van de tekst eromheen. Een lijst met twaalf keer "lees meer" is dan waardeloos. Schrijf waar je heen gaat, zoals in het artikel over wat een hyperlink is verder wordt uitgewerkt.

Lijsten en tabellen

Er zijn twee soorten lijsten. Genummerd als de volgorde ertoe doet, bijvoorbeeld bij stappen, en ongeordend als dat niet zo is. Een lijst mag in een lijstitem genest worden, waarmee je een boodschappenlijst met kopjes maakt.

Gebruik een echte lijst en geen alinea's met streepjes ervoor. Een schermlezer kondigt bij een echte lijst aan hoeveel items er zijn, en dat is precies de informatie die iemand nodig heeft.

Tabellen zijn voor gegevens: prijzen, openingstijden, vergelijkingen. Zet je kopcellen in th en geef er de richting bij op, zodat duidelijk is of ze bij de kolom of bij de rij horen. Een caption erboven vertelt waar de tabel over gaat.

De oude attributen voor randdikte, breedte en celruimte bestaan niet meer. Die horen in je opmaak thuis. Kom je een handleiding tegen die ze noemt, of die tabellen gebruikt om een pagina in te delen, dan lees je iets uit de vorige eeuw. Op een telefoon valt zo'n indeling uit elkaar.

Afbeeldingen

Een afbeelding heeft een src met het bestand en een alt met een beschrijving. Die alt-tekst is geen bijzaak: als de afbeelding niet laadt staat hij er, en een schermlezer leest hem voor.

Is een afbeelding puur versiering, geef dan een lege alt mee. Dat is iets anders dan hem weglaten. Bij een lege alt slaat een schermlezer de afbeelding over; bij een ontbrekende alt gaat hij de bestandsnaam voorlezen, en dan hoort iemand "img underscore 4471 punt jpeg".

Zet er altijd breedte en hoogte bij. De browser reserveert daarmee de ruimte voordat het bestand binnen is, zodat je tekst niet verspringt op het moment dat de afbeelding verschijnt. Dat verspringen is een van de meest gehate dingen op mobiel en het kost je punten in de snelheidsmeting van Google.

Met srcset lever je meerdere afmetingen aan en kiest de browser de passende voor het scherm. Met het picture-element lever je meerdere formaten aan, wat je gebruikt om webp-afbeeldingen te serveren met een terugvaloptie voor oude software.

Audio en video

Video en audio zitten sinds HTML5 in de taal zelf. Je verwijst naar het bestand en zet er controls bij voor de afspeelknoppen. Met preload bepaal je of de browser alvast begint met laden.

Automatisch afspelen met geluid werkt niet meer. Browsers blokkeren dat sinds 2018, omdat het misbruikt werd. Wil je een video op de achtergrond laten lopen, dan moet hij gedempt zijn en meestal ook aangeven dat hij niet schermvullend hoeft.

Ondertiteling voeg je toe met een track-element dat naar een apart tekstbestand verwijst. Dat is voor doven en slechthorenden de enige manier om je video te volgen, en verder voor iedereen die in de trein zit zonder oordopjes.

Video op je eigen server is voor een gewone bedrijfssite meestal een slecht idee. Eén bestand van honderd megabyte legt je hosting plat zodra vijf mensen tegelijk kijken. Insluiten via een videodienst is praktischer, al haal je daarmee cookies van derden binnen waar je in je cookiemelding iets over moet zeggen.

Semantische elementen

Sinds HTML5 zijn er elementen die zeggen wat een blok is: header, nav, main, article, section, aside en footer. Daarnaast figure met figcaption voor een afbeelding met een bijschrift, en time voor een datum die een machine moet kunnen lezen.

Technisch kun je alles met divs bouwen en het scherm ziet er dan hetzelfde uit. Het verschil zit in wat een machine ervan begrijpt.

Een schermlezer maakt van deze elementen oriëntatiepunten. De gebruiker kan direct naar de hoofdinhoud springen, of een lijst opvragen van alle gebieden op de pagina. Zonder die elementen moet hij elke keer opnieuw langs je hele menu.

Twee regels om te onthouden. Er is één main per pagina, met daarin alles wat uniek is voor die pagina. En een section zonder eigen kop voegt niets toe; dan had je net zo goed een div kunnen nemen. Dit kost je verder niets en het is daarmee de goedkoopste verbetering die er in webontwikkeling bestaat.

Waarom de juiste keuze uitmaakt

Dit is het punt dat het vaakst wordt onderschat.

Een knop die je van een div maakt met een klik erop werkt met de muis en niet met een toetsenbord. Hij krijgt geen focus, reageert niet op de spatiebalk of de entertoets, en wordt door een schermlezer niet als knop aangekondigd. Iemand die geen muis kan gebruiken komt er domweg niet doorheen.

Gebruik je een echte button, dan werkt dat allemaal vanzelf. Dat is de kern: de juiste elementen doen gratis wat je anders zelf moet nabouwen, en meestal slechter.

Hetzelfde geldt voor het verschil tussen een link en een knop. Een link gaat ergens naartoe, een knop doet iets. Maak je van een link een knop die iets doet, dan verlies je de mogelijkheid om hem in een nieuw tabblad te openen en klopt de aankondiging niet meer.

Er bestaat een set attributen waarmee je rollen en toestanden alsnog kunt beschrijven, bedoeld voor gevallen waarin HTML geen passend element heeft. De regel eromheen is streng en terecht: ze weglaten is beter dan ze verkeerd gebruiken. Een verkeerd toegekende rol maakt een element onbruikbaar in plaats van beter.

Toegankelijkheid is deels wettelijk geregeld

In Nederland gelden er sinds 1 juli 2018 verplichtingen voor overheidswebsites. Die moeten voldoen aan de Europese norm voor digitale toegankelijkheid, die verwijst naar de richtlijnen van het WCAG op niveau AA, en ze moeten een toegankelijkheidsverklaring publiceren.

Sinds 28 juni 2025 raakt het ook bedrijven. Vanaf die datum geldt de Europese toegankelijkheidsrichtlijn voor onder meer webshops, bankdiensten, e-boeken, telecom en vervoersapps. De ACM houdt daar in Nederland toezicht op.

Er is één uitzondering, en die geeft voor veel kleine bedrijven de doorslag. Micro-ondernemingen die diensten aanbieden zijn vrijgesteld: minder dan tien werknemers en een jaaromzet onder twee miljoen euro. Verkoop je online en zit je daarboven, dan valt je webshop er wel onder.

Ook als je bent vrijgesteld betaalt dit werk zich terug. De richtlijnen vragen vrijwel niets anders dan wat hierboven al staat, aangevuld met voldoende kleurcontrast. Er komt geen aparte toegankelijke versie van je site aan te pas.

Wat WordPress van je HTML maakt

WordPress bewaart je tekst in een database en zet er HTML omheen op het moment dat iemand de pagina opvraagt. Je thema levert de sjablonen die bepalen welke elementen daar precies uit komen.

Sinds WordPress 5.0 uit december 2018 werk je in de blokbewerker. Die slaat je inhoud op als gewone HTML met daarnaast onzichtbare markeringen in commentaarvorm, zodat WordPress weet welk blok het was. Open je zo'n bericht in de codeweergave, dan zie je die markeringen staan.

Dat werkt tot je iets in de codeweergave plakt dat WordPress niet verwacht. Wissel je daarna terug naar de visuele weergave, dan kan de bewerker je opmaak opruimen. Voor eigen HTML gebruik je daarom het blok voor aangepaste HTML.

Er zit ook een filter in dat bepaalt welke tags een gebruiker mag opslaan. Redacteuren en auteurs mogen minder dan beheerders. Verdwijnt er bij een collega steeds een stuk code dat bij jou blijft staan, dan is dat de reden.

Sinds versie 5.9 uit januari 2022 bestaan er thema's waarin ook je kop, je voettekst en je sjablonen uit blokken bestaan. De HTML blijft vergelijkbaar; je bewerkt hem op een andere plek.

Wat een paginabouwer ervan maakt

Een paginabouwer zet je opmaak om in rijen, kolommen en modules, en die worden als geneste divs uitgeleverd. Waar jij met de hand drie elementen zou schrijven, staan er al gauw acht. Dat is de prijs van slepen in plaats van typen.

Belangrijker dan dat gewicht is wat er gebeurt als je de bouwer uitzet. Divi bewaart zijn opmaak als shortcodes in je berichttekst, dus bij uitzetten staan die codes letterlijk op je pagina. Beaver Builder en Elementor bewaren hun opmaak apart, waardoor je een kale of lege pagina overhoudt. Platform Pro werkt zelf met Beaver Builder, mede daarom.

Wat je zelf in de hand houdt is de semantiek. De betere bouwers laten je per module kiezen welke tag eruit komt, zodat je van een blok een section of een nav kunt maken in plaats van weer een div. Die instelling staat meestal weggestopt onder geavanceerd, en vrijwel niemand gebruikt hem.

Controleer daarom het resultaat, niet de bewerker. Bekijk de broncode van een afgeronde pagina en kijk of er één h1 staat, of je koppen op volgorde lopen en of je velden labels hebben. Dat is tien minuten werk per sjabloon.

HTML naast CSS en JavaScript

HTML is de structuur, CSS de vormgeving en JavaScript het gedrag. Die drie samen vormen alles wat een bezoeker in zijn browser ziet, en samen heten ze de voorkant van een website.

De volgorde is niet toevallig. Een pagina met alleen HTML is lelijk en leesbaar. Een pagina zonder HTML bestaat niet.

Begin er dus mee voordat je aan de andere twee begint. Het is de kleinste van de drie en de basis onder allebei. Hoe die kanten samenwerken staat in het artikel over front-end ontwikkeling.

Wat er veranderd is en wat je in oude handleidingen moet negeren

HTML 4.01 stamt uit 1999. Daarna probeerde men de taal strenger te maken met XHTML, wat in de praktijk sneuvelde omdat één fout de hele pagina liet mislukken.

HTML5 werd in oktober 2014 officieel vastgesteld en bracht de semantische elementen, video, audio en de moderne formuliervelden. Sinds 2019 is er geen versienummer meer: er is één levende standaard die doorlopend wordt bijgewerkt.

Verdwenen zijn elementen die over vormgeving gingen: font voor lettertypen, center voor uitlijnen, marquee voor lopende tekst. Alles wat met uiterlijk te maken heeft hoort in je opmaak.

Erbij gekomen zijn onderdelen die je vroeger met een script moest bouwen. Een uitklapbaar blok maak je nu met details en summary, wat voor een lijst met veelgestelde vragen precies genoeg is. Een venster dat over de pagina heen komt maak je met dialog, dat sinds 2022 in alle browsers werkt.

Kom je een tutorial tegen die tabellen gebruikt voor de indeling of die over het font-element gaat, dan is die ouder dan je website mag zijn. MDN Web Docs van Mozilla is het naslagwerk dat ik zelf gebruik, het is gratis en het wordt bijgehouden.

Hoe je controleert of je HTML klopt

De validator van het W3C leest je pagina en meldt wat er niet klopt. Browsers repareren fouten stilzwijgend, maar ze doen dat niet allemaal hetzelfde, en een niet gesloten tag in een tabel kan je halve pagina verschuiven.

Weet daarbij dat er twee versies van je HTML bestaan. Broncode bekijken toont wat de server heeft gestuurd. De inspecteur in je ontwikkelaarshulpmiddelen toont wat er na alle scripts van gemaakt is. Zoekmachines kijken naar allebei, en bij problemen wil je weten in welke van de twee de fout zit.

De snelste toegankelijkheidstest kost je een minuut. Leg je muis weg en loop met de tabtoets door je pagina. Kun je overal komen, zie je steeds waar je bent, en kun je elk formulier invullen en versturen? Zo niet, dan weet je meteen waar het misgaat.

Loop daarna je formulieren na, want daar zitten de meeste fouten. Elk veld hoort een gekoppeld label te hebben. Een grijze tekst in het veld telt niet: die verdwijnt zodra iemand begint te typen. Waar je verder op let staat in het artikel over een goed contactformulier.

Veelgestelde vragen over HTML

Is HTML een programmeertaal?

Nee. HTML is een opmaaktaal. Je beschrijft ermee wat iets is, bijvoorbeeld een kop of een lijst, en niet wat er moet gebeuren. Er zitten geen voorwaarden, herhalingen of berekeningen in. Dat maakt het makkelijker te leren dan een programmeertaal.

Waar staat HTML voor?

Voor Hypertext Markup Language. Hypertext slaat op tekst met links erin, wat in 1991 de vernieuwing was. Markup Language betekent opmaaktaal: tekst met markeringen erin die zeggen wat elk stuk is.

Hoe bekijk ik de HTML van een website?

Klik met de rechtermuisknop op een pagina en kies broncode bekijken. Je krijgt dan het bestand zoals de server het heeft verstuurd. Kies je inspecteren, dan zie je de pagina zoals hij nu in de browser staat.

Hoeveel h1-koppen mag een pagina hebben?

Eén, met het onderwerp van die pagina erin. Meer mag technisch en het maakt je koppenstructuur onduidelijk.

Let hierbij op je thema. Sommige thema's zetten je logo of je sitenaam al in een h1, en als je daarnaast in je paginabouwer een titel als h1 opmaakt, heb je er twee zonder dat je het doorhebt.

Wat is het verschil tussen HTML en HTML5?

HTML5 is de versie uit 2014 die semantische elementen, video, audio en betere formuliervelden toevoegde. Sinds 2019 wordt er geen versienummer meer gebruikt en is er één doorlopend bijgewerkte standaard.

Wie het nu nog over HTML5 heeft, bedoelt meestal de manier van werken van na 2014.

Wat is het verschil tussen HTML en CSS?

HTML bepaalt wat iets is, CSS bepaalt hoe het eruitziet. In HTML zeg je dat een regel een kop is; in CSS zeg je dat koppen groot en blauw zijn. Wie ze door elkaar haalt, herken je aan opmaak die in de tekst zelf staat in plaats van in een stijlbestand.

Moet ik HTML leren als ik WordPress gebruik?

Niet om een site te maken. Wel om te begrijpen wat er misgaat als iets er anders uitziet dan bedoeld, en om te beoordelen of uitbesteed werk deugt.

Voor een ondernemer is een middag genoeg. Kun je koppen, links en afbeeldingen lezen in de broncode, dan kun je je eigen site controleren. Dat is bij een verbouwing de meest bruikbare vaardigheid die er is.

Wat zijn semantische HTML-elementen?

Elementen die zeggen wat een blok betekent in plaats van hoe het eruitziet: header, nav, main, article, section, aside en footer. Op het scherm verandert er niets; het verschil zit in wat een schermlezer en een zoekmachine ervan kunnen aflezen.

Waarom heeft een afbeelding een alt-tekst nodig?

Omdat niet iedereen de afbeelding ziet. Een schermlezer leest de alt-tekst voor, en als het bestand niet laadt verschijnt hij in beeld. Beschrijf dus wat er te zien is en waarom het er staat.

Hoe lang duurt het om HTML te leren?

De basis leer je in een weekend: tags, attributen, koppen, links, afbeeldingen, lijsten en formulieren. Daarmee kun je een eenvoudige pagina van begin tot eind schrijven.

Wat langer duurt is het goed doen. Wanneer welk element de juiste keuze is, leer je pas door het te doen en door je eigen werk na te lopen.

Verandert een paginabouwer mijn HTML?

Ja. Een paginabouwer voegt lagen van divs toe om rijen en kolommen te maken, met eigen klassenamen. Je tekst blijft je tekst, alleen zit er meer omheen dan wanneer je het met de hand zou schrijven.

Wat je zelf bepaalt is het niveau van je koppen en, bij de betere bouwers, welke tag een blok krijgt. Controleer dat na afloop in de broncode, want in de bewerker zie je het niet.

Telt HTML mee voor zoekmachines?

Ja, en vooral op drie punten: de paginatitel, de koppenstructuur en de tekst in je links. Daar leiden zoekmachines uit af waar een pagina over gaat.

Wat niet meetelt is of je code er netjes uitziet. Een pagina met veel divs scoort niet slechter, zolang de inhoud en de structuur kloppen.

Moet mijn website voldoen aan toegankelijkheidseisen?

Overheidsorganisaties moeten dat in Nederland sinds 1 juli 2018. Sinds 28 juni 2025 geldt de Europese toegankelijkheidsrichtlijn ook voor onder meer webshops, bankdiensten en vervoersapps, met de ACM als toezichthouder.

Micro-ondernemingen die diensten aanbieden vallen erbuiten: minder dan tien werknemers en een omzet onder twee miljoen euro.

Wat is het verschil tussen een tag en een element?

Een tag is de markering zelf, dus het stukje tussen de punthaken. Een element is de openingstag, de inhoud en de sluitingstag bij elkaar. In de omgangstaal worden de twee door elkaar gebruikt; in documentatie staat het onderscheid er wel.