Teksten

Een website heeft toch eigenlijk altijd wel pagina's met tekst. In dit hoofdstuk gaan we in op hoe teksten worden opgenomen in HTML-documenten, waarbij je veel dingen zult herkennen van je tekstverwerker. In dit hoofdstuk komen alinea's, koppen, opsommingen aan bod en leer je en hoe je omgaat met vetgedrukte, schuingedrukte en onderstreepte tekst.

Alinea's

Voor alinea's bestaat het element <p> (voor Paragraph, wat het Engelse woord is voor alinea; niet te verwarren met een paragraaf, wat in het Engels weer een section is. Als je het netjes wil doen, moet je iedere alinea in zijn eigen <p>-element zetten, waarvoor een begin- en eindtag bestaat. Het voordeel daarvan is dat geen lege regels tussen iedere alinea hoeft te zetten, want dat doet de browser dan vanzelf tussen de verschillende <p>-elementen. Omdat het invoegen van een nieuwe regel in HTML niet hetzelfde is als simpelweg op de Enter-toets drukken, is gebruik van <p> zeker het overwegen waard. Maar hierover meer in de volgende paragraaf (nee, het is niet heel handig dat paragraaf en paragraph niet hetzelfde zijn...). In een voorbeeld ziet het gebruik van <p> er als volgt uit voor een willekeurige tekst met drie alinea's:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis neque mauris, non mollis tellus aliquet lobortis. Vivamus a semper felis. Mauris mauris nisi, feugiat at leo sit amet, interdum consectetur odio. Morbi varius sapien lacus, at lacinia ipsum semper sit amet. Aenean porta, nisl sit amet congue laoreet, magna nunc suscipit est, id dapibus odio metus at ex.</p>
<p>Maecenas aliquam mauris non tortor iaculis, quis ullamcorper magna ultricies. Morbi ac erat sed mauris consectetur dapibus. Cras vitae condimentum sapien, eget condimentum metus. Integer a arcu vitae sapien ornare ultricies. Donec ac elit hendrerit, dictum magna vel, aliquam eros. In fringilla euismod sodales. Nulla faucibus porttitor consequat. Aliquam vitae tellus ac sem pulvinar tempor at eget lorem.</p>
<p>Cras ipsum arcu, scelerisque eu nisl molestie, pharetra mattis erat. Sed euismod lorem odio, nec gravida erat consequat at. Suspendisse cursus elit at sem pellentesque efficitur. Nullam gravida, mi ac vestibulum tincidunt, urna sapien rhoncus odio, eget pretium ligula purus ac felis. In sollicitudin, nisi pulvinar pulvinar consequat, nunc augue fermentum dolor, quis semper ipsum libero eget nunc.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis neque mauris, non mollis tellus aliquet lobortis. Vivamus a semper felis. Mauris mauris nisi, feugiat at leo sit amet, interdum consectetur odio. Morbi varius sapien lacus, at lacinia ipsum semper sit amet. Aenean porta, nisl sit amet congue laoreet, magna nunc suscipit est, id dapibus odio metus at ex.

Maecenas aliquam mauris non tortor iaculis, quis ullamcorper magna ultricies. Morbi ac erat sed mauris consectetur dapibus. Cras vitae condimentum sapien, eget condimentum metus. Integer a arcu vitae sapien ornare ultricies. Donec ac elit hendrerit, dictum magna vel, aliquam eros. In fringilla euismod sodales. Nulla faucibus porttitor consequat. Aliquam vitae tellus ac sem pulvinar tempor at eget lorem.

Cras ipsum arcu, scelerisque eu nisl molestie, pharetra mattis erat. Sed euismod lorem odio, nec gravida erat consequat at. Suspendisse cursus elit at sem pellentesque efficitur. Nullam gravida, mi ac vestibulum tincidunt, urna sapien rhoncus odio, eget pretium ligula purus ac felis. In sollicitudin, nisi pulvinar pulvinar consequat, nunc augue fermentum dolor, quis semper ipsum libero eget nunc.

Nieuwe regel

Als je in je tekstverwerker op Enter drukt, ga je op de volgende regel verder met typen. Wanneer je dat tijdens het schrijven van je HTML-document doet, gaat de cursor ook naar de volgende regel, maar dan wel in de broncode van je webpagina! Wanneer je het resultaat vervolgens in je browser bekijkt, zie je die nieuwe regel nergens meer terug. Kijk maar eens naar het volgende voorbeeld:

<p>Lorem
ipsum
dolor
sit
amet</p>

Lorem ipsum dolor sit amet

In de browserweergave staan de vijf woorden allemaal achter elkaar. Maar hoe krijg je ze dan onder elkaar? Ieder woord in z'n eigen <p> zou kunnen, maar dan krijg je een verticale witruimte tussen ieder woord. Nee, om in een tekst op de volgende regel verder te gaan, gebruik je het element <br> (Break). Dit element kent geen eindtag en geen attributen. Dus om de vijf woorden ieder op een eigen regel te krijgen, gebruik je <br> als volgt:

