HTML-elementen en attributen voor webpagina's

HTML voorziet de onderdelen van een pagina van labels, zodat de browser de structuur kan opbouwen. Een kop, een alinea en een link hebben verschillende betekenissen, ook voordat je vormgeving toevoegt. HTML beschrijft de inhoud, CSS bepaalt de vormgeving en JavaScript voegt gedrag toe.

Lees een element

In <p>The workshop opens at noon.</p> is <p> de begintag, de zin de inhoud en </p> de eindtag. Het geheel is een alinea-element. De schuine streep markeert de eindtag. Gebruik elementnamen in kleine letters om je broncode consistent te houden, ook al accepteert HTML ook namen in hoofdletters.

Een attribuut voegt informatie toe binnen een begintag:

<a href="hours.html" title="Workshop opening hours">Opening hours</a>

Hier geeft href de bestemming en title adviserende tekst. Scheid attributen met spaties en zet hun waarden tussen rechte aanhalingstekens. De volgorde verandert hun betekenis niet. Aanhalingstekens houden een waarde bij elkaar: class="intro note" geeft twee klassenamen, terwijl class=intro note wordt gelezen als één klassewaarde en een afzonderlijk attribuut met de naam note.

Plaats elementen in elkaar

Een alinea kan een woord bevatten dat belangrijk is:

<p>Bring your <strong>booking number</strong>.</p>

Open de alinea, open het strong-element, sluit het strong-element en sluit dan de alinea. Sluit het laatst geopende element als eerste. De alinea is het ouderelement en het strong-element is het kindelement. Kindelementen en alles wat daarin staat, zijn afstammelingen. De browser organiseert deze relaties in de DOM, het Document Object Model, een boom van de inhoud van de pagina.

Niet elk element kan binnen elk ander element staan. Zo kan een lijst niet binnen een alinea staan. Inspringing helpt je de nesting te zien, maar extra spaties kunnen een ongeldige relatie tussen ouder- en kindelement niet geldig maken.

Herken bijzondere soorten elementen en attributen

Lege elementen hebben geen inhoud en geen eindtag. Voorbeelden zijn <img>, <br>, <hr>, <meta> en <link>. Schrijf <br>, zonder </br>. Een afsluitende schuine streep in <br /> heeft geen effect in HTML.

Een booleaans attribuut staat aan als het aanwezig is. Bij een geordende lijst laat reversed de nummering terugtellen. Als je reversed="false" schrijft, is het attribuut nog steeds aanwezig en telt de lijst dus nog steeds terug. Verwijder het attribuut om dit uit te schakelen.

Sommige attributen werken op verschillende elementen:

Lees witruimte en commentaar in de broncode

In gewone tekst worden meerdere spaties, tabs of regeleinden in de broncode samengevoegd tot één spatie. Als je een alinea over drie regels broncode schrijft, krijg je op het scherm nog steeds één alinea. Gebruik elementen om structuur aan te geven en laat broncode inspringen om die leesbaar te maken.

Commentaar ziet eruit als <!-- Menu starts here -->. Het is verborgen op de weergegeven pagina, maar zichtbaar in de broncode. Zet nooit wachtwoorden of privégegevens in commentaar. Commentaar kan niet worden genest: de eerste --> beëindigt het commentaar.

Een complete pagina scheidt informatie over het document van de inhoud die mensen lezen. Begin met een kleine, consistente basisstructuur en voeg daarna de titel en body-inhoud van de pagina toe.

Maak de basisstructuur

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Opening Hours – Harbor Café</title>
  </head>
  <body>
    <h1>Harbor Café</h1>
    <p>Open every day except Monday.</p>
  </body>
</html>

<!DOCTYPE html> vertelt de browser de standaardmodus te gebruiken, met de normale moderne weergaveregels. Het is een declaratie, geen element. Als je die weglaat, kan de compatibiliteitsmodus worden ingeschakeld, die ouder browsergedrag nabootst en de lay-out en afmetingen kan veranderen.

<html> is het hoofdelement. De twee kindelementen zijn <head> en <body>. Head bevat metadata, informatie over de pagina. Body bevat de zichtbare inhoud. Een <h1> hoort in body, ook als de browser de fout lijkt te herstellen wanneer je die in head zet.

Geef de pagina een identiteit

De <title> verschijnt op het browsertabblad, in bladwijzers en in de geschiedenis. Zoekmachines kunnen die ook als kop van een zoekresultaat gebruiken. Geef elke normale pagina precies één titel, binnen head. Zet het specifieke onderwerp eerst, gevolgd door de naam van de website, zoals “Openingstijden - Havencafé”. De zichtbare <h1> en de documenttitel zijn afzonderlijke elementen met verschillende functies.

Plaats <meta charset="utf-8"> als eerste in head. De volledige declaratie moet binnen de eerste 1.024 bytes van het bestand staan. Door de declaratie vroeg te plaatsen, kan de browser bepalen hoe de tekst moet worden gedecodeerd voordat die een groot deel van de pagina heeft gelezen.

De viewport-regel vraagt mobiele browsers om de apparaatbreedte te gebruiken voor de lay-out en een aanvankelijke zoom van 1. Zonder die regel gebruiken veel browsers een brede virtuele desktopviewport en verkleinen ze het resultaat, waardoor tekst klein lijkt. Deze regel bereidt het document voor op een mobiele lay-out; de vormgeving van de pagina bepaalt nog steeds hoe de inhoud past.

Koppel andere bronnen van de pagina

Veelvoorkomende toevoegingen aan head zijn:

<meta name="description" content="Fresh bread, coffee and lunch by the harbor.">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>

De beschrijving vat de pagina samen en kan in zoekresultaten verschijnen. Het pictogram levert de afbeelding op het tabblad. De stijlbladlink koppelt een CSS-bestand. Het script-element koppelt JavaScript; defer stelt de uitvoering uit totdat het document is geparseerd. Anders dan <link> en <meta> heeft <script> een eindtag nodig, ook als de inhoud leeg is.

Sla een webpaginabestand op

Sla tekst zonder opmaak in een code-editor op met de extensie .html. Een tekstverwerker kan opmaak toevoegen die niet in een HTML-bronbestand thuishoort. De standaardpagina van een map heet meestal index.html; de meeste webservers versturen die wanneer iemand het adres van de map opvraagt.

