HTML cheat sheet

Dit is naslagwerk, geen leerstof om van voor naar achter te lezen. Kom hier terug telkens je twijfelt over welk element je nodig hebt.

De volledige lijst staat op MDN: HTML element reference. Deze pagina is een selectie van wat je in dit vak gebruikt.

Twee afspraken

HTML is inhoud, CSS is opmaak

Alles wat je in de body schrijft, gaat over de inhoud van je document, niet over de weergave. Je kiest elk element in functie van de betekenis van dat stuk pagina.

Daaruit volgt dat elementen die enkel over opmaak gaan er niet in horen: b, i, u, ...

Je website is altijd gevalideerd

Je HTML respecteert de W3C-standaarden. Valideer regelmatig op validator.w3.org.

Je pagina moet ook toegankelijk zijn, voor bezoekers met een beperking, met een andere culturele context, met een ander niveau van digitale geletterdheid, voor zoekrobots en voor genAI.

Controleer regelmatig met axe DevTools.

Patronen

Basisdocument

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projecten | Portfolio van Piet</title>
</head>
<body>
    ...
</body>
</html>

Vergeet de taal van het document niet. Geef elke pagina een eigen title, met het specifieke deel eerst.

Logo met link naar home

<a href="./">
    <img src="./images/logo.png" alt="home">
</a>

href="./" verwijst naar index.html in de huidige map, dus dat pad verandert naargelang waar je zit in je mappenstructuur.

Een link bevat altijd tekst die zegt waar hij je naartoe brengt. Bij een link rond een afbeelding is dat het alt-attribuut.

Navigatiemenu

<nav>
    <ul>
        <li><a href="./">Home</a></li>
        <li><a href="./over-mij/">Over mij</a></li>
        <li><a href="./projecten/">Mijn projecten</a></li>
    </ul>
</nav>

Een verzameling van dingen is een lijst.

Gebruik relatieve paden en laat index.html weg uit de URL:

Pad	Betekenis
./	index.html in de huidige map
../	index.html in de bovenliggende map
../../	twee mappen omhoog
./contact/	index.html in de map contact naast dit bestand
../contact/	index.html in de map contact in de bovenliggende map

Visually hidden

