Iedere webpagina heeft een structuur nodig zodat een browser weet wat een titel, tekst, afbeelding, link of formulier is. De vraag Wat is HTML gaat precies daarover: HTML is de markeertaal waarmee je de inhoud en structuur van een webpagina beschrijft. De browser leest deze HTML-code en gebruikt de verschillende elementen om de pagina correct op te bouwen.
HTML bepaalt vooral wat onderdelen van een pagina zijn en welke functie ze hebben. Voor de vormgeving wordt meestal CSS gebruikt. JavaScript wordt vaak toegevoegd wanneer onderdelen moeten reageren op acties van bezoekers.
Ook een WordPress-website gebruikt uiteindelijk HTML. Je hoeft die code meestal niet zelf te schrijven, maar basiskennis helpt je wel om beter te begrijpen hoe een website technisch is opgebouwd.
Wat is HTML precies?
HTML staat voor HyperText Markup Language. HyperText verwijst naar het verbinden van documenten via links. Markup Language betekent dat je met markeringen aangeeft welke betekenis onderdelen van de inhoud hebben.
HTML gebruikt hiervoor elementen. Zo kun je aangeven dat een tekst een hoofdtitel is, dat een ander stuk tekst een alinea vormt of dat iemand via een link naar een andere pagina kan gaan.
Een eenvoudig voorbeeld:
<h1>Dit is de belangrijkste titel</h1>
<p>Dit is een gewone alinea met tekst.</p>
<a href="https://voorbeeld.nl/">Bekijk de volgende pagina</a>De browser toont de tags zelf niet aan de bezoeker. Hij verwerkt ze en toont de inhoud als een gewone webpagina.
Wat is het verschil tussen een HTML-tag en een HTML-element?
De woorden HTML-tag en HTML-element worden vaak als hetzelfde gebruikt, maar technisch is er een verschil.
Bij deze code:
<p>Dit is een alinea.</p>is <p> de openingstag en </p> de sluitingstag. De openingstag, inhoud en sluitingstag samen vormen het HTML-element. Niet ieder element heeft een aparte sluitingstag. Een afbeelding wordt bijvoorbeeld zo toegevoegd:
<img src="afbeelding.webp" alt="Beschrijving van de afbeelding">Hier geeft img aan dat het om een afbeelding gaat. src vertelt welk afbeeldingsbestand moet worden geladen en alt bevat een tekstueel alternatief voor de afbeelding.
Attributen zoals src, alt, href, class en id geven aanvullende informatie aan een HTML-element.
Hoe werkt HTML op een website?
Wanneer iemand een pagina opent, ontvangt de browser de HTML van die pagina. De browser leest de elementen en bouwt daaruit de structuur op die de bezoeker uiteindelijk ziet.
Een eenvoudig HTML-document kan er zo uitzien:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Voorbeeldpagina</title>
</head>
<body>
<h1>Welkom op onze website</h1>
<p>Dit is de eerste alinea van de pagina.</p>
<a href="/contact//">Neem contact op</a>
</body>
</html>Het gedeelte head bevat informatie over het document die meestal niet als gewone pagina-inhoud zichtbaar is. Het title-element bepaalt bijvoorbeeld de paginatitel van het document.
De zichtbare inhoud staat hoofdzakelijk binnen body. Daar vind je onder andere headings, teksten, afbeeldingen, links en formulieren. De HTML-standaard beschrijft hoe deze onderdelen en hun volgorde worden verwerkt.
Je hoeft voor een normale WordPress-website niet zelf zo’n volledig document te schrijven. Het voorbeeld laat vooral zien hoe HTML een pagina een duidelijke structuur geeft.
HTML bevat veel verschillende elementen, maar voor een gewone website kom je een relatief kleine groep steeds opnieuw tegen.
- <h1> tot en met <h6> voor koppen en tussenkoppen.
- <p> voor een alinea.
- <a> voor een link.
- <img> voor een afbeelding.
- <ul> en <ol> voor lijsten.
- <header>, <nav>, <main>, <article> en <footer> voor verschillende onderdelen van een pagina.
De H1 tot en met H6 geven verschillende niveaus binnen de inhoud aan. H1 is het hoogste niveau. Een H3 hoort inhoudelijk onder een H2 te vallen en een H4 weer onder een H3. Gebruik headings daarom voor de structuur van de inhoud en niet alleen omdat een bepaalde grootte er mooier uitziet.
Voor een gewone pagina is één duidelijke H1 meestal de beste keuze. Gebruik daarna H2- en H3-koppen om onderwerpen logisch onder te verdelen.
Waar wordt HTML voor gebruikt?
HTML wordt gebruikt voor vrijwel alle soorten webpagina’s. Een eenvoudige bedrijfswebsite, webshop, blog, nieuwswebsite en webapplicatie gebruiken allemaal HTML om inhoud aan de browser aan te bieden.
Met HTML kun je onder andere teksten structureren, navigatie maken, afbeeldingen toevoegen, formulieren opbouwen, video opnemen en paginaonderdelen van betekenis voorzien.
Een HTML-website betekent overigens niet automatisch dat de volledige website alleen uit HTML bestaat. In de praktijk wordt HTML meestal gecombineerd met CSS en JavaScript.
Ook het verschil tussen een handmatig gebouwde HTML-website en een website met een CMS is belangrijk. Meer uitleg hierover vind je in: Wat is het verschil tussen WordPress website en HTML website?
Wat is het verschil tussen HTML, CSS en JavaScript?
HTML, CSS en JavaScript worden vaak samen gebruikt, maar hebben ieder een andere taak.
HTML bepaalt de inhoud en structuur. Een titel, alinea, afbeelding of link wordt met HTML aangegeven.
CSS bepaalt de visuele vormgeving. Daarmee stel je bijvoorbeeld kleuren, lettertypes, afstanden, breedtes en de indeling op verschillende schermformaten in.
JavaScript wordt gebruikt wanneer onderdelen moeten reageren of veranderen. Denk aan een menu dat opent, een formulier dat direct wordt gecontroleerd of inhoud die wordt bijgewerkt zonder de volledige pagina opnieuw te laden.
Een eenvoudige vergelijking is daarom: HTML bepaalt wat er op de pagina staat, CSS bepaalt hoe het eruitziet en JavaScript kan bepalen wat er gebeurt.
Meer uitleg over de vormgeving van HTML-elementen vind je in: Wat is CSS en welke toepassingen heeft het in webdesign?
Is HTML een programmeertaal?
HTML is geen programmeertaal. Het is een markeertaal.
Met HTML beschrijf je de structuur en betekenis van inhoud. HTML voert zelf geen berekeningen uit en bevat geen programmeerlogica waarmee bijvoorbeeld beslissingen op basis van gegevens worden genomen.
Je kunt met HTML wel een knop of formulier op een pagina plaatsen. Voor de verwerking of interactieve werking achter zo’n onderdeel zijn vaak andere technieken nodig.
Dat maakt HTML niet minder belangrijk. Het vormt juist de basis waarop veel andere webtechnieken verder bouwen.
Wat is HTML5?
De naam HTML5 wordt nog steeds veel gebruikt voor moderne HTML. HTML5 bracht onder andere nieuwe mogelijkheden voor audio, video, formulieren en duidelijkere elementen voor de structuur van webpagina’s.
Voorbeelden daarvan zijn header, nav, main, article, section en footer. Deze elementen beschrijven beter welke functie een bepaald gedeelte van de pagina heeft.
HTML wordt tegenwoordig doorlopend verder ontwikkeld als een levende standaard. Daardoor is het niet meer nodig om voor iedere reeks verbeteringen op een volledig nieuwe genummerde HTML-versie te wachten.
Voor een website-eigenaar is het vooral belangrijk om moderne en geldige HTML te gebruiken. Je hoeft niet alle verschillen tussen oude HTML-versies te kennen.
Wat is semantische HTML?
Semantische HTML betekent dat je een element kiest dat past bij de betekenis van de inhoud.
Een navigatiemenu past bijvoorbeeld binnen nav. De belangrijkste inhoud van een pagina kan binnen main staan en een zelfstandig artikel kan met article worden aangegeven.
Een div kan technisch voor veel verschillende onderdelen worden gebruikt, maar zegt op zichzelf weinig over de functie van de inhoud. Een passend semantisch element geeft die betekenis wel aan.
Hetzelfde geldt voor headings. Gebruik een H2 omdat het onderwerp op het tweede niveau van de inhoud staat en niet alleen omdat je de lettergrootte mooi vindt.
Een bekend voorbeeld is het element header. Dat moet niet worden verward met de zichtbare websiteheader als ontwerpbegrip. Meer uitleg over dat verschil vind je in: Wat is een header en welke rol speelt het in webdesign?
Hoe werken HTML en WordPress samen?
Bij WordPress hoef je meestal niet rechtstreeks HTML-code te schrijven. Je maakt een pagina of bericht met blokken, een thema en eventueel een pagebuilder.
Toch krijgt de browser uiteindelijk HTML te verwerken. WordPress zet de inhoud en onderdelen van de pagina om naar de uiteindelijke markup die aan de voorkant wordt weergegeven. Sommige blokken bewaren hun markup direct, terwijl andere onderdelen dynamisch worden opgebouwd.
Voeg je bijvoorbeeld een kop, afbeelding of knop toe in WordPress, dan wordt daar de passende HTML-structuur voor gemaakt.
Je kunt via de blokeditor ook zelf aangepaste HTML toevoegen wanneer dat nodig is. Voor normaal websitebeheer is dat meestal niet nodig.
Wil je eerst begrijpen hoe het CMS zelf werkt? Lees dan: Wat is WordPress en waarom is het zo populair?
Waarom is HTML belangrijk voor SEO?
HTML helpt zoekmachines om de inhoud en structuur van een pagina te verwerken. Een duidelijke paginatitel, hoofdtitel, tussenkoppen en beschrijvende links geven informatie over het onderwerp en de opbouw van een pagina.
Google kan onder andere het title-element, de zichtbare hoofdtitel en heading-elementen gebruiken bij het begrijpen en presenteren van een pagina in de zoekresultaten. Een duidelijke hoofdheading en beschrijvende titel zijn daarom belangrijk.
Een goede HTML-structuur betekent niet automatisch dat een pagina hoog in Google komt. De inhoud moet ook relevant, nuttig en passend bij de zoekvraag zijn.
Gebruik headings daarom niet om hetzelfde keyword steeds opnieuw te herhalen. Geef ieder onderdeel een duidelijke titel die vertelt wat de bezoeker daar kan verwachten.
Meer uitleg over de technische kant van vindbaarheid vind je in: Wat is technische SEO? Alles wat je moet weten om hoger te scoren in Google.
Hoe werken HTML en afbeeldingen samen?
Een afbeelding wordt via HTML aan een pagina toegevoegd. Daarbij kan een alt-attribuut worden gebruikt.
Bijvoorbeeld:
<img src="kantoor.webp" alt="Werkplek met twee beeldschermen">De alt-tekst geeft een tekstueel alternatief voor de afbeelding. Dit is vooral belangrijk wanneer de afbeelding inhoudelijke betekenis heeft en niet op de normale visuele manier kan worden waargenomen.
Schrijf daarom een alt-tekst die bij de werkelijke afbeelding past. Gebruik het veld niet om willekeurige zoekwoorden toe te voegen.
Decoratieve afbeeldingen hoeven niet altijd een inhoudelijke beschrijving te krijgen. De juiste alt-tekst hangt af van de functie van de afbeelding op de pagina.
Meer uitleg over het correct schrijven van deze teksten vind je in: Wat is een Alt-tag en hoe helpt het je SEO?
Wat zijn veelgemaakte fouten met HTML?
Een onlogische headingstructuur is een veelgemaakte fout. Een H3 moet inhoudelijk onder de betreffende H2 vallen. Sla headingniveaus niet zonder reden over. Een logische hiërarchie maakt de pagina duidelijker voor bezoekers en ondersteunende software.
Ook verkeerd geopende en gesloten elementen kunnen problemen veroorzaken. Open je binnen een element een nieuw onderdeel, dan moet de structuur logisch worden afgesloten.
Deze code is bijvoorbeeld niet netjes opgebouwd:
<p>Dit is <strong>belangrijke tekst.</p></strong>De juiste volgorde is:
<p>Dit is <strong>belangrijke tekst.</strong></p>Een andere fout is HTML gebruiken om de vormgeving te regelen terwijl CSS daar beter voor geschikt is.
Ook gekopieerde inhoud uit tekstverwerkingsprogramma’s of oude editors kan onnodige HTML meenemen. Hierdoor kan de code veel ingewikkelder worden dan nodig is.
Gebruik daarnaast geen heading omdat je alleen een grotere of kleinere tekst wilt. De HTML-structuur moet de betekenis van de inhoud volgen. De vormgeving regel je met CSS.
Moet je HTML leren als je een website hebt?
Je hoeft geen HTML-developer te worden om een WordPress-website te beheren. De meeste dagelijkse werkzaamheden kun je gewoon in de editor uitvoeren.
Een basiskennis van HTML is wel nuttig. Wanneer je weet wat een H1, H2, alinea, link, afbeelding en alt-attribuut doen, herken je sneller waarom een pagina verkeerd is opgebouwd.
Begin met een paar eenvoudige onderdelen. Maak bijvoorbeeld een kleine testpagina met een titel, twee alinea’s, een link en een afbeelding. Bekijk daarna hoe deze elementen in de browser worden weergegeven.
Voor een website-eigenaar is het vooral belangrijk om de structuur te begrijpen. Een webdesigner of developer heeft diepere HTML-kennis nodig, omdat vrijwel iedere webpagina uiteindelijk op HTML is gebaseerd.
Conclusie
HTML is de markeertaal waarmee de inhoud en structuur van een webpagina worden beschreven. Het maakt duidelijk welke tekst een titel is, waar alinea’s staan, welke onderdelen links zijn en hoe afbeeldingen, navigatie en andere inhoud worden opgebouwd.
HTML werkt meestal samen met CSS voor de vormgeving en JavaScript voor interactieve functies. Ook WordPress levert uiteindelijk HTML aan de browser.
Je hoeft niet alle HTML-tags uit je hoofd te kennen om een website te beheren. Begrijpen hoe headings, alinea’s, links, afbeeldingen en de basisstructuur werken, helpt je wel om pagina’s duidelijker en technisch netter op te bouwen.
Veelgestelde vragen
1. Wat is HTML?
HTML staat voor HyperText Markup Language en wordt gebruikt om de inhoud en structuur van webpagina’s te beschrijven.
2. Waar wordt HTML voor gebruikt?
HTML wordt gebruikt voor onder andere koppen, teksten, links, afbeeldingen, formulieren en de algemene structuur van een webpagina.
3. Is HTML een programmeertaal?
Nee. HTML is een markeertaal. Voor programmeerlogica en interactieve functies worden andere technieken gebruikt.
4. Wat is het verschil tussen HTML en CSS?
HTML bepaalt de inhoud en structuur. CSS bepaalt hoe die onderdelen visueel worden weergegeven.
5. Wat is HTML5?
HTML5 is de veelgebruikte naam voor moderne HTML. HTML wordt tegenwoordig doorlopend verder ontwikkeld.
6. Gebruikt WordPress ook HTML?
Ja. WordPress genereert de HTML die een browser nodig heeft om de uiteindelijke pagina weer te geven.