Kies namen in kleine letters met koppeltekens, zoals opening-hours.html. Spaties worden %20 in URL's en veel servers maken onderscheid tussen hoofdletters en kleine letters. Controleer of de editor je pagina niet als index.html.txt heeft opgeslagen. Open na het opslaan het HTML-bestand in de browser en vernieuw de pagina wanneer je een wijziging aanbrengt.

De taal van tekst en de manier waarop de tekens worden opgeslagen, beantwoorden verschillende vragen. Een browser heeft beide nodig om de pagina correct te tonen, vooral als de inhoud accenten of meer dan één schrift bevat.

Geef de taal van de inhoud op

Schrijf de hoofdtaal op het hoofdelement: <html lang="en">. Schermlezers kunnen op basis hiervan de uitspraak kiezen en browsers kunnen de informatie gebruiken voor vertaling en spelling. Een taalcode begint met een code voor de taal. Een optioneel tweede deel kan een regio of schrift aangeven.

De code beschrijft de inhoud, niet de locatie van de bezoeker. uk betekent Oekraïens en is dus niet de code voor Engels in het Verenigd Koninkrijk.

Markeer een taalwisseling op het dichtstbijzijnde geschikte element:

<p>Our host said <span lang="fr">bon appétit</span>.</p>

Alleen de Franse uitdrukking krijgt een Franse uitspraak. Bij een volledig citaat kun je de taal op de <blockquote> zetten. Een pagina die van rechts naar links loopt, heeft ook een basistekstrichting nodig, bijvoorbeeld <html lang="ar" dir="rtl">. Arabische letters lopen zonder dat attribuut nog steeds van rechts naar links, maar de basisrichting beïnvloedt de uitlijning van alinea's, leestekens en tekst met gemengde richtingen.

Zorg dat de opgeslagen bytes en de declaratie overeenkomen

Een tekencodering koppelt tekens aan opgeslagen bytes. UTF-8 kan alle Unicode-tekens weergeven, inclusief letters met accenten, andere schriften en emoji. HTML-documenten gebruiken UTF-8.

Er zijn twee stappen: sla het bestand zelf in de editor op als UTF-8 en plaats de declaratie <meta charset="utf-8"> vroeg in head. De declaratie vertelt de browser hoe die bytes moet lezen; de declaratie zet een bestand dat met een andere codering is opgeslagen niet om. Een coderingsdeclaratie van een server in de Content-Type-header heeft voorrang op het meta-element.

Als coderingen niet overeenkomen, levert dat vaak een aanwijzing op. UTF-8-tekst “Café” die als Windows-1252 wordt gelezen, kan “Café” worden omdat de twee bytes voor “é” afzonderlijk worden geïnterpreteerd. Een Windows-1252-bestand dat als UTF-8 wordt gelezen, kan juist “Caf�” tonen omdat de byte ongeldig is in UTF-8. Controleer de codering van de editor en de ontvangen documentinformatie van de browser voordat je afzonderlijke letters vervangt.

Toon tekens die HTML als syntaxis gebruikt

Gebruik tekenreferenties om letterlijke tekst te tonen die op een tag lijkt:

<p>Use &lt;p&gt; for paragraphs.</p>

De pagina toont “Use

for paragraphs.” De < moet als < worden weergegeven, zodat de browser geen tag begint. Elke benoemde referentie begint met & en eindigt met ;.

Zo houdt 10 km het getal en de eenheid op dezelfde regel. Gewone tekens met accenten kun je direct in een UTF-8-bestand typen; je hebt geen aparte referentie nodig voor elk accent.

Een browser probeert een pagina weer te geven, ook als de HTML fouten bevat. Dat behulpzame herstel kan fouten verbergen. Daarom bekijk je bij het controleren van een pagina zowel de broncode die je schreef als de structuur die de browser heeft opgebouwd.

Vergelijk de broncode met de DOM

Paginabron bekijken toont de HTML die de browser heeft ontvangen. Het paneel Elementen of Inspector in de ontwikkelaarstools toont de DOM, de geparseerde boom die de browser gebruikt. De browser kan tijdens het parsen een element te vroeg hebben gesloten of inhoud naar een andere plaats hebben verplaatst.

Open de inspector door met de rechtermuisknop op de pagina te klikken en Inspecteren te kiezen, of gebruik de sneltoets voor de ontwikkelaarstools van je browser. Selecteer een weergegeven element en bekijk het ouderelement en de kindelementen. Zoek daarna hetzelfde gedeelte in de broncode. Verschillen kunnen onverwachte tussenruimte, links die te ver doorlopen of stijlen op de verkeerde elementen verklaren.

Volg een automatische reparatie

Stel dat je dit schrijft:

<p>Our soups:
  <ul>
    <li>Tomato</li>
    <li>Lentil</li>
  </ul>
</p>

Een alinea staat inhoud op tekstniveau toe, geen lijst. Bij <ul> aangekomen sluit de browser de alinea. De lijst wordt een afzonderlijk blok. De laatste </p> heeft geen open alinea om te sluiten, waardoor het parsen een extra lege alinea kan maken.

De gewenste reparatie hoort in de broncode:

<p>Our soups:</p>
<ul>
  <li>Tomato</li>
  <li>Lentil</li>
</ul>

Verplaats de eindtag van de alinea naar vóór de lijst. De DOM kan nu de bedoelde relatie weergeven zonder foutherstel.

Gebruik een HTML-controleprogramma

De W3C Nu Html Checker accepteert een pagina-adres, een geüpload bestand of geplakte HTML. Het programma meldt fouten en waarschuwingen met hun locatie. Begin met de eerste fout, verbeter die en voer de controle opnieuw uit. Eén ontbrekend aanhalingsteken kan veel latere meldingen veroorzaken, dus elke gemelde regel tegelijk aanpassen kan onnodig werk opleveren.

In <a href="about.html> ontbreekt bijvoorbeeld het afsluitende aanhalingsteken. De browser kan de daaropvolgende opmaakcode als deel van de attribuutwaarde behandelen. Door het aanhalingsteken te herstellen kunnen verschillende latere fouten verdwijnen. Ook kan een ontbrekende </a> ervoor zorgen dat tekst die er niets mee te maken heeft, deel van de link wordt.

