Weergave

Elk HTML-element heeft een standaardweergave.

Block-level en inline

Er zijn twee grote families.

Een block-level element begint altijd op een nieuwe regel en neemt de volledige beschikbare breedte in.
p, h1, div, ul, li, header, main, section, article, footer ...: het zijn allemaal blokken. Ze stapelen onder elkaar.

Een inline element begint niet op een nieuwe regel en neemt enkel de breedte die het nodig heeft. a, span, strong, em, img, cite ...: die lopen mee in de lijn tekst.

💡 img is inline

Dat verrast bijna iedereen. Een afbeelding gedraagt zich als een woord in een zin, niet als een blok. Daarom staan twee afbeeldingen na elkaar netjes naast elkaar, en twee paragrafen niet.

Maar wat met figure ?

Wat daaruit volgt

Een inline element mag niet zomaar elk ander element als kind hebben

“inline elementen mogen geen block-level elementen bevatten” is nogal kort door de bocht. Dat is vooral een handige historische vuistregel, er zijn uitzonderingen.

In moderne HTML wordt niet simpelweg bepaald of een element inline of block-level is. Elk element heeft regels voor welke inhoud het als kind mag bevatten.

Dit is bijvoorbeeld fout:

<span><p>Een paragraaf.</p></span>

Een <span> mag alleen phrasing content bevatten. Een <p> valt daar niet onder.

Weergave is geen betekenis

Een span en een div verschillen enkel in weergave, niet in betekenis: geen van beide zegt iets. En omgekeerd: je kiest nooit een element omdat het toevallig op een nieuwe regel begint. Daar heb je CSS voor, vanaf les 3.

Oefening: block en inline

Kijk in de playground hieronder welk element hoeveel plaats inneemt. De rode kaders komen van twee regels CSS die je nog niet gezien hebt, ze tekenen enkel de grens van elk element.

Vragen om jezelf te stellen:

1. Welke elementen lopen door tot tegen de rechterrand?
2. Waarom staan de twee links naast elkaar en de twee div's onder elkaar?
3. Hoe breed is de afbeelding?

Antwoord

1. h1, p en de twee div's. Dat zijn de block-level elementen.
2. a is inline, div is block-level. Een block-level element neemt de volle breedte, dus er past niets meer naast.
3. Precies zo breed als de afbeelding zelf. img is inline.

Opzoeken in plaats van onthouden

Je hoeft niet uit het hoofd te kennen welk element in welke familie zit. Je moet weten dat het verschil bestaat, en waar je het opzoekt.

In de HTML cheat sheet staat bij elk element of het block-level of inline is. Voor alles wat daar niet in staat, ga je naar MDN.

Op elke elementpagina van MDN staat een blok Technical summary. Daarin vind je bij Content categories of het element flow content (doorgaans block-level) of phrasing content (doorgaans inline) is, en bij Permitted content wat er precies in mag.

Studietip

Overloop de element reference en maak je eigen lijst: welk element is het, waarvoor gebruik je het, block-level of inline.

Ik raad sommige elementen af: hr, b, i, u, big, center. Zoek op MDN op wat er staat bij elk van die elementen, en vraag daarna aan een AI waarom ik 'tegen' die elementen ben.

Test jezelf daarna op een goed gebouwde site, bijvoorbeeld MDN zelf. Inspecteer wat je ziet: hebben de elementen de tag die je verwacht?