<p>Lorem<br>
ipsum<br>
dolor<br>
sit<br>
amet</p>

Lorem
ipsum
dolor
sit
amet

En als je het compact wilt houden, mag je het in de HTML zelf op één regel zetten! Het volgende voorbeeld levert exact hetzelfde resultaat wanneer weergegeve in de browser:

<p>Lorem<br>ipsum<br>dolor<br>sit<br>amet</p>

Lorem
ipsum
dolor
sit
amet

Koppen

Als je langere teksten hebt, wil je waarschijnlijk met tussenkopjes werken. Hiervoor zijn de elementen <h1> t/m <h6> beschikbaar (de h is afgeleid van het Engelse woord Heading). De zes elementen hebben ieder een eindtag en zijn te vergelijken met Kop 1 t/m Kop 6 die je kent uit je tekstverwerker. <h1> is bedoeld voor de grootste kop en moet eigenlijk maar één keer per pagina voorkomen en dient daarmee als een titelkop. De overige niveau's <h2>, <h3>, <h4>, <h5> en <h6> mogen elk vaker op een pagina voorkomen. Iedere kop wordt automatisch door de browser opgemaakt:

<h1>Kop 1</h1>
<h2>Kop 2</h2>
<h3>Kop 3</h3>
<h4>Kop 4</h4>
<h5>Kop 5</h5>
<h6>Kop 6</h6>

Kop 1

Kop 2

Kop 3

Kop 4

Kop 5
Kop 6

In praktisch gebruik volgt na iedere kop altijd één of meerdere alinea's:

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis neque mauris, non mollis tellus aliquet lobortis. Vivamus a semper felis. Mauris mauris nisi, feugiat at leo sit amet, interdum consectetur odio. Morbi varius sapien lacus, at lacinia ipsum semper sit amet. Aenean porta, nisl sit amet congue laoreet, magna nunc suscipit est, id dapibus odio metus at ex.</p>

<h2>Maecenas aliquam et Cras ipsum</h2>
<p>Maecenas aliquam mauris non tortor iaculis, quis ullamcorper magna ultricies. Morbi ac erat sed mauris consectetur dapibus. Cras vitae condimentum sapien, eget condimentum metus. Integer a arcu vitae sapien ornare ultricies. Donec ac elit hendrerit, dictum magna vel, aliquam eros. In fringilla euismod sodales. Nulla faucibus porttitor consequat. Aliquam vitae tellus ac sem pulvinar tempor at eget lorem.</p>
<p>Cras ipsum arcu, scelerisque eu nisl molestie, pharetra mattis erat. Sed euismod lorem odio, nec gravida erat consequat at. Suspendisse cursus elit at sem pellentesque efficitur. Nullam gravida, mi ac vestibulum tincidunt, urna sapien rhoncus odio, eget pretium ligula purus ac felis. In sollicitudin, nisi pulvinar pulvinar consequat, nunc augue fermentum dolor, quis semper ipsum libero eget nunc.</p>

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis neque mauris, non mollis tellus aliquet lobortis. Vivamus a semper felis. Mauris mauris nisi, feugiat at leo sit amet, interdum consectetur odio. Morbi varius sapien lacus, at lacinia ipsum semper sit amet. Aenean porta, nisl sit amet congue laoreet, magna nunc suscipit est, id dapibus odio metus at ex.

Maecenas aliquam et Cras ipsum

Maecenas aliquam mauris non tortor iaculis, quis ullamcorper magna ultricies. Morbi ac erat sed mauris consectetur dapibus. Cras vitae condimentum sapien, eget condimentum metus. Integer a arcu vitae sapien ornare ultricies. Donec ac elit hendrerit, dictum magna vel, aliquam eros. In fringilla euismod sodales. Nulla faucibus porttitor consequat. Aliquam vitae tellus ac sem pulvinar tempor at eget lorem.

Cras ipsum arcu, scelerisque eu nisl molestie, pharetra mattis erat. Sed euismod lorem odio, nec gravida erat consequat at. Suspendisse cursus elit at sem pellentesque efficitur. Nullam gravida, mi ac vestibulum tincidunt, urna sapien rhoncus odio, eget pretium ligula purus ac felis. In sollicitudin, nisi pulvinar pulvinar consequat, nunc augue fermentum dolor, quis semper ipsum libero eget nunc.

(Als je een kop te groot vindt, los dit dan niet op door een kop van een lager niveau te gebruiken, maar pas de stijling van de kop aan via CSS. Hierover meer wanneer we in gaan op CSS.)

Vetgedrukte tekst

HTML kent twee verschillende elementen die er voor zorgen dat een tekst vetgedrukt weergegeven wordt. Welke je gebruik, is afhankelijk van de reden waarom je de tekst vetgedrukt wilt weergeven. In de meeste gevallen kom je uit op <strong>, dat staat voor Strong Importance. Het element kent een eindtag en wordt gebruikt om tekstgedeeltes te markeren die belangrijk zijn, zoals bijvoorbeeld waarschuwingen. Wil je echter een woord of tekstgedeelte laten opvallen, zonder dat deze tekst belangrijker is dan de tekst er rond om heen, dan gebruik je hiervoor het element <b>. Ook dit element heeft een eindtag en staat voor Bring Attention To.