Let vooral op:

• Elementen die in de verkeerde volgorde zijn gesloten of verkeerd gespelde namen zoals <pargraph>.
• Dezelfde id die twee keer op één pagina wordt gebruikt.
• Een <li> buiten de bijbehorende lijst.
• Een afbeelding zonder alt-attribuut.
• Zichtbare inhoud die in head is geplaatst.

Controleer zowel betekenis als syntaxis

Een resultaat zonder meldingen vertelt je dat de geteste opmaakcode de regels van het controleprogramma volgt. Het programma kan niet bepalen of “Klik hier” bruikbare linktekst is of dat de alternatieve tekst van een afbeelding de juiste informatie geeft. Lees de pagina op volgorde en controleer die keuzes zelf.

Controleer voordat je een pagina afrondt de doctype, documenttaal, vroege UTF-8-declaratie en specifieke titel. Bekijk de kopniveaus, unieke id's, tekstalternatieven voor afbeeldingen en linkbestemmingen. Open de pagina in minstens twee browsers en volg de links. Een geldig relatief pad kan nog steeds naar een ontbrekend bestand verwijzen; een syntaxiscontrole alleen ontdekt dat niet.

Koppen geven lezers een overzicht van de pagina. Alinea's bevatten samenhangende zinnen binnen dat overzicht. Kies de elementen op basis van de structuur van de inhoud en laat CSS daarna de vormgeving bepalen.

Maak een koppenoverzicht

HTML heeft zes kopniveaus, van <h1> tot en met <h6>. Gebruik één <h1> voor het hoofdonderwerp van de pagina, <h2> voor de hoofdsecties en <h3> voor onderdelen binnen een <h2>-sectie. De meeste pagina's hebben maar een paar niveaus nodig.

<h1>Growing Basil at Home</h1>
<p>Basil grows well on a sunny windowsill.</p>
<h2>Planting</h2>
<p>Sow the seeds 0.5 cm deep in moist soil.</p>
<h2>Care</h2>
<h3>Watering</h3>
<p>Water when the top of the soil feels dry.</p>
<h3>Harvesting</h3>
<p>Pick the top leaves first.</p>

Lees alleen de koppen. “Planten” en “Verzorging” zijn gelijkwaardige hoofdsecties. “Water geven” en “Oogsten” vallen onder “Verzorging”. Dit overzicht blijft bruikbaar wanneer een schermlezer de koppen opsomt of wanneer een lezer de pagina snel doorneemt.

Een kop mag maar één niveau dieper zijn dan de vorige kop: gebruik na <h1> een <h2>, geen <h3>. Als je terug omhoog gaat, mag je meerdere niveaus overslaan. Een <h2> na een <h4> begint een nieuwe hoofdsectie. Kopniveaus volgen het hele document, ook de inhoud binnen secties en artikelen.

De HTML-standaard staat meerdere koppen op het hoogste niveau toe, maar één <h1> als hoofdkop is het gebruikelijke, duidelijke patroon. Kies <h4> niet alleen omdat de standaardtekst kleiner is. Een vette alinea kan op een kop lijken, maar verschijnt niet in de koppenlijst van een schermlezer.

Onderscheid een ondertitel van een sectie

Een slogan beschrijft de kop ernaast; die leidt geen nieuwe sectie in. Groepeer een kop en ondertitel in <hgroup>:

<hgroup>
  <h1>Harbor Café</h1>
  <p>Fresh bread every morning</p>
</hgroup>

De alinea blijft een ondertitel. Als je er een <h2> van maakt, komt die ten onrechte als hoofdsectie in het koppenoverzicht van de pagina te staan.

Gebruik alinea's voor samenhangende zinnen

Een <p>-element bevat een alinea. Begin een nieuwe alinea wanneer het onderwerp of de stap in de uitleg verandert. Browsers voegen standaard zichtbare ruimte rond alinea's toe.

Als je in gewone HTML-broncode op Enter drukt, maak je geen nieuwe weergegeven alinea. Ook zijn lege <p>-elementen geen middel om tussenruimte te maken. Houd de structuur betekenisvol en stel extra ruimte in met CSS.

Kies een scheiding op basis van betekenis

Bij een adres houdt <p>Harbor Café<br>12 Quay Street<br>Port Town</p> de regels bij elkaar als één alinea. Meerdere <br>-elementen tussen gewone alinea's verwarren de inhoudsstructuur met tussenruimte. Een horizontale lijn die door <hr> wordt getekend, geeft een verandering van onderwerp aan; kies het element om die betekenis, niet alleen om de pagina te versieren.

Tekstelementen vertellen de browser wat een woord of tekstgedeelte betekent. Hun standaardweergave in vet, cursief of met inspringing is alleen een beginstijl. Kies eerst de betekenis.

Maak onderscheid tussen nadruk, belang en aandacht

Als je de nadruk in de voorbeeldzin verplaatst, verandert wat de spreker corrigeert. Belangrijke tekst heeft een andere functie: een waarschuwing is belangrijk ongeacht hoe de zin wordt uitgesproken. Gebruik CSS als je alleen een visuele stijl wilt.

Markeer citaten en hun bronnen

Een lang citaat gebruikt <blockquote>. Het optionele cite-attribuut geeft een bron-URL, maar dat adres wordt niet automatisch weergegeven. Zet een zichtbare bronvermelding buiten het citaat:

<blockquote cite="https://example.com/interview">
  <p>The garden is open to everyone.</p>
</blockquote>
<p>From <cite>A Conversation About the Garden</cite>.</p>

<cite> markeert de titel van een werk, niet de naam van een persoon. Een kort citaat binnen een zin gebruikt <q> en de browser zorgt voor de aanhalingstekens. Typ geen tweede paar rond dezelfde woorden.

Een afkorting kan <abbr title="World Health Organization">WHO</abbr> gebruiken. Schrijf de volledige vorm ook zichtbaar wanneer die voor het eerst voorkomt. Knopinfo alleen is op aanraakschermen moeilijk toegankelijk en is niet voor elke lezer een betrouwbare uitleg.

Toon code en behoud de witruimte

<code> duidt een kort stuk code binnen een zin aan. Combineer het met <pre> voor een blok waarin spaties en regeleinden van belang zijn:

