I was in love with HTML and certain that the whole world was about to learn it, ushering in a new era of DIY media, free expression, peace and democracy and human rights worldwide. That part didn't work out so well, although the kids prefer YouTube to TV, so that's something.
—Jeffrey Zeldman

Tekst voorzien van markup

Enkele belangrijke concepten

Alinea's

Een alinea markeer je met een p element (‘paragraaf’). Het bestaat uit een aantal zinnen die bij elkaar horen. Als je een nieuw idee begint, komt er een nieuw p element. Standaard zullen visuele browsers wat ruimte laten tussen verschillende paragrafen. Dat hoeft niet. Je kan ook kiezen voor het laten inspringen van elke paragraaf, behalve de eerste. Dat is het topic van CSS.

<p>Hypertext Markup Language is een markeertaal. Ze houdt zich bezig 
met het toevoegen van betekenis en structuur aan de tekst. </p>
<p>De vraag hoe iets getoond moet worden is het domein van CSS. 
Dat bekijken we in een later hoofdstuk.</p>

Een veel gemaakte beginnersfout is bij het opmaken van een HTML-pagina toch visueel redeneren. Je denkt dan “ik wil wat ruimte creëren tussen deze blokjes tekst” en niet “deze zin begint een nieuw idee, dus qua betekenis moet ik een nieuwe alinea beginnen”. Dit leidt dan vaak tot een foutief gebruik van een regeleinde d.m.v. een br element. Doe dit dus niet:

<p>Hypertext Markup Language is een markeertaal. Ze houdt zich bezig 
met het toevoegen van betekenis en structuur aan de tekst. <br><br> 
De vraag hoe iets getoond moet worden is het domein van CSS. 
Dat bekijken we in een later hoofdstuk.</p>

Dit element is een block-level element dat echter geen andere block-level elementen mag bevatten. In essentie mag een p element dus alleen tekst (en afbeeldingen) bevatten.

Hoofdingen

Je kan maximaal zes niveau's hoofdingen gebruiken: h1, h2, …, h6

