HTML/Basiscursus/Tekst structureren

HTML biedt de mogelijkheid uw tekst te structureren. Een goed voorbeeld is deze pagina. U ziet namelijk dat de tekst is opgedeeld in verschillende alinea's met koppen.

Koppen

 Zie ook het hx element voor meer informatie.

Met koppen kunt u een titel geven aan het document of een deel ervan. Er zijn koppen op 6 verschillende niveaus die aangeduid worden met h1 tot en met h6 . Daarvan is h1 het hoogste niveau die als eerste wordt gebruikt en h6 het laagste niveau die als laatste wordt gebruikt.

HTML-code: Tekst gestructureerd met koppen

<h1>Het laatste nieuws</h1>
<h2>Inflatie in januari hoger door energieprijzen</h2>
<p>De Nederlandse inflatie is in januari 2005 uitgekomen op 1,5 procent...</p>

Soms wordt een lager niveau kop gebruikt omdat koppen van hogere niveaus een tekst groter weergeven dan wenselijk. Dit is echter een verkeerd gebruik van de niveaus. Men kan dit probleem oplossen door met CSS de weergave van de koppen kleiner te maken of het attribuut style te gebruiken.

Het is sterk af te raden om niveaus over te slaan, zoals in het volgende voorbeeld gebeurt:

HTML-code: Fout gebruik koppen

<h1>Het laatste nieuws</h1>
<h3>Inflatie in januari hoger door energieprijzen</h3>

De HTML 4.01 specificatie geeft echter geen regels tegen het overslaan van niveaus. De ISO-standaard, waarin HTML wordt beschreven, verbiedt het daarentegen.

Alinea's

U kunt uw tekst opdelen in paragrafen met behulp van de p-tag. U doet dit als volgt:

HTML-code: Tekst opgedeeld in paragrafen

<p>Dit is een paragraaf.</p>
<p>Dit is nog een paragraaf.</p>

Standaard zal dit resulteren in een witruimte tussen beide alinea's. Hetzelfde visuele effect is te bereiken door tweemaal een nieuwe regel te beginnen met de br-tag, dit is echter niet gewenst. U kunt de br-tag wel gebruiken om de regel af te breken, bijvoorbeeld bij gedichten.

Merk op dat de "p" in de p-tag staat voor het Engels "paragraph", maar dat dit in het Nederlands beter vertaald kan worden met "alinea" dan met "paragraaf".

Divisies

Met de div-tag kunt u verschillende elementen samenvoegen, op deze manier kunt u verschillende onderdelen van uw pagina apart houden. De div-tag wordt ook vaak gebruikt om bepaalde delen van de pagina een aparte stijl te geven.

HTML-code: Voorbeeld gebruik div-element

<div class="sportvereniging">
  <h1>Schaatsvereniging "De IJsvogels"</h1>
  <p>"De IJsvogels is een schaatsclub in Zeeland die ook skeeler-, en skatelessen organiseert. </p>
  <h2>Gegevens</h2>
  <dl>
    <dt>Naam</dt>
    <dd>De IJsvogels</dd>
    <dt>Sport</dt>
    <dd>Schaatsen</dd>
    <dt>Locatie</dt>
    <dd>Geleen</dd>
  </dl>
</div>

Woorddelen, woorden en woordgroepen

Met het span-element kunt u bepaalde stukken tekst aparte HTML-attributen geven. U kunt er bijvoorbeeld mee aangeven dat het om een andere taal gaat of u kunt de tekst een aparte stijl geven.

HTML-code: Voorbeeld gebruik span-element

<p>"Tot ziens" is in het Duits <span lang="de">"Auf Wiedersehen"</span></p>