<pre><code>&lt;p&gt;Welcome.&lt;/p&gt;</code></pre>

De lezer ziet de letterlijke opmaakcode van de alinea. <pre> behoudt de opmaak, maar schakelt het parsen van HTML niet uit. Je moet < nog steeds als < en een en-teken als & weergeven als ze als tekst moeten verschijnen. Anders kan een codevoorbeeld worden geïnterpreteerd als daadwerkelijke opmaakcode van de pagina.

Markeer datums, notatie en andere nuttige betekenissen

<sub> en <sup> geven subscript en superscript aan waar de notatie die nodig heeft: H<sub>2</sub>O en m<sup>2</sup>. Ze zijn geen hulpmiddelen om andere tekst kleiner te maken.

<time> verbindt leesbare datum- of tijdtekst met een machineleesbare waarde:

<time datetime="2026-03-14">March 14, 2026</time>

De waarde van datetime gebruikt jaar-maand-dag. Een tijd kan de 24-uurswaarde 14:30 gebruiken, ook als de zichtbare tekst “2:30 p.m.” zegt.

Gebruik <mark> voor tekst die is gemarkeerd omdat die in de huidige context relevant is, zoals een gevonden zoekterm. <small> bevat opmerkingen terzijde of kleine lettertjes. Een <span> heeft geen ingebouwde betekenis; het is nuttig voor een taalattribuut of als aangrijpingspunt voor vormgeving binnen een regel.

Een echte lijst geeft samenhangende items een gezamenlijke structuur. Dankzij de opmaakcode horen lezers dat ze bij een lijst komen en hoeveel items die bevat. Het soort lijst hangt af van de betekenis van de items.

Kies het lijsttype

Gebruik <ul> voor items waarvan de volgorde de betekenis niet verandert, zoals ingrediënten. Gebruik <ol> voor een reeks of rangorde waarbij de volgorde belangrijk is. Beide bevatten lijstitems die met <li> zijn gemarkeerd.

<ol>
  <li>Boil the water.</li>
  <li>Add the pasta.</li>
  <li>Cook for 10 minutes.</li>
</ol>

Als je deze stappen omdraait, veranderen de instructies. Daarom past een geordende lijst. Een browser toont normaal gesproken nummers voor <ol> en opsommingstekens voor <ul>. CSS kan die markeringen veranderen; de betekenis van de lijst blijft hetzelfde.

Maak geen schijnlijst met getypte streepjes en regeleinden. Die tekens kunnen er hetzelfde uitzien, maar vertellen een schermlezer niet dat de items een lijst vormen. Een navigatiemenu gebruikt vaak een ongeordende lijst, terwijl een kruimelpad een geordende lijst gebruikt omdat het pad een volgorde heeft.

Nest een lijst binnen het bijbehorende item

Bij gewone lijstinhoud zijn de directe kindelementen van <ul> en <ol> de <li>-elementen. Plaats er niet rechtstreeks een alinea of een andere lijst tussen. De standaard staat ook elementen toe die scripts ondersteunen, maar die vervangen geen lijstitems.

Een geneste lijst hoort binnen het item dat die beschrijft:

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Open eerst het item “Fruit”. Voeg de geneste lijst toe, sluit die lijst en sluit daarna het item “Fruit”. Nu zijn “Apples” en “Pears” structureel verbonden met “Fruit”. Als je de binnenste <ul> na de </li> van het bovenliggende item plaatst, gaat die relatie verloren. Een <li> kan ook alinea's, links en afbeeldingen bevatten.

Bepaal betekenisvolle nummering

Een geordende lijst kan een telling voortzetten of omkeren:

reversed is booleaans. Het blijft ingeschakeld in reversed="false"; verwijder het om weer op te tellen. Met type kies je met de waarden 1, a, A, i en I gangbare nummervormen. Gebruik een betekenisvolle vorm van markering wanneer tekst elders naar een specifiek label verwijst, zoals bepaling “b”.

Koppel termen en beschrijvingen

Een beschrijvingslijst gebruikt <dl>, met <dt> voor een term of naam en <dd> voor de beschrijving of waarde:

<dl>
  <dt>Opening time</dt>
  <dd>08:30</dd>
  <dt>Closing time</dt>
  <dd>17:00</dd>
</dl>

Eén term kan meerdere beschrijvingen hebben en meerdere termen kunnen één beschrijving delen. Een groep kan in een <div> worden geplaatst. Gebruik deze structuur voor relaties tussen namen en waarden, zoals een begrippenlijst of productgegevens, in plaats van die paren in losse opsommingsitems te dwingen.

Een link verbindt inhoud met een bestemming. De browser bepaalt die bestemming op basis van het adres dat je in href zet. De juiste soort URL kiezen hoort dus bij het schrijven van de link.

Schrijf een anker

<a href="https://www.w3.org/">World Wide Web Consortium</a>

Het <a>-element is een anker. De href geeft de bestemming en de inhoud is de aanklikbare linktekst. Een anker zonder href is een plaatsaanduiding, geen werkende hyperlink. Een afbeelding kan ook de inhoud zijn.

Een absolute URL geeft een URL-schema en domeinnaam, zoals in https://example.com/guide/. Gebruik die om naar een andere website te linken. In href="www.example.com" ontbreekt een URL-schema, dus de browser behandelt dit als een relatief bestandspad; het betekent niet “open die website”.

Werk vanuit de huidige map

Een relatieve URL begint bij de locatie van de huidige pagina. Bekijk deze website:

site/
  index.html
  about.html
  recipes/
    index.html
    soup.html
  images/
    logo.png

Vanaf de beginpagina bereik je met about.html de naastgelegen informatiepagina en ga je met recipes/soup.html de receptenmap in. Vanaf recipes/soup.html zou dezelfde about.html binnen recipes/ zoeken, waar zo'n bestand niet staat.

Volg het pad van recipes/soup.html naar het logo:

1. De beginmap is recipes/.
2. ../ gaat omhoog naar de websitemap.
3. images/ gaat de afbeeldingenmap in.
4. logo.png geeft de naam van het bestand.

Het volledige pad is ../images/logo.png. Elke extra ../ gaat nog één map omhoog. Vanaf de soeppagina bereik je met index.html juist de receptenindex, niet de beginpagina van de website.

