Tekst in een HTML-document kan op verschillende manieren gestructureerd worden. De meest algemene vorm is het indelen van tekst in paragrafen. Hiervoor kan gebruik gemaakt worden van het P element. Daarnaast zijn er elementen, welke gebruikt kunnen worden, als een specifieke betekenis van een blok tekst benadrukt moet worden zoals vet, cursief, inspringen, ...

Aan het begin van een document, of bijvoorbeeld tussen de verschillende paragrafen, kunnen koppen geplaatst worden met het H1 element. Dit element is beschikbaar in zes verschillende groottes (H1 t.e.m. H6).

Denk aan de hiërarchie in een krantenartikel. Het artikel volgt ook vaste elementen: titel, inleiding, basistekst opgedeeld in alinea's.

Maak onderstaande oefening na, we geven titels mee van groot naar klein. Sla de oefening op als 'oef02Hoofdingen.html'.

Overzicht in lettergroottes:

  • H1 = 24 pixels;
  • H2 = 22 pixels;
  • H3 = 18 pixels;
  • H4 = 16 pixels;
  • H5 = 12 pixels;
  • H6 = 10 pixels;

De teksten worden ingedeeld in alinea's, hiervoor gebruiken we de paragraaf <p> en  De teksten worden ingedeeld in alinea's, hiervoor gebruiken we de paragraaf <p> e</p> tags. Er wordt telkens een witregel boven en onder het alinea element vrijgehouden.

Overzicht tekststructuur elementen:
  • <strong> </strong> of <b> </b> Vetgedrukte tekst
  • <em> </em> of <i> </i> Schuingedrukte tekst = tekst met nadruk
  • <u> </u> Onderstreept
  • <sub> </sub> Subschrift
  • <sup> </sup> Superschrift
  • <hr /> Horizontale lijn
  • <br /> Enkele zinsafbreking = harde enter
  • <s> </s> of <del> </del> Doorgehaald of verwijderde tekst, doorgestreept.
  • <ins> Ingevoegde tekst
  • <mark> </mark> Gemarkeerde tekst
  • <code> </code> Computer code tekst
  • <blockquote> </blockquote> Gedeelte waarin een andere bron wordt geciteerd
  • <q> </q> Korte quote '.....'
  • <abbr> Samenvoegen van een woord
  • <cite> Citaat, verwijzing van een boek, film,... weergave is schuingedrukte
  • <address> Adres gegevens, weergave is ook schuingedrukte.
Hierboven staan de meest gebruikte tags, de volledige lijst vind je terug op http://www.w3schools.com/tags en http://www.html-site.nl/downloads/html5.pdf.

Open de tekst '03OefeningStart' en voeg in de teksten wat extra HTML-structuur codes toe. Let op dat elke tag ook een bijhorende sluittag krijgt. Om eenvoudiger te werken in code mag je zoveel witruimte gebruiken als je wilt. Enters, tabs en spaties hebben geen invloed op de weergave in de browser.

Maak het resultaat na. Voeg ook nog een alinea toe aan het startbestand en kies zelf een paar structuurtags uit bovenstaande lijst die nog niet toegepast werden. Sla de oefening op als 'oef03Tekststructuren.html'.

Samenvatting tekststructuren:

  • HTML elementen worden gebruikt om een webpagina te structuren zoals titels, tussentitels en paragrafen.
  • De elementen roepen extra informatie op om citaten, defenitie's, quotes, ... weer te geven..