.visually-hidden {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

Dit is CSS, dus bruikbaar vanaf les 3. Je gebruikt het voor inhoud die wel deel uitmaakt van je informatie maar niet zichtbaar hoeft te zijn. Je mag technisch geen kopniveaus overslaan, maar je moet die koppen daarom niet altijd zien 😉.

Meer daarover op css-tricks: comparing various ways to hide things in CSS.

De belangrijkste elementen

De kolom weergave zegt of het element standaard block-level of inline is. Dat is de standaard van de browser, en met CSS kan je die veranderen.

Tekst

Element	Weergave	Waarvoor
<h1> tot <h6>	block	Titel van een deel van de pagina. h1 is de titel van de pagina zelf, h2 tot h6 voor de rest. Sla geen niveau over.
<p>	block	Een paragraaf samenhangende tekst.
<strong>	inline	Nadruk, alsof je het luid zou uitspreken. Niet gewoon om tekst vet te maken.
<em>	inline	Nadruk, alsof je het traag zou uitspreken. Niet gewoon om tekst schuin te maken.
<span>	inline	Generiek inline element, zonder betekenis.
<div>	block	Generiek block-level element, zonder betekenis. Gebruik het zo weinig mogelijk.
<br>	inline	Regeleinde, enkel waar het inhoudelijk moet: adressen, een nieuwe regel binnen een paragraaf. Nooit om witruimte te maken!
<b> <i> <u>	inline	Gebruiken we niet. Overweeg strong of em.

Links en afbeeldingen

Element	Weergave	Waarvoor
<a href="...">	inline	Ankertekst voor een hyperlink.
<img src="..." alt="...">	inline	src is altijd een relatief pad. alt is een tekstuele beschrijving en is verplicht.
<figure>	block	Inhoud met een bijschrift, typisch een afbeelding.
<figcaption>	block	Het bijschrift binnen een figure.

Lijsten

Element	Weergave	Waarvoor
<ul>	block	Ongeordende lijst. Mag uitsluitend li bevatten.
<ol>	block	Geordende lijst, wanneer de volgorde ertoe doet. Mag uitsluitend li bevatten.
<li>	block	Een item in een ul of ol.
<dl> <dt> <dd>	block	Lijst van beschrijvingen: dt is de term, dd de verklaring eronder. Voor een woordenlijst, een legende of een reeks eigenschappen.

Elke opsomming of verzameling komt in aanmerking: een navigatiemenu, een reeks afbeeldingen, een overzicht van je labo's...

Sectioning

Element	Weergave	Waarvoor
<header>	block	Inleidende inhoud of navigatie van een pagina of sectie: logo, titel, menu. Vaak het eerste blok.
<nav>	block	Een groep navigatielinks: hoofdmenu, breadcrumb, paginering.
<main>	block	De belangrijkste inhoud van de pagina. Komt maar één keer voor.
<footer>	block	Afsluitende inhoud: auteursrecht, contactgegevens, extra links.
<section>	block	Thematisch verwante inhoud. Start verplicht met een titel, doorgaans een h2.
<article>	block	Een zelfstandig inhoudsblok dat op zichzelf betekenis heeft: een nieuwsartikel, een blogpost, een forumbericht.
<aside>	block	Inhoud die losjes verbonden is met de hoofdinhoud: een zijbalk, extra informatie, gerelateerde links.

Geavanceerd

Element	Weergave	Waarvoor
<abbr>	inline	Definitie van een afkorting.
<address>	block	De adresgegevens van de eigenaar of auteur van de pagina. Niet voor eender welk adres.
<blockquote>	block	Een uitgebreid citaat.
<q>	inline	Een kort citaat binnen een zin.
<cite>	inline	De bron van een citaat.
<code>	inline	Computercode.
<pre>	block	Behoud van spaties en regeleinden.
<time>	inline	Om aan te geven dat tekst een tijd of datum is.

Werkwijze: sectioning

Dit is de volgorde waarin je best werkt wanneer je een nieuwe pagina opbouwt.

1. Maak de inhoudstafel op papier

Maak een schematisch overzicht van je pagina op papier. Dat helpt je bepalen hoe de onderdelen en titels georganiseerd worden.

De hoofdtitel van de pagina wordt de h1. Alle andere titels vallen daaronder en krijgen in volgorde van belangrijkheid een h2, h3, enzovoort. Elke pagina heeft precies één h1.

Moet een titel niet zichtbaar zijn voor bezoekers, gebruik dan het visually-hidden-patroon hierboven. Dan blijft hij bestaan voor zoekmachines en schermlezers.

2. Bepaal header, main en footer

Bepaal welke inhoud op elke pagina terugkomt.

• header: navigatie, logo, algemene informatie
• main: de belangrijkste inhoud van deze pagina
• footer: links naar social media, juridische informatie, vaste gegevens

3. Vertaal de inhoudstafel naar sections

Elke section heeft een titel van een bepaald niveau, typisch een h2. Start doorgaans een nieuwe section bij elke h2.

Je hoeft niet bij elke nieuwe kop een aparte section te starten. Horen verschillende onderdelen bij elkaar, groepeer ze dan binnen één section. Zoek een evenwicht tussen te veel en te weinig secties.

4. Overweeg een ander element dan section

Soms past een ander element beter:

• nav voor een groep links
• article als de inhoud op zichzelf staat en elders hergebruikt zou kunnen worden
• aside voor inhoud die secundair is aan de hoofdinhoud

Controleer het resultaat

Overloop je pagina met de HeadingsMap add-on. Wat je daar ziet, is wat een zoekmachine en een schermlezer van je pagina maken. Leest dat als een inhoudstafel, dan klopt je structuur.