Een URL vanaf de hoofdmap begint met /, zoals /about.html. Op een webserver begint die bij de hoofdmap van de website, ongeacht de map van de huidige pagina. Als je de bestanden rechtstreeks vanaf de schijf opent, verwijst die schuine streep naar de hoofdmap van het bestandssysteem en dus niet naar de websitemap van je project. Gebruik gewone relatieve paden voor pagina's die je ook rechtstreeks vanaf de schijf test.

Paden gebruiken schuine strepen naar rechts en moeten overeenkomen met de bestandsnamen en het gebruik van hoofdletters en kleine letters. Veel servers behandelen Soup.html en soup.html als verschillende bestanden. Een maplink zoals recipes/ vraagt een server normaal gesproken om het standaardbestand, meestal index.html; als je rechtstreeks vanaf de schijf bladert, kan een mapoverzicht verschijnen.

Spring naar een deel van een pagina

<a href="#watering">Watering</a>
<h2 id="watering">Watering</h2>

Het fragment begint in de URL met #. De id van het doel heeft geen # en moet exact overeenkomen. Voor een andere pagina combineer je ze: basil.html#watering. Een leeg fragment # gaat naar de bovenkant. Ook #top gaat naar de bovenkant als er geen overeenkomend element wordt gevonden.

Open een e-mail- of telefoonbestemming

mailto:info@example.com vraagt de e-mailapp van de bezoeker om een bericht op te stellen. Een onderwerp kan worden opgenomen als mailto:info@example.com?subject=Table%20booking, waarbij de spatie als %20 is gecodeerd. tel:+15555550123 geeft een telefoonbestemming in internationaal formaat. Het zichtbare telefoonnummer mag spaties bevatten, ook al bevat deze href die niet.

Een bruikbare link vertelt iemand wat die kan verwachten voordat die de link volgt. De tekst, bestemming en manier van openen werken samen, ook wanneer de link afzonderlijk wordt voorgelezen in de linklijst van een schermlezer.

Noem de bestemming

Vergelijk deze links:

Houd linktekst kort maar specifiek. Laat twee links met dezelfde tekst naar dezelfde bestemming leiden. Een kale URL is meestal moeilijker te lezen dan een beschrijving, al is een e-mailadres bruikbare linktekst wanneer het adres zelf de informatie is.

Knopinfo via title kan onduidelijke zichtbare tekst niet herstellen. Gebruikers van een aanraakscherm zien de knopinfo mogelijk nooit en toegang via het toetsenbord is niet betrouwbaar. Zet belangrijke informatie over de bestemming in de daadwerkelijke inhoud van de link.

Geef bestanden en downloads aan

<a href="menu.pdf" download="harbor-cafe-menu.pdf">Lunch menu (PDF, 2 MB)</a>

De tekst geeft het bestandstype en de bestandsgrootte aan. Het download-attribuut vraagt de browser het bestand op te slaan en stelt een bestandsnaam voor. Het zet een pagina niet om in een PDF. Voor gewone links naar webbestanden moet de bestemming dezelfde oorsprong hebben om download toe te passen; speciale blob:- en data:-URL's worden ook ondersteund. Browserinstellingen en serverheaders kunnen het uiteindelijke gedrag beïnvloeden. Het attribuut is dus een verzoek, geen garantie voor één specifiek dialoogvenster.

Laat mensen nieuwe tabbladen zelf beheren

Gewone links openen in de huidige browsercontext, waar je met de knop Vorige naar de vorige pagina kunt teruggaan. target="_blank" vraagt om een nieuw tabblad of venster. Het nieuwe tabblad heeft niet de geschiedenis voor de knop Vorige van het oorspronkelijke tabblad en een bezoeker merkt de wisseling mogelijk niet op.

Gebruik alleen een nieuw tabblad als dat een duidelijk doel dient en kondig het aan in de tekst:

<a href="https://example.com/archive" target="_blank" rel="noopener">Archive (opens in a new tab)</a>

Moderne browsers geven _blank-links de bescherming van noopener: de geopende pagina kan window.opener niet gebruiken om de oorspronkelijke pagina aan te sturen. Door rel="noopener" expliciet te schrijven, houd je ook rekening met ouder gedrag. noreferrer onderdrukt daarnaast informatie over de verwijzende pagina. nofollow geeft een relatie voor zoekmachines aan, geen navigatiebestemming.

Maak afbeeldingslinks en grotere links begrijpelijk

Als een afbeelding de enige inhoud van een link is, levert de alternatieve tekst de naam van de link:

<a href="index.html">
  <img src="logo.png" alt="Harbor Café home page">
</a>

De bruikbare informatie is waar de link naartoe gaat. Als je alleen de kleuren van het logo beschrijft, noem je de bestemming niet.

Een anker kan een grotere kaart met een kop en alinea omvatten, maar mag geen andere link of knop bevatten. Geneste interactieve bedieningselementen geven concurrerende bestemmingen of acties binnen één bedieningselement.

Een link gaat ergens naartoe: een pagina, een bestand of een sectie van een pagina. Een knop voert een actie uit, zoals het openen van een menu. href="#" is een link naar de bovenkant van de pagina; het vervangt geen knop die een actie uitvoert.

Navigatie helpt mensen zowel de gewenste pagina van de website als het benodigde deel van een lange pagina te vinden. HTML kan deze groepen aanduiden, zodat mensen die hulptechnologie gebruiken ze direct kunnen vinden.

Geef belangrijke navigatie een gebied

Gebruik <nav> rond een belangrijke groep navigatielinks. Een websitemenu bevat meestal een ongeordende lijst:

<nav aria-label="Main">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html" aria-current="page">Menu</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Deze opmaakcode hoort op de menupagina: aria-current="page" duidt de link naar de huidige weergegeven pagina aan. Verplaats dat attribuut op de contactpagina naar de link Contact. Markeer de index van een sectie niet als huidige pagina wanneer de lezer een andere pagina binnen die sectie bekijkt.

De lijst maakt het aantal links en hun groepering beschikbaar voor schermlezers. Zonder CSS staan de menu-items onder elkaar. Het <nav>-element zet ze niet automatisch naast elkaar. Een paar niet-samenhangende links in de voettekst hebben meestal geen eigen navigatiegebied nodig.

Houd menu's consistent op alle pagina's

