Koppen en alinea's

HTML heeft zes koppenniveaus, h1 tot h6, en gebruikers van schermlezers springen vaak van kop naar kop om hun weg op een pagina te vinden.

Een overzicht van koppen

Denk aan een kookboek. Het boek heeft een titel, elk recept heeft een naam en elk recept heeft kleinere delen, zoals Ingrediënten en Bereiding. HTML drukt hetzelfde overzicht uit met zes kopelementen, <h1> tot en met <h6>. <h1> is het hoogste niveau, meestal de titel van de pagina. <h2> markeert de hoofdsecties, <h3> de delen binnen een sectie, enzovoort. De meeste pagina's hebben nooit meer dan drie of vier niveaus nodig.

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

Kies het niveau op structuur, niet op grootte

Browsers tekenen <h1> groot en <h6> klein, en het is verleidelijk een kop te kiezen om zijn grootte. Doe dat niet. Het niveau vertelt software hoe de pagina is georganiseerd. Schermlezers kunnen elke kop op een pagina opsommen en de gebruiker direct naar één laten springen, net als een inhoudsopgave. Zoekmachines gebruiken koppen ook om te begrijpen waar een pagina over gaat. Wil je dat een h2 kleiner oogt, laat het dan een h2 en verander de grootte met CSS.

Twee gewoonten houden het overzicht netjes. Gebruik ten eerste één <h1> per pagina voor de hoofdtitel; MDN raadt dit aan, en het is wat de meeste gebruikers verwachten. Sla ten tweede geen niveaus over als je omlaag gaat: na een h2 komt een h3, geen h5. Terug omhoog gaan is prima, dus na een h3 kan een nieuwe h2 volgen als de volgende sectie begint.

Alinea's

Doorlopende tekst komt in <p>-elementen, één per alinea. Omdat HTML witruimte samenklapt, maakt twee keer op Enter drukken in je bestand geen nieuwe alinea op het scherm; alleen een nieuwe <p> doet dat. Browsers zetten standaard een tussenruimte boven en onder elke alinea, die CSS kan veranderen. Een alinea kan geen andere alinea of kop bevatten, dus als je een afsluitende </p> vergeet, sluit de browser hem voor je zodra het volgende blokelement begint.

Soms maken de regeleinden zelf deel uit van de inhoud, zoals bij een postadres of een gedicht. Gebruik daarvoor <br> aan het eind van elke regel binnen één alinea of <address>. Gebruik geen stapel <br>-elementen om verticale ruimte te maken; dat is werk voor CSS-marges. Om een onderwerpswisseling binnen een sectie aan te geven, zoals een scènewissel in een verhaal, gebruik je <hr>, de thematische scheiding, die browsers als horizontale lijn tekenen.

Citaten

Een langer citaat uit een andere bron komt in <blockquote>, dat browsers laten inspringen. Zet de geciteerde alinea's erin, en je kunt het bronadres geven in het attribuut cite. Een kort citaat binnen een zin gebruikt <q>, en de browser zet er aanhalingstekens omheen. Het element <cite> markeert de titel van een werk, zoals een boek of film.