HyperText Markup Language (HTML)

HyperText Markup Language (HTML) is de standaard opmaakt taal die de structuur en betekenis van content op het web vastlegt. Browsers lezen HTML en bouwen daaruit het Document Object Model (DOM), waarop opmaak (CSS) en gedrag (JavaScript) worden toegepast. Met semantische elementen geef je aan wat content is (bijv. kop, navigatie, artikel), niet hoe het eruitziet.

Kernbegrippen

• Elementen en tags: Bouwstenen van een pagina, zoals html, head, body, header, nav, main, article, section, footer, a, img, form en table.
• Attributen: Extra informatie voor elementen, zoals id, class, alt, href, src, aria-label en data-*.
• Semantiek: Elementen beschrijven de betekenis van content, wat helpt bij SEO, toegankelijkheid en onderhoudbaarheid.
• DOM: Een boomstructuur die de browser opbouwt uit HTML, waarmee scripts en stijlen kunnen interageren.
• Metadata: In head, zoals title, meta description, charset en viewport; belangrijk voor SEO, weergave en social previews.

Opbouw van een HTML-document

• Doctype: Geeft de HTML-standaard aan (bijv. ).
• html met lang-attribuut: Helpt zoekmachines en ondersteunende technologie (bijv. lang="nl").
• head: Bevat title, meta-tags, links naar CSS, favicons en scripts die vroeg geladen worden.
• body: De zichtbare content: structuur, navigatie, componenten, formulieren, media en inhoud.

Semantiek en toegankelijkheid

Semantische HTML verbetert de navigatie voor screenreaders, maakt toetsenbordaanspreekbaarheid duidelijker en helpt zoekmachines de inhoud te begrijpen. Gebruik betekenisvolle koppen (h1–h6), navigatielandmarks (nav, main, aside), beschrijvende linkteksten en alt-teksten voor afbeeldingen. Gebruik ARIA-rollen alleen wanneer native semantiek tekortschiet.

Standaarden en versies

HTML wordt als ‘living standard’ beheerd door de WHATWG. De term ‘HTML5’ wordt nog vaak gebruikt als verzamelnaam voor moderne HTML-functies, maar versienummers worden in de praktijk niet langer in de markup gespecificeerd. Moderne browsers implementeren doorlopend de actuele standaard.

HTML wordt in vrijwel alle digitale ervaringen gebruikt, van eenvoudige webpagina’s tot complexe webapplicaties en e-mailsjablonen.

Webpagina’s en componenten

• Structuur: Bouw de skeletstructuur van pagina’s en herbruikbare componenten (headers, hero-secties, kaarten, tabellen, formulieren).
• Contentpublicatie: Tekst, afbeeldingen, audio en video effectief presenteren met passende semantiek.

SEO en vindbaarheid

• Semantische elementen: Helpen zoekmachines de inhoud en hiërarchie te begrijpen.
• Metadata: Titels en meta descriptions verbeteren zichtbaarheid en klikratio’s.
• Structured data: Markeer content met microdata of (voorkeur) JSON-LD voor rijke resultaten; HTML is de drager voor deze snippets en referenties.

Toegankelijkheid (A11y)

• Landmarks en koppen: Verbeteren navigatie met screenreaders en toetsenbord.
• Beschrijvende alternatieven: Alt-teksten, labels en foutmeldingen in formulieren.
• Focusvolgorde: Logische documentvolgorde en terughoudend gebruik van tabindex.

Integratie met CSS en JavaScript

• Presentatie: CSS verzorgt layout, kleuren en typografie op de HTML-structuur.
• Interactiviteit: JavaScript voegt gedrag toe (navigatie, validatie, dynamische content) via DOM-manipulatie.
• Hooks: Classes en data-attributen voor styling, testen en scripting.

E-mailtemplates

• Compatibiliteit: HTML-e-mails vragen vaak tabelgebaseerde layout en inline CSS vanwege beperkte clientondersteuning.
• Fallbacks: Alt-teksten en veilige fonts vergroten de leesbaarheid in diverse clients.

Performance en onderhoud

• Schone markup: Minder nesting en betekenisvolle elementen verbeteren performance en onderhoudbaarheid.
• Progressive enhancement: Werkend fundament in HTML, daarna verrijken met CSS/JS.