Gebruik op de hele website dezelfde items in dezelfde volgorde en op dezelfde plaats. Als je het menu op een statische HTML-website kopieert, moet je elk exemplaar bijwerken wanneer de inhoud verandert.

Controleer bestemmingen vanuit de werkelijke map van elke pagina. Vanaf recipes/soup.html is de link naar de beginpagina ../index.html; index.html zou naar de receptenindex gaan. De woorden in het menu kunnen gelijk blijven terwijl de relatieve paden veranderen. Een website op een server kan paden vanaf de hoofdmap gebruiken om die afhankelijkheid van de map te voorkomen.

Maak een inhoudsopgave

Een inhoudsopgave linkt naar koppen op de huidige pagina:

<nav aria-label="Contents">
  <ol>
    <li><a href="#planting">Planting</a></li>
    <li><a href="#care">Care</a></li>
  </ol>
</nav>
<h2 id="planting">Planting</h2>

Elk fragment moet overeenkomen met één unieke id. Voeg voor de tweede link een bijbehorende kop met id="care" toe. Wanneer meerdere navigatiegebieden verschillende functies hebben, kunnen gebruikers van een schermlezer ze onderscheiden met labels zoals “Main” en “Contents”.

Een kruimelpad is een andere vorm van navigatie. Het toont een pad zoals “Home › Recepten › Tomatensoep”. Gebruik <nav aria-label="Breadcrumb"> met een geordende lijst en plaats de huidige pagina als laatste. De volgorde geeft het pad door de website weer.

Bied een snelkoppeling langs herhaalde inhoud

Zet een skiplink als eerste in body:

<a href="#main-content">Skip to main content</a>

Het doel is het hoofdinhoudsgebied, geschreven als <main id="main-content">. Toetsenbordgebruikers kunnen die link volgen om een herhaald menu over te slaan. Houd de doel-id uniek en schrijf die precies zoals in het fragment. Een skiplink is al een werkend navigatiehulpmiddel voordat CSS de weergave verandert.

Een afbeelding in HTML blijft een afzonderlijke bron. De pagina vertelt de browser welk bestand die moet ophalen, hoeveel ruimte die moet reserveren en welke tekst de afbeelding kan vervangen.

Voeg een afbeelding toe

<img src="images/harbor.jpg" alt="Fishing boats moored in the harbor at sunset" width="1200" height="800">

<img> is een leeg element en heeft dus geen eindtag. src geeft een bestandsadres, met dezelfde padregels als bij links. alt biedt een tekstalternatief. Als de afbeelding niet verschijnt, controleer dan de map, het gebruik van hoofdletters en kleine letters en de bestandsextensie in src. Een .jpg-pad verwijst niet naar een .png-bestand en .JPG kan op een server verschillen van .jpg.

De bytes van de afbeelding worden niet in dit HTML-element opgeslagen. De browser downloadt het bestand afzonderlijk. Als je de breedte in HTML verandert, wordt het gedownloade bestand niet kleiner.

Kies een formaat dat bij de inhoud past

De huidige grote browsers ondersteunen WebP en AVIF. Kies een afbeelding op basis van de inhoud en de resulterende bestandsgrootte, niet alleen van de extensie. Compressie met verlies verwijdert detail om ruimte te besparen; compressie zonder verlies behoudt de oorspronkelijke afbeeldingsgegevens.

Reserveer de juiste vorm

De attributen width en height zijn hele getallen in CSS-pixels, zonder eenheid in de waarde. Schrijf width="1200", niet width="1200px". Hiermee kan de browser ruimte reserveren voordat het bestand binnenkomt. Dat vermindert lay-outverschuivingen, waarbij tekst verspringt als een afbeelding laadt.

Een afbeelding van 1.200 × 800 heeft een verhouding van 3:2. Zowel width="1200" height="800" als width="600" height="400" behoudt die verhouding. Het tweede paar halveert beide afmetingen. Een paar van 600 × 600 dwingt een vierkant af en vervormt de afbeelding. CSS kan later de weergegeven afmetingen bepalen met behoud van de verhouding.

Verklein het bestand vóór gebruik

Een telefoonfoto van 4.000 × 3.000 heeft 12 miljoen pixels en kan meerdere megabytes innemen. Pas de afmetingen aan tot ongeveer de grootste beoogde weergavegrootte en kies een passende compressie voordat je de foto aan de website toevoegt. Anders downloadt elke lezer het grote bestand, ook als de pagina een kleine miniatuur toont.

Voor afbeeldingen verderop op een lange pagina laat loading="lazy" de browser wachten totdat de bezoeker in de buurt komt. Laat een direct zichtbare banner of hoofdafbeelding normaal laden, omdat uitstel de eerste weergave van de pagina kan vertragen.

Gebruik afbeeldingen die van jou zijn, waarvoor je toestemming hebt of die je volgens hun licentie mag hergebruiken, met de eventueel vereiste naamsvermelding. Bewaar websiteafbeeldingen in je eigen websitemap, zodat wijzigingen in bestanden op een andere website ze niet onbruikbaar maken. Inhoudelijke afbeeldingen horen in HTML; puur decoratieve achtergrondtexturen worden meestal met CSS geregeld.

Alternatieve tekst geeft de informatie die iemand nodig heeft wanneer die een afbeelding niet kan zien. Een bijschrift biedt zichtbare context voor iedereen. Beide keuzes beginnen bij het doel van de afbeelding op deze specifieke pagina.

Beschrijf de bruikbare informatie

Beschrijf bij een foto die lezers helpt een plaats te begrijpen wat van belang is: alt="The café's terrace with six tables overlooking the harbor". Een lange opsomming van elk object is zelden nuttig. Meestal is “Afbeelding van” niet nodig, omdat schermlezers de rol van de afbeelding al aankondigen. Het medium kan wel van belang zijn, zoals in “Aquarel van de haven”.

De context verandert welk alternatief bruikbaar is. Op een adoptiepagina zijn misschien de kenmerken van een hond belangrijk. Op de bezoekerspagina van een park kan dezelfde foto overbrengen dat honden welkom zijn op het grasveld. Vraag je af welke informatie een lezer zou missen als de afbeelding verdween.