Denk bij hoofdingen dat die een soort van inhoudstafel vormen. Bekijk bvb de inhoudstafel van een bijzonder goed boek over web design (Learning Web Design, Jennifer N. Robins, O'Reilly):

Stel dat we dit boek verspreiden over enkele HTML pagina's. De eerste pagina is “Getting started”, de tweede pagina “HTML for structure” enz. Elke HTML-pagina heeft dan één h1, in dit geval de titel van het boekdeel. De hoofdstukken zouden dan h2 elementen worden. De onderdelen hiervan worden h3 enz. Je slaat m.a.w. geen niveau over.

We herhalen de opmerking uit het vorig stuk. Denk in termen van betekenis, niet in termen van lay-out. Standaard zal een browser een h2 groter maken dan een h3, maar zoals je ondertussen weet is vormgeving niet het domein van HTML.

Bovenstaande inhoudstafel zou dan volgende HTML-structuur kunnen opleveren:

<h1>Part I. Getting Started</h1>
<h2>1. Getting Started in Web Design</h2>
<h3>Where Do I Start?</h3>
<h3>It Takes a Village (Website Creation Roles)</h3>
<h3>Gearing Up for Web Design</h3>
<h3>What You've Learned</h3>
<h3>Test Yourself</h3>
<h2>2. How the Web Works</h2>
<h3>The Internet Versus the Web</h3>
…

Lijsten

Soms heb je geen behoefte aan een alinea met zinnen, maar wil je gewoon een opsomming maken, al dan niet genummerd. Hiervoor beschikken we in HTML over drie elementen:

Ongeordende lijst: ul

Een opsomming van items waarbij de volgorde niet belangrijk is.

Geordende lijst: ol

De volgorde waarin de items opgesomd worden is wel belangrijk.

Beschrijvingslijst: dl

Een lijst met combinaties van woorden met een uitleg, denk bvb aan een woordenboek. Deze lijst van drie elementen die je nu bekijkt is een beschrijvingslijst.

Figure

Je gebruikt een figure element als je een bepaald punt van je inhoud wilt illustreren. Het kan afbeeldingen, een video, een stukje code, tekst, tabel of zo goed als elk soort inhoud bevatten. Bekijk het in elk geval als een deeltje dat op zichzelf kan staan en zonder problemen naar een appendix of zijkant zou kunnen verplaatst worden.

In een figure element komt typisch een figcaption, een bijschrift dat wat uitleg (zoals bvb bronvermelding) kan bevatten. Onderstaande code genereert de foto met bijschrift die je onder de code terug vindt. De volledige inhoud van figcaption is een vermelding van auteur en een link naar de foto en werd letterlijk gekopieerd van de fotosite https://unsplash.com. Via CSS werd het bijschrift rechts uitgelijnd.

<figure>
  <img src="/assets/html/josh-reid-meOFNlRbHmY-unsplash.jpg" 
    alt="Foto landschap IJsland">
  <figcaption>
    Photo by <a href="https://unsplash.com/@joshuadavidreid?utm_source=
    unsplash&utm_medium=referral&utm_content=
    creditCopyText">Josh Reid</a> on 
    <a href="https://unsplash.com/s/photos/iceland?utm_source=
    unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </figcaption>
</figure>

De inhoud van de pagina organiseren

Main

Het main element bevat de hoofdinhoud van de pagina, dus geen navigatie, zijdelingse informatie, footers enz. Je verhoogt de toegankelijkheid van je pagina voor mensen die een screenreader (een stuk software dat een pagina kan voorlezen en kan navigeren in en tussen pagina's) gebruiken. Voor deze bezoekers is het heel erg tijdrovend om telkens op een pagina eerst alle navigatie te laten nalezen. Daarom kunnen zij aan hun screenreader vragen om direct naar het main element te springen. Een pagina mag maar één main hebben.

Headers en footers

Een header element bevat inleidende informatie die typisch aan het begin van een pagina of nieuwe section of article komt. Er is niet echt een vaste lijst van elementen die hierin mogen komen. Vaak bevat een header de naam van een bedrijf, een logo, de titel van de site, de navigatie, …

Analoog bevat een footer informatie die je typisch aan het einde van de pagina of aan het einde van een individueel article of section bevat. Merk trouwens op dat nergens gezegd wordt dat een footer ook effectief onderaan moet staan. Het element kan dingen bevatten zoals juridische informatie, navigatie, auteur, contactinfo enz.

Section en article

Beide elementen zijn erg verwant aan elkaar. Een section gebruik je om verwante inhoud te groeperen. Een section mag een header en een footer hebben, maar dat hoeft niet. Gewoonlijk bevat het wel minstens één titel (h2, h3, …).

Een article doet hetzelfde, met dit verschil: het element moet op zichzelf kunnen staan. Vergelijk het met een artikel in een tijdschrift. Als ik je deze pagina's geef, is dat dan een zinvol geheel dat je kan lezen en begrijpen zonder de rest van het tijdschrift te hebben?

Een section kan meerdere article elementen bevatten, maar omgekeerd kan een article ook meerdere section elementen groeperen.

Aside

Het aside element groepeert inhoud die geen grote band heeft met de hoofdinhoud van de pagina. Typisch gaat het dan over dingen die je ‘in de marge’ (sidebar) zou zetten, maar ook dat hoeft helemaal niet (remember: HTML gaat niet over lay-out, maar wel over structuur). Het is zoals trouwens alle vorige elementen een blok-element.

Nav

Nav duidt een belangrijk navigatieblok aan. Het moet echt wel gaan om een uitgebreidere set van links. Eén link zetten we niet in een nav. Een blinde bezoeker kan haar screenreader de instructie ‘ga naar het nav element’ laten uitvoeren, waardoor ze efficiënt naar de hoofdnavigatie kan gaan in een groot HTML document. Het is dus belangrijk dat je je hoofdnavigatie dan ook in een nav element zet.

Aangezien de navigatie bestaat uit een lijst van links, is het logisch om die dan ook als een lijst te markeren. Zo ziet de header voor de site die je nu bekijkt er als volgt uit:

<header>
  <nav>
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/OPO">OPO</a></li>
      <li><a href="/tools">Tools</a></li>
      <li><a href="/web">Web?</a></li>
      <li><a href="/HTML_00_menu">HTML</a></li>
      <li><a href="/CSS_00_menu">CSS</a></li>
      <li><a href="/JS">JS</a></li>
      <li><a href="/varia">Varia</a></li>
      <li><a href="/links">Links</a></li>
    </ul>
  </nav>
</header>

Enkele tekstelementen (inline)

Inline elementen gedragen zich zoals een letter: zolang er plaats is op de regel komt zo'n element na de laatste letter. Als er te weinig plaats is gaat het naar de volgende regel. MDN heeft een goede inleiding en een overzicht van inline elementen. We geven hier enkele voorbeelden van veelgebruikte inline tekst-elementen. Andere inline elementen zoals img komen later aan bod.

Klemtoon en sterke klemtoon

Je gebruikt em voor klemtoon en strong voor sterke klemtoon. Een voorbeeld: “Denk altijd na over de betekenis van een element in je code.”. De code voor deze zin is:

Denk <strong>altijd</strong> na over de <em>betekenis</em> van element in je code.

Denk niet dat je nu best deze twee elementen gebruikt om woorden cursief of vet te zetten. Dat is eigenlijk naast de kwestie. Denk na over de betekenis: klemtoon en sterke klemtoon. We hadden in deze tekst via CSS ook kunnen kiezen voor een kleurverschil, ander lettertype enz. voor de elementen em en strong. Bedenk ook dit: wat betekenen ‘cursief’ en ‘vet’ voor de screenreader van een blinde gebruiker? Cursief is een visueel kenmerk, terwijl ‘klemtoon’ ook betekenis heeft voor een screenreader (luider of trager spreken bvb.).

Datum en tijd

Het principe van ‘betekenis toevoegen’ trekken we ook door naar tijds- en datumaanduidingen. Er bestaat een HTML-element time, met bijhorend attribuut datetime dat je best gebruikt om extra (voor een computer leesbare) informatie toe te voegen.

Een voorbeeld: de zin “De jaarlijkse Kwis van de Jin van Scouts Haasrode gaat door in het ontmoetingscentrum van Blanden op zaterdag 26 februari 2022 om 19 uur.” heb ik als volgt in de HTML-code van extra betekenis voorzien.

De jaarlijkse Kwis van de Jin van Scouts Haasrode gaat door in het ontmoetingscentrum van Blanden 
op <time datetime="2022-02-26T19:30">zaterdag 26 februari 2022 om 19 uur</time>.

Ik had dit time element ook kunnen weglaten. Je zou visueel geen enkel verschil merken. Maar nu kan een computer vrij eenvoudig alle time-aanduidingen in een document lezen, verwerken en automatisch toevoegen aan een kalender.

Afkortingen

De eerste keer dat je een afkorting gebruikt in een wetenschappelijke of technische tekst is het gebruikelijk om die afkorting voluit te schrijven. Hiervoor bestaat in HTML het element abbr (‘abbreviation’). Een voorbeeldzin: “De organisatie W3C ontwikkelt de HTML standaard.”. Ga eens met je muis over deze twee afkortingen (die standaard door de browser met puntjes onderlijnd worden, maar dat zou ik via CSS kunnen aanpassen).

De organisatie <abbr title="World Wide Web Consortium">W3C</abbr> ontwikkelt 
de <abbr title="HyperText Markup Language">HTML</abbr> standaard.

Generische elementen: div en span

‘Semantische’, betekenisvolle HTML: dat is ons streefdoel. Allemaal goed en wel, maar wat als je gewoon omwille van je lay-out een aantal elementen moet groeperen, maar daar niet direct een betekenis wilt aan toekennen? Hiervoor bestaan twee zogenaamd ‘generische’ elementen: div (blokelement) en span (inline element).

Bekijk je nog eens de flowchart hierboven?. Daar staat div als allerlaatste keuze op. Bij veel developers is het principe van semantische HTML nog niet doorgedrongen. Daarom zie je veel sites die hoofdzakelijk uit div elementen bestaan. Dat werkt ook en visueel zie je niet direct verschil. Je verliest echter wel veel betekenis, die bvb. omwille van toegankelijkheid voor personen met een handicap belangrijk kan zijn.

Div

Dit is een blokelement zonder betekenis. Je gebruikt het om andere elementen te groeperen, bvb. omdat dit voor je layout die je met grid hebt gemaakt, beter uitkomt. Zo zie je geregeld in code dingen in de stijl van div class="container" om een bepaald deel van de pagina binnen bepaalde grenzen te krijgen. Meer daarover bij CSS!

Kijk je eens naar de broncode van http://www.ucll.be? Dat kan bvb door rechts te klikken in Firefox Developer Edition (of een andere browser) en ‘paginabron bekijken’ te kiezen. Bemerkt het hoge aantal div elementen. Dat is typisch voor een site die gegenereerd wordt door een CMS, dus aan de serverkant vanuit een databank. Let je voor de site voor dit OPO een beetje op dat dit element de uitzondering moet zijn?

Span

Het element span is de inline tegenhanger van div. Het groepeert meestal een aantal letters omdat je er iets speciaals in CSS wilt mee doen, zonder dat er een geschikt element voorhanden is.

Ik begin elk topic met een (min of meer toepasselijk) citaat. Bekijk de broncode van deze pagina eens. Zoek in deze code bovenaan naar het element blockquote dat voor een voldoende groot citaat het meest toepasselijke element is. Binnen dit element wil ik omwille van stijlredenen (CSS) toch het citaat zelf inpakken in een element. Voor de eenvoud koos ik voor span class="citaat". Nu ik er trouwens over nadenk, eigenlijk had het element q een betere keuze geweest, want dat element is bedoeld om inline citaten op te maken. Stom, daar had ik dus beter over moeten nadenken …

Maar deze uitleg bij div en span hierboven brengt mij naadloos bij het volgend puntje: class en id attributen.

id en class attributen

HTML elementen hebben attributen. Ik gebruik altijd volgende analogie: het HTML element heeft (meestal) inhoud, de letters bvb die in een p zitten. Je kan een element bekijken als een doos, container voor inhoud. Op de doos kan je echter ook een sticker plakken met extra informatie: dat zijn de attributen. Sommige elementen hebben zelfs geen inhoud (zoals img, zie later). Daar zit de informatie eigenlijk alleen in de attributen!

Twee veelgebruikte attributen zijn class en id. Je mag die bij elk HTML element gebruiken. Het grote verschil is dat een id uniek moet zijn. Per HTML-pagina mag je een welbepaald id maar één keer gebruiken. Een class mag je meerdere keren in hetzelfde HTML-document gebruiken.

Bij CSS komen we hierop zeker terug, omdat deze twee attributen hier een belangrijke rol spelen.

Speciale karakters

Soms kan het nodig zijn om een code te gebruiken voor een speciaal karakter. Men spreekt over ‘HTML entities’. Zo'n code begint altijd met een ampersand (‘&’) eindigt met ‘;’.

Een voorbeeldzin: “De variabele x < 10 & y > 2.”.

De variabele x < 10 & y > 2.

Af en toe wil je niet dat iets (bvb 17 km/h) in het midden gescheiden wordt op het einde van een regel, dus het getal 17 op het einde van de regel en de eenheid (km/h) aan het begin van de volgende regel. Hiervoor bestaat de entity   (non-breaking space).

Je kan entities vaak zowel met een naam als met een nummer geven. Zo kan bvb het symbool voor plusminus (±) maken met ± of met ±

Je vindt op veel plaatsen lange lijsten met HTML-entities, bvb op https://www.freeformatter.com/html-entities.html

Meer info

• Volledige lijst van alle HTML elementen op Mozilla Developer Network
• Graag eens op een andere manier interactief HTML leren? Codecademy heeft een gratis introductie HTML (na registratie).