Auteur: Joyce MonthinyHTML, wat staat voor HyperText Markup Language, vormt de basis van het internet zoals we dat vandaag de dag kennen. HTML is de standaard opmaaktaal die wordt gebruikt om webpagina’s te maken en de structuur van online content vast te leggen. Deze opmaaktaal zorgt ervoor dat tekst, afbeeldingen, video’s, en hyperlinks op een webpagina op een gestructureerde en herkenbare manier worden weergegeven. Zonder HTML zouden websites niets meer zijn dan een grote hoop ongeorganiseerde informatie; HTML zorgt ervoor dat alles netjes op zijn plek staat en makkelijk leesbaar is voor gebruikers en zoekmachines.
In tegenstelling tot een programmeertaal, die logica bevat en berekeningen kan uitvoeren, geeft HTML alleen maar aan hoe elementen op een webpagina moeten worden weergegeven. HTML werkt nauw samen met CSS (Cascading Style Sheets), waarmee je de opmaak van een website kunt bepalen en, en met JavaScript, waarmee je interactieve functies kunt toevoegen. Maar HTML is altijd het startpunt: het geeft de basisstructuur van de webpagina aan en vertelt de browser hoe die moet worden opgebouwd.
Hoe werkt HTML?
HTML werkt door het gebruik van zogenaamde tags. Dit zijn stukjes code die aangeven wat een bepaald deel van de tekst of het ontwerp voorstelt. Elke tag wordt genoteerd tussen hoekhaken, zoals <html>, <head> en <body>. Zo vertelt de <h1> tag bijvoorbeeld dat het om een kop gaat, terwijl de <p> tag aangeeft dat het een paragraaf is. De meeste HTML-elementen werken met een openingstag en een sluitingstag; zo begint een paragraaf met <p> en eindigt deze met </p>.
Elke HTML-pagina begint met een basis template, met de <html> tag als overkoepelende container voor de gehele code. Binnen de <html>-tag vinden we andere tags die de pagina verder structureren. De <head> tag bijvoorbeeld bevat informatie over de pagina die niet direct zichtbaar is, zoals de titel en de links naar externe CSS of JavaScript bestanden. De daadwerkelijke inhoud van de webpagina, wat de gebruiker zal zien, staat binnen de <body> tag. Door de browser deze HTML tags te laten lezen, weet deze precies hoe de webpagina moet worden opgebouwd en gepresenteerd.
De opbouw van een HTML pagina
Een typische HTML-pagina heeft een specifieke structuur die uit verschillende lagen bestaat. Hier is een eenvoudig voorbeeld van hoe een basis HTML-pagina eruitziet:
<!DOCTYPE html>
<html lang=”nl”>
<head>
<title>Titel van de pagina</title>
</head>
<body>
<h1>Welkom op mijn website!</h1>
<p>Dit is een eenvoudige HTML-structuur.</p>
</body>
</html>
Dit is een basisstructuur die veel webpagina’s volgen. Laten we deze onderdelen kort bespreken:
- <!DOCTYPE html> – Dit stukje code vertelt de browser dat het gaat om een HTML5-document, wat belangrijk is voor de juiste weergave en compatibiliteit.
- <html> – Dit is de hoofdtag van het document en omvat alle HTML-code op de pagina.
- <head> – In dit gedeelte kun je metadata van de pagina plaatsen, zoals de titel van de pagina, koppelingen naar CSS- of JavaScript-bestanden en informatie voor zoekmachines.
- <title> – Dit bepaalt de titel die in de tab van de browser verschijnt. Dit is ook een van de eerste elementen die zoekmachines indexeren, dus het kan helpen bij SEO.
- <body> – Dit is het deel waar alle zichtbare inhoud op de webpagina komt, zoals tekst, afbeeldingen en links.
Door deze structuur te volgen, kan elke web browser een pagina weergeven die consistent en logisch is opgebouwd. Dit zorgt ervoor dat de inhoud er goed uitziet en goed functioneert, zowel op desktop- als mobiele apparaten.
Wat kun je met HTML?
Met HTML kun je de complete opbouw van een webpagina bepalen. Hieronder zijn enkele mogelijkheden wat je met HTML kan doen:
- HTML maakt het mogelijk om tekst op een logische manier in te delen. Je kunt koppen, paragrafen en lijsten toevoegen om de inhoud duidelijk te ordenen, zodat het voor de gebruiker prettig leesbaar is.
- Een van de krachtigste functies van HTML is de mogelijkheid om hyperlinks te maken. Met de <a> tag kun je een link maken naar andere pagina’s, zowel intern als extern. Dit maakt navigatie tussen verschillende pagina’s of websites eenvoudig.
- Met HTML kun je visuele elementen zoals afbeeldingen, video’s en audio toevoegen, waardoor de inhoud van de pagina aantrekkelijker en dynamischer wordt.
- HTML biedt tags voor het maken van formulieren, waarmee gebruikers gegevens kunnen invoeren. Dit is nuttig voor contactpagina’s, aanmeld formulieren en zoekbalken. Met tags zoals <input>, <select>, en <textarea> kun je verschillende soorten gebruikersinvoer mogelijk maken.
Met CSS en JavaScript kun je deze elementen verder verfijnen en interactiviteit toevoegen, maar HTML blijft de fundamentele basis waarmee alles begint.