Geef bij een grafiek de belangrijkste boodschap en plaats gedetailleerde gegevens in de buurt. Alternatieve tekst kan bijvoorbeeld vermelden dat het aantal websitebezoeken steeg van 1.200 in januari naar 3.000 in maart. De omliggende tekst kan de volledige cijfers geven. Een gefotografeerd bord of een andere afbeelding van tekst heeft de relevante woorden in het tekstalternatief nodig.

Maak onderscheid tussen informatieve, decoratieve en functionele afbeeldingen

Een lege alt-waarde is een bewuste instructie om een decoratieve afbeelding over te slaan. Het attribuut weglaten is iets anders: sommige schermlezers kondigen dan mogelijk de bestandsnaam aan. Gebruik een alt-attribuut op elke afbeelding die je toevoegt.

Een logo dat de enige inhoud is van een link naar de beginpagina, heeft een bruikbare linknaam nodig, zoals “Beginpagina van Havencafé”. De lezer moet de bestemming kennen, niet alleen dat het logo blauwe golven bevat. title is geen vervanging: de knopinfo is niet betrouwbaar beschikbaar voor gebruikers van een toetsenbord, aanraakscherm of schermlezer.

Voeg een bijschrift toe met figure

<figure>
  <img src="images/old-harbor.jpg" alt="Sailing ships crowded along a stone quay" width="1000" height="667">
  <figcaption>The harbor around 1900. Photo: Port Town Archive.</figcaption>
</figure>

<figure> groepeert op zichzelf staande inhoud en het optionele zichtbare bijschrift. <figcaption> is het eerste of laatste kindelement van de figure, met maximaal één bijschrift per figure. Een figuur kan meerdere afbeeldingen, een codevoorbeeld, een citaat of een diagram bevatten; die is niet beperkt tot foto's.

In dit voorbeeld vervangt de alternatieve tekst wat de foto toont. Het bijschrift geeft de datum en bronvermelding. Als je het hele bijschrift naar de alternatieve tekst kopieert, herhaalt een schermlezer die tekst zonder de afbeelding uit te leggen. Een bijschrift dat alleen “Figuur 1” zegt, vervangt evenmin een beschrijving van de afbeelding.

Een pagina bevat gebieden met verschillende functies: een inleiding, navigatie, de unieke inhoud en ondersteunende informatie. Semantische elementen benoemen die functies, zodat de structuur ook buiten de visuele lay-out bruikbaar is.

Benoem elk gebied

Een header voor de website bevat vaak een logo en menu. Een header van een artikel kan daarentegen de kop, auteur en datum bevatten. Een footer kan contactgegevens, verwante links of een auteursrechtvermelding bevatten. Deze elementen duiden rollen aan, geen vaste verzameling woorden.

Houd de hoofdinhoud afzonderlijk

Een normale pagina gebruikt één zichtbare <main>. De inhoud daarvan is uniek voor de pagina, dus herhaalde websitenavigatie hoort erbuiten. Plaats main niet binnen een article, section, aside, header, footer of nav. Een receptenartikel kan binnen main staan, niet andersom.

Een aside is bedoeld voor ondersteunend materiaal dat slechts indirect verband houdt met de rest. Een verzameling links naar verwante recepten kan een aside zijn; een essentiële stap in het recept niet. De naam “aside” plaatst de inhoud niet in een zijkolom. Zonder CSS staan deze gebieden normaal gesproken in bronvolgorde onder elkaar.

<body>
  <header>
    <p>Harbor Café</p>
    <nav>...</nav>
  </header>
  <main>
    <h1>Our Menu</h1>
    <p>Everything is baked fresh each morning.</p>
  </main>
  <aside>
    <h2>Today's special</h2>
    <p>Tomato soup with fresh bread.</p>
  </aside>
  <footer>
    <p>&copy; 2026 Harbor Café</p>
  </footer>
</body>

De unieke inhoud van de menupagina staat in main. De omringende website-informatie blijft erbuiten. De broncode leest van boven naar beneden logisch, voordat kolommen, kleuren of positionering zijn toegevoegd.

Begrijp herkenningspunten

Een herkenningspunt is een gebied dat hulptechnologie als navigatiebestemming beschikbaar kan maken. Main en nav bieden herkenningspunten. Een header op paginaniveau biedt het herkenningspunt voor de paginakop en een footer op paginaniveau het herkenningspunt voor pagina-informatie. Een header of footer die binnen een article, aside, main, nav of section is genest, biedt die herkenningspunten op paginaniveau niet.

Een aside heeft normaal gesproken een aanvullende rol. Een geneste aside kan die rol nog steeds hebben; nesten in een artikel neemt de betekenis op zichzelf niet weg. Gebruik die alleen voor passende ondersteunende inhoud en houd de gebieden van de pagina begrijpelijk.

<search> duidt een gebied aan met bedieningselementen en resultaten voor zoeken of filteren. Het maakt een zoekherkenningspunt en wordt ondersteund in de huidige grote browsers. Het verschilt van nav: inhoud zoeken en een bekende navigatielink kiezen zijn verschillende taken.

Een header mag geen header of footer bevatten en een footer mag geen van beide bevatten. Houd gebieden op paginaniveau gescheiden van de headers en footers die bij afzonderlijke artikelen horen. De juiste namen kiezen levert een bruikbare structuur op, ook wanneer alle gebieden er nu als gewone blokken uitzien.

Een semantische keuze vertelt lezers wat een inhoudsblok is. Vraag je af hoe de inhoud zich tot de pagina verhoudt voordat je een omhullend element kiest; twee boxen die op elkaar lijken, kunnen verschillende elementen nodig hebben.

Controleer of de inhoud op zichzelf staat

Een artikel is een op zichzelf staand geheel dat afzonderlijk kan worden gedeeld of hergebruikt. Een blogbericht, recept, nieuwsartikel of reactie van een lezer kan aan die toets voldoen. Een artikel heeft meestal een eigen kop, maar een kop alleen maakt een blok nog geen artikel.

Een sectie groepeert één thema binnen een groter geheel, normaal gesproken met een kop. “Openingstijden” en “Route” kunnen secties van een contactpagina zijn. Als het blok geen duidelijk thema heeft en je het geen zinvolle kop kunt geven, is section waarschijnlijk de verkeerde keuze.