<p><b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit. Nullam mattis neque mauris, non mollis tellus aliquet lobortis. Vivamus a semper felis. Mauris mauris nisi, feugiat at leo sit amet, interdum consectetur odio. <strong>Morbi varius sapien lacus, at lacinia ipsum semper sit amet.</strong> Aenean porta, nisl sit amet congue laoreet, magna nunc suscipit est, id dapibus odio metus at ex.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis neque mauris, non mollis tellus aliquet lobortis. Vivamus a semper felis. Mauris mauris nisi, feugiat at leo sit amet, interdum consectetur odio. Morbi varius sapien lacus, at lacinia ipsum semper sit amet. Aenean porta, nisl sit amet congue laoreet, magna nunc suscipit est, id dapibus odio metus at ex.

Schuingedrukte tekst

En jawel, er zijn ook weer twee elementen die resulteren in schuingedrukte tekst. Ook hier is het gebruik weer afhankelijk van waarom je iets schuingedrukt wil hebben. Als je nadruk (Emphasis) op een woord of tekstgedeelte wilt leggen, gebruik je hiervoor het element <em>. Wanneer het echter gaat om een technische term of woord in een vreemde taal, gebruik je het element <i>.

<p>HTML is opgebouwd uit <i>elementen</i>, dat is iets wat je <em>niet</em> moet vergeten!</p>

HTML is opgebouwd uit elementen, dat is iets wat je niet moet vergeten!

Onderstreepte tekst

Eigenlijk moet je geen onderstreepte tekst willen gebruiken op een website. Hyperlinks (waarover meer in het volgende hoofdstuk) zijn namelijk standaard onderstreept en daar is zo'n beetje de hele wereld inmiddels aan gewend. Als je dan andere teksten (die geen hyperlinks zijn) ook gaat onderstrepen, dan denkt iedereen dat het iets is om op te klikken. Maar dat werkt dan vervolgens niet. Mocht je in een tekst ergens nadruk op willen leggen, gebruik dan liever de verschillende mogelijkheden voor vetgedrukte of schuingedrukte tekst.

Afijn, dat gezegd hebbende is er wel een element dat er voor zorgt dat tekst onderstreept wordt weergegeven. Dit is het element <u>, wat in HTML 5 staat voor Unarticulated Annotation. Dit vertaalt zich als "onuitgesproken aantekening",Wat dat dan ook moge betekenen. Het element is bedoeld om bijvoorbeeld spelfouten aan te geven. In de simpelste vorm wordt dit door de browser weergegeven als ondersteepte tekst, maar het element is bedoeld om met CSS opgemaakt te worden om in geval van een spelfout de streep te vervangen door een rood kringeltje wat je kent uit je tekstverwerker.

Opsommingen

Net als in je tekstverwerker kun je in HTML ook een lijst met opsommingstekens of een genummerde lijst maken. Voor een lijst met opsommingstekens bestaat het element <ul> (Unordered List) en voor een genummerde lijst hebben we het element <ol> (Ordered List). Binnen deze elementen wordt vervolgens het element <li> (List Item) gebruikt voor ieder afzonderlijk onderdeel in de lijst. Een lijst met opsommingstekens ziet er dan als volgt uit:

<ul>
    <li>Appel</li>
    <li>Banaan</li>
    <li>Citroen</li>
</ul>
  • Appel
  • Banaan
  • Citroen

En een genummerde lijst zoals in onderstaand voorbeeld. Let op het subtiele verschil, alleen <ul> is vervangen door <ol>. Zo kun je als je je vergist hebt heel snel een genummerde lijst in een lijst met opsommingstekens wijzigen.

<ol>
    <li>Appel</li>
    <li>Banaan</li>
    <li>Citroen</li>
</ol>
  1. Appel
  2. Banaan
  3. Citroen

Een <ol> of <ul> wordt nooit opgenomen in een alinea <p>, maar komt er als ware in de plaats van.

Opsommingen met meerdere niveau's

En net als in je tekstverwerker kun je lijsten met hierin meerdere niveau's maken. Dit doe je door een nieuwe lijst (<ol> of <ul>) toe te voegen aan een <li> van een bestaande lijst. Je kunt nummers en opsommingstekens zo je wil door elkaar gebruiken:

<ol>
    <li>Fruit
        <ul>
            <li>Appel</li>
            <li>Banaan</li>
            <li>Citroen</li>
        </ul>
    </li>
    <li>Groente
        <ul>
            <li>Asperge</li>
            <li>Broccoli</li>
            <li>Courgette</li>
        </ul>
    </li>
</ol>
  1. Fruit
    • Appel
    • Banaan
    • Citroen
  2. Groente
    • Asperge
    • Broccoli
    • Courgette

Samengevat