Wat is HTML? Structuur, tags en elementen
Auteur: Redactie Domeny.ForSale Gepubliceerd
Kort gezegd: HTML is een opmaaktaal die de structuur en betekenis van de inhoud van een webpagina beschrijft. De taal vertelt de browser welke onderdelen koppen, alinea’s, links, afbeeldingen of formulieren zijn. Het is geen programmeertaal: voor de vormgeving van een pagina wordt vooral CSS gebruikt, en voor gedrag en interactie vaak JavaScript.
Waarvoor dient HTML op een webpagina?
De afkorting HTML staat voor het Engelse HyperText Markup Language, oftewel een opmaaktaal voor hypertekst. ‘Hypertekst’ is tekst die via links verbonden is met andere documenten of delen van de inhoud. ‘Tags’ zijn aanduidingen in de code die de verschillende onderdelen van een document een bepaalde rol geven.
Wanneer je een pagina opent, leest de browser de HTML en bouwt daarmee de documentstructuur op. Vervolgens toont hij de inhoud op het scherm, waarbij hij ook rekening houdt met stijlen en de werking van scripts, als die zijn toegevoegd. De gebruiker ziet meestal het resultaat van dit proces, niet de code zelf.
Een website van een café kan bijvoorbeeld de naam van het café als hoofdkop bevatten, een beschrijving als alinea, de menukaart als lijst en een link om te reserveren. HTML bepaalt wat deze elementen zijn, maar hoeft niet te bepalen welke kleur ze hebben of hoeveel ruimte ze op het scherm innemen.
Tags, elementen en attributen — hoe lees je HTML?
Een tag is een aanduiding tussen punthaken, bijvoorbeeld <p>. Veel elementen hebben een openingstag en een sluitingstag: in <p>Openingstijden</p> staan de tags om de inhoud van de alinea heen. Het geheel van tags en inhoud vormt een element in HTML.
Niet elk element omsluit tekst. Het element img, waarmee je een afbeelding invoegt, heeft geen sluitingstag. De benodigde informatie, zoals het adres van het bestand, geef je mee via de attributen van het element.
Een attribuut is aanvullende informatie in de openingstag. Het attribuut href bepaalt het doel van een link, src verwijst naar de bron van een afbeelding en met lang geef je de taal van het document of een deel ervan aan. Het attribuut alt van een afbeelding bevat alternatieve tekst. Wat daarin staat, hangt af van de functie van de afbeelding; bij een puur decoratieve afbeelding blijft het meestal leeg.
Om te beginnen is het handig om enkele elementen te kennen:
h1–h6— koppen van verschillende niveaus;p— een alinea tekst;a— een link, als het element eenhref-attribuut heeft;ulenli— een ongeordende lijst en de items daarin;img— een afbeelding;button— een knop.
Je kunt elementen binnen andere elementen plaatsen, maar daarvoor gelden regels. Een lijst bevat lijstitems en een link kan onderdeel zijn van een alinea. Browsers proberen fouten in de code te herstellen. Dat een pagina er goed uitziet, bewijst dus niet dat de HTML ervan correct is.
Hoe verschilt HTML van CSS en JavaScript?
Deze drie technologieën werken vaak samen, maar hebben elk een andere taak. CSS, oftewel cascading style sheets, beschrijft de presentatie van het document. JavaScript is een programmeertaal waarmee je onder meer kunt reageren op handelingen van de gebruiker en de inhoud van de pagina kunt wijzigen.
| Technologie | Belangrijkste rol | Voorbeeld in een formulier |
|---|---|---|
| HTML | Structuur en betekenis | Een veld voor een e-mailadres, een label en een knop |
| CSS | Vormgeving en indeling | Kleuren, tussenruimtes en de breedte van velden |
| JavaScript | Logica en gedrag | Een melding bijwerken zonder de pagina opnieuw te laden |
HTML is niet bedoeld om algoritmen, lussen of eigen berekeningen te schrijven en wordt daarom niet tot de programmeertalen gerekend. Dat betekent echter niet dat een pagina zonder JavaScript geen interactie kan bieden. Links werken op zichzelf, en dankzij functies van HTML kan de browser een formulier verzenden of een eenvoudige controle van een verplicht veld uitvoeren.
Een eenvoudige pagina met bedrijfsinformatie kan volledig in HTML worden gemaakt. Met CSS kun je de vormgeving verfijnen. JavaScript is pas nodig wanneer het gewenste gedrag verder gaat dan wat het document en de browser zelf kunnen.
Waarom is de betekenis van elementen belangrijker dan hun uiterlijk?
Semantische HTML betekent dat je elementen kiest op basis van hun betekenis. Een kop moet ook in de code een kop zijn, niet alleen tekst die met stijlen groter is gemaakt. Op dezelfde manier gebruik je een link om naar een andere pagina te gaan en meestal een knop om een handeling uit te voeren.
Dit onderscheid helpt ondersteunende technologieën, zoals schermlezers, om de inhoud correct weer te geven. Iemand die zo’n hulpmiddel gebruikt, kan bijvoorbeeld tussen koppen navigeren. Als de maker alleen gewone alinea’s groter maakt, komt die navigatie niet overeen met de zichtbare indeling van de pagina.
Een knop die met het juiste element is gemaakt, heeft ook ingebouwde toetsenbordbediening. Dezelfde functie nabouwen op een willekeurig stukje tekst kost extra werk. Correcte HTML vormt de basis voor toegankelijkheid, maar garandeert op zichzelf niet dat de hele website toegankelijk is.
Hoe begin je in de praktijk met HTML?
Voor je eerste oefeningen zijn een teksteditor en een browser voldoende. Een document in HTML bevat meestal een documenttypedeclaratie, het hoofdelement html, een head-gedeelte met metadata en een body-gedeelte met de inhoud van de pagina. Metadata beschrijven het document. Daartoe behoren onder meer de tekencodering en de titel die op het browsertabblad verschijnt.
De eenvoudigste oefening is een lokale pagina met een korte bedrijfspresentatie:
- Maak in de editor een tekstbestand en sla het op als
index.html. Let erop dat het geen extra extensie.txtkrijgt. - Bouw de basisstructuur van het document op en voeg in het
body-gedeelte een kop, een alinea en een lijst met diensten toe. - Open het bestand in de browser. Sla het na elke wijziging op en vernieuw de pagina.
- Gebruik de optie ‘Inspecteren’ of ‘Element inspecteren’ om te zien hoe de browser de structuur interpreteert.
Je hoeft een lokaal bestand niet te publiceren of er een domeinnaam voor te kopen. Begin met het ordenen van de inhoud, zonder kleuren of versieringen. Zo kun je makkelijker nagaan of je de rollen van de elementen begrijpt voordat je aan de vormgeving begint.
Zie ook: Wat is 2FA?
Lees ook
