BLOK-ELEMENTEN

opties

Joost van Meeteren


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:

cel 1 cel 2
cel 3 cel 4

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

<th><p>titel 1</p></th> <th><p>titel 2</p></th>
<td><p>cel 1</p></td> <td><p>cel 2</p></td>
<td><p>cel 3</p></td> <td><p>cel 4</p></td>

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.


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 6 december 2024