<article>
  <h2>Growing Basil at Home</h2>
  <section>
    <h3>Planting</h3>
    <p>Choose a sunny place for the pot.</p>
  </section>
  <section>
    <h3>Care</h3>
    <p>Check the soil regularly.</p>
  </section>
</article>

Hier is het artikel één complete kweekhandleiding, terwijl de secties de handleiding in thema's verdelen. Dit voorbeeld past op een pagina waarvan de hoofd-<h1> vóór het artikel staat.

Nesten werkt ook andersom. Een sectie “Laatste nieuws” kan meerdere zelfstandige artikelen bevatten. Reacties kunnen artikelen zijn die zijn genest in het artikel waarop ze reageren. De inhoudelijke relatie bepaalt de nesting.

Houd kopniveaus in het paginaoverzicht

Een sectie begint de kopniveaus niet opnieuw. Als een pagina <h1> voor het onderwerp en <h2> voor een thematische groep gebruikt, gebruik je <h3> voor artikelen binnen die groep. Zet geen nieuwe <h1> in elke geneste sectie. Browsers en schermlezers gebruiken de kopniveaus die je daadwerkelijk schrijft; een omhullende section herstelt geen overgeslagen niveau.

Gebruik neutrale omhullende elementen als geen betekenis past

<div> is een neutraal omhullend blokelement. <span> is een neutraal omhullend element binnen een tekstregel. Ze bieden aangrijpingspunten voor een klasse, een taalattribuut of latere vormgeving zonder een bijzondere rol voor de inhoud aan te geven.

<p>Try <span lang="fr">pain au chocolat</span> today.</p>

De span duidt het Franse tekstgedeelte aan zonder een nieuw blok te beginnen. Als je de hele pagina met algemene div-elementen opbouwt, gaan nuttige rollen verloren. Maar als je elke div in een section verandert, verzin je thema's die er niet zijn.

Kies door te vragen wat het blok doet:

1. Is het de unieke inhoud van de pagina? Gebruik main als buitenste gebied.
2. Is het een belangrijke navigatiegroep? Gebruik nav.
3. Kan het als een compleet geheel op zichzelf staan? Overweeg article.
4. Is het een thematisch onderdeel met een kop? Overweeg section.
5. Is het ondersteunende inhoud die indirect verband houdt met de rest? Overweeg aside.
6. Is het alleen een omhullend element? Gebruik div, of span binnen tekst.

Ook <address> heeft een specifieke betekenis: contactgegevens voor het dichtstbijzijnde artikel of voor de pagina. Een e-maillink in de contactvoettekst van een website kan daarin thuishoren. Een postadres dat als historisch feit of als locatie van een evenement wordt genoemd, wordt niet automatisch contactinformatie omdat het een straatnaam bevat.

Plan de rollen en leesvolgorde voordat je een volledige pagina typt. Een eenvoudig wireframe benoemt de gebieden, terwijl een koppenoverzicht de inhoud daarbinnen benoemt. Samen helpen ze je de elementen en hun nesting te kiezen.

Breng de inhoud in kaart

Zet op een receptenpagina de herhaalde naam van de website en het menu in een header, het recept in main en de website-informatie in een footer. Het recept staat op zichzelf, dus een article past binnen main. Het koppenoverzicht is “Tomatensoep” met daaronder “Ingrediënten” en “Bereiding”.

De pagina hieronder staat in een map recipes/. De beginpagina en de afbeeldingenmap staan één map hoger:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tomato Soup – Harbor Café Recipes</title>
  </head>
  <body>
    <a href="#main-content">Skip to main content</a>
    <header>
      <p><a href="../index.html">Harbor Café</a></p>
      <nav>
        <ul>
          <li><a href="../index.html">Home</a></li>
          <li><a href="index.html">Recipes</a></li>
        </ul>
      </nav>
    </header>
    <main id="main-content">
      <article>
        <h1>Tomato Soup</h1>
        <p>Published <time datetime="2026-03-14">March 14, 2026</time></p>
        <figure>
          <img src="../images/tomato-soup.jpg" alt="A bowl of red tomato soup with a swirl of cream" width="1200" height="800">
          <figcaption>Ready in 30 minutes.</figcaption>
        </figure>
        <h2>Ingredients</h2>
        <ul>
          <li>1 kg ripe tomatoes</li>
          <li>1 onion</li>
          <li>500 ml vegetable stock</li>
        </ul>
        <h2>Method</h2>
        <ol>
          <li>Chop the onion and tomatoes.</li>
          <li>Simmer them in the stock for 20 minutes.</li>
          <li>Blend until smooth.</li>
        </ol>
      </article>
    </main>
    <footer>
      <p>&copy; 2026 Harbor Café</p>
    </footer>
  </body>
</html>

Volg de keuzes in de code

De skiplink staat als eerste in body en verwijst naar de unieke id van het hoofdinhoudsgebied. De header bevat de herhaalde identiteit en navigatie van de website. Het receptenartikel heeft de enige hoofdkop van de pagina, gevolgd door twee gelijkwaardige <h2>-secties.

De ingrediënten gebruiken een ongeordende lijst omdat een andere weergavevolgorde niet verandert wat nodig is. De bereiding gebruikt een geordende lijst omdat de stappen een reeks vormen. De alternatieve tekst van de foto vervangt de afbeelding; het bijschrift geeft context over de bereiding.

../index.html gaat omhoog naar de beginpagina. index.html blijft in de receptenmap. Geen van beide menulinks is gemarkeerd met aria-current="page", omdat de weergegeven pagina het soeprecept is en niet een van beide indexpagina's.

Controleer de voltooide pagina

Lees de broncode van boven naar beneden. De volgorde moet werken voor een toetsenbordgebruiker en een schermlezer voordat CSS iets verplaatst. Controleer de titel, het koppenoverzicht, de enkele zichtbare main, de linkpaden en de tekstalternatieven voor afbeeldingen. Voer het HTML-controleprogramma uit en los de meldingen op. Test daarna de links en afbeeldingen in de browser.

Houd op meerdere pagina's dezelfde herhaalde header, hetzelfde menu en dezelfde footer. Geef elke pagina een eigen titel en hoofdkop en pas relatieve paden aan vanuit de map van die pagina. Kleuren, lettertypen, tussenruimte en kolommen kun je daarna met CSS toevoegen zonder de rollen te veranderen die je al hebt vastgelegd.