De HTML-code van elke webpagina bestaat uit enkele hoofdelementen, die op hun beurt ook weer elementen bevatten. Dit hoofdstuk richt zich op de vraag wat de noodzakelijke ‘hoofd’elementen van een toegankelijke webpagina zijn, en op de volgorde en het gebruik van deze elementen binnen HTML-documenten.

Inhoudsopgave


De DocType-Declaratie

Elke HTML-pagina moet beginnen met een DocType-Declaratie, oftewel Document Type Definition (DTD). Deze komt voor de <html> tag. De DocType geeft de browser informatie over het type HTML waarmee de pagina is gecodeerd. Meer informatie bij richtlijn 6.1:

  • R-pd.6.1: Elk HTML of XHTML document moet beginnen met een geldige DocType Declaratie.

Naar boven

Het HTML element

“Clearly identify changes in the natural language of a document’s text and any text equivalents (e.g., captions).”

In het Nederlands: geef wijzigingen aan met betrekking tot de oorspronkelijke taal van de tekst van een document, inclusief andere tekstuele elementen (zoals bijschriften).

Ondanks het feit dat het specificeren van de oorspronkelijke taal van het document op zich een prioriteit 3-ijkpunt is – en dus optioneel – is het specificeren van wijzigingen met betrekking tot deze oorspronkelijke taal een prioriteit 1-ijkpunt – en daarmee een minimumeis van de WCAG en deze handleiding. Omdat het aangeven van deze wijzigingen afhankelijk is van de specificatie van de oorspronkelijke taal, wordt het specificeren van de oorspronkelijke taal binnen deze handleiding verplicht geacht. Zie ook het hoofdstuk Talen.

Het aangeven van de oorspronkelijke taal

De oorspronkelijke taal van een document kan worden toegevoegd aan het HTML element:

De hoofdtaal van het document op het HTML element

  1. <html lang="nl">

De taal in dit voorbeeld is Nederlands, geschikt voor documenten met een Nederlandse tekst. Bij Engelstalige documenten zou lang="en" kunnen worden gebruikt. Zie het hoofdstuk Talen.

Wanneer markup Language">XHTML wordt gebruikt: de namespace declaratie

Wanneer men XHTML gebruikt, moet men in de <html> tag een XHTML namespace aangeven, door middel van het xmlns (markup Language">XML namespace ) attribuut. Dit vertelt de browser dat het hier om XHTMLmarkup gaat.

Een XML namespace

  1. <html xmlns="http://www.w3.org/1999/xhtml" ...>

In principe kunnen meerdere xmlns attributen gebruikt worden, elk verwijzend naar een andere namespace . Op die manier kunnen meerderemarkup-talen in het document worden gebruikt. Een voorbeeld van zo'nmarkup-taal is MathML, bedoeld voor het aangeven van wiskundige formules. In de praktijk zal het echter zelden voorkomen dat in één enkel document meerdere xmlns attributen worden gebruikt.

Net als in HTML 4.01 moet in XHTML-documenten worden aangegeven wat de basistaal van de pagina is, door middel van het lang attribuut. XHTML heeft echter een eigen attribuut voor taalvariaties: xml:lang.

Een HTML-tag compleet met lang en xmlns attributen

Voor uitwisselbaarheid met browsers die geen XHTML begrijpen, gebruik beide attributen met dezelfde waarde:

  1. <html lang="nl" xml:lang="nl" ...>

Bij elkaar zou de <html> tag er volgens de regels van XHTML 1.0 er dus als volgt uitzien:

  1. <html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">

Naar boven

Het head element bevat belangrijke informatie die betrekking heeft op de inhoud in het body element, zoals title (paginatitel, het gebruik hiervan is verplicht). Andere toevoegingen aan de <head></head> sectie zijn:

Naar boven

Het body element

De daadwerkelijke inhoud van een webpagina bevindt zich binnen het body element.

Volgorde van belangrijkheid

Bij het opzetten van de inhoud van een pagina is het aan te raden om deze in volgorde van belangrijkheid in de HTML te zetten. Dat wil zeggen: belangrijkste inhoud eerst, en de minst belangrijke inhoud (zoals navigatie) onderaan. Zie het voorbeeld. Let wel: het plaatsen van inhoud op de weergegeven pagina wordt geregeld via CSS; de visuele indeling hoeft niet dezelfde te zijn als de structuur. Het structureren van de inhoud op deze manier verhoogt de vindbaarheid, toegankelijkheid en bruikbaarheid van de informatie. Lees ook over het overslaan van lange navigatielijsten. Zie ook R-pd.6.2: Zet de inhoud van de pagina in de HTML broncode op volgorde van belangrijkheid.

Naar boven

Voorbeeld: een ‘röntgenfoto’ van een webpagina

Hieronder volgt een voorbeeld van een goed-gestructureerd HTML-document. De code is met opzet eenvoudig gehouden om het ‘volgorde van belangrijkheid’ principe te illustreren.

Een goed gestructureerd HTML-document

  1. <code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
  5.   <head>
  6.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7.     <title>Voorbeelddocument</title>
  8.     <link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
  9.     <link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
  10.   </head>
  11.   <body>
  12.     <div id="belangrijksteinhoud">
  13.       <h1>Belangrijkste kopregel</h1>
  14.       <p>Dit is het belangrijkste alinea. Vandaar de plaats bovenaan de pagina.</p>
  15.       <h2>Een sub-onderwerp</h2>
  16.       <p>Eigenlijk is dit een tweede alinea van de belangrijkste inhoud, met een subkopje erboven.</p>
  17.       <h2>Nog een onderwerp</h2>
  18.       <p>Iets langere teksten bevatten soms meerdere subkopjes. Dit is het einde van de belangrijkste inhoud</p>
  19.     </div>
  20.     <div id="ietsminderbelangrijk">
  21.       <h3>Minder belangrijke kopregel</h3>
  22.       <p>Dit is een voorbeeld van minder belangrijke inhoud. U kunt zich voorstellen dat dit een nieuwsblokje zou kunnen zijn. Door dit stukje tekst te stijlen via CSS, is het mogelijk om te bepalen waar het blokje komt te staan in de visuele weergave van de pagina in een browser.</p>
  23.     </div>
  24.     <div id="navigatie">
  25.       <h2>Navigatie</h2>
  26.       <ul>
  27.         <li>Menukeuze 1</li>
  28.         <li>Menukeuze 2</li>
  29.         <li>Menukeuze 3</li>
  30.       </ul>
  31.     </div>
  32.     <p id="minstbelangrijk">Hier komt bijvoorbeeld een footer met copyright informatie.</p>
  33.   </body>
  34. </html></code>

Naar boven

Links en referenties

Naar boven