BLOK-ELEMENTEN

Inleiding

Blok-elementen zijn de div-tag, p-tag, h1-tag, h2-tag etcetera, ul-tag en ol-tag met de li-tag, dl-tag met de dt-tag en dd-tag, pre-tag, table-tag en form-tag.

Getoond wordt welke blok-elementen binnen welke blok-elementen wel of niet gebruikt kunnen worden.

Voorbeeld 1

Een br-tag (inline-element) binnen een p-tag is toegestaan.

<p>regel 1<br />
regel 2</p>

Maar een p-tag binnen een p-tag is niet toegestaan.

<p>alinea 1

<p>alinea 2</p></p>

Voorbeeld 2

Een table-tag binnen een p-tag is niet toegestaan ( <p><table>tabel</table></p> ).

Een tabel staat namelijk net als de p-tag op zichzelf. Zie het voorbeeld hieronder:

En zo is een p-tag binnen een th-tag en td-tag (op zijn beurt weer binnen de table-tag) ook niet toegestaan.

Voorbeeld 3

Een p-tag, hx-tag en br-tag zijn in een li-tag toegestaan, maar een p-tag etc. in een ul-tag niet. Een ul-tag binnen een p-tag is evenmin toegestaan.

• <p>Koffie</p>

• <h4>Thee</h4>

• Melk<br />
  Karnemelk

Voorbeeld 4

Een dl-tag (de dl-tag bevat een dt-tag en dd-tag) binnen een p-tag is niet toegestaan ( <p><dl>definition list</dl></p> ).

<dt>Koffie</dt>

<dd>Zwarte warme drank</dd>

<dt>Melk</dt>

<dd>Witte koude drank</dd>

Een p-tag binnen een dd-tag is daarentegen wel toegestaan (overigens weer niet in de dt-tag).

<dt><p>Koffie</p></dt>

<dd><p>Zwarte warme drank</p></dd>

<dt><p>Melk</p></dt>

<dd><p>Witte koude drank</p></dd>

Voorbeeld 5

De hx-tag (h1-tag t/m h6-tag) mag niet in een p-tag staan, en omgekeerd ook niet.

h1-tag

h2-tag

h3-tag

h4-tag

h5-tag

h6-tag

Voorbeeld 6

De form-tag mag niet binnen een p-tag staan; maar omgekeerd is het wel toegestaan: <form><p><input ... /></p></form>).

Voorbeeld 7

Een br-tag binnen de pre-tag is toegestaan (<pre> ... <br /> ... </pre>), een p-tag niet. Een pre-tag binnen een p-tag evenmin.

<pre>Dit is
een tekst met de pre-tag.<br />

Hier wordt      extra ruimte met spaties
en een br-tag bewerkstelligd.</pre>

Opmerking

De div-tag is het enige blok-element dat alle andere blok-elementen binnen de eigen grenzen toestaat.
Om die reden verdient het de voorkeur om altijd de div-tag te gebruiken voor het gemeenschappelijk opmaken en plaatsen op een specifieke plaats van alle soort content (tekst, afbeeldingen, formulieren) als geheel binnen de webpagina.

Joost De WebMaker
2002-2024 © Joost van Meeteren

Laatste update website: vrijdag 20 december 2024

Deze website past cookies toe voor optimaal gebruik van dit platform | bron | Akkoord