HTML -blok- en inline-elementen
Elk HTML-element heeft een standaardweergavewaarde, afhankelijk van het type element.
Er zijn twee weergavewaarden: block en inline.
Elementen op blokniveau
Een element op blokniveau begint altijd op een nieuwe regel.
Een element op blokniveau neemt altijd de volledige beschikbare breedte in beslag (strekt zich links en rechts zo ver mogelijk uit).
Een element op blokniveau heeft een boven- en een ondermarge, terwijl een inline-element dat niet heeft.
Voorbeeld
<div>Hello World</div>
Dit zijn de elementen op blokniveau in HTML:
Inline-elementen
Een inline element begint niet op een nieuwe regel.
Een inline element neemt slechts zoveel breedte in beslag als nodig is.
Dit is een <span>-element in een alinea.
Voorbeeld
<span>Hello World</span>
Dit zijn de inline-elementen in HTML:
Opmerking: een inline-element kan geen element op blokniveau bevatten!
Het <div>-element
Het <div>element wordt vaak gebruikt als container voor andere HTML-elementen.
Het <div>element heeft geen vereiste attributen, maar style, classen idkomen vaak voor.
Bij gebruik in combinatie met CSS kan het <div>element worden gebruikt om inhoudsblokken te stylen:
Voorbeeld
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Het <span>-element
Het <span>element is een inline container die wordt gebruikt om een deel van een tekst of een deel van een document te markeren.
Het <span>element heeft geen vereiste attributen, maar style, classen idkomen vaak voor.
In combinatie met CSS kan het <span>element worden gebruikt om delen van de tekst op te maken:
Voorbeeld
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
Hoofdstuk samenvatting
- Er zijn twee weergavewaarden: block en inline
- Een element op blokniveau begint altijd op een nieuwe regel en neemt de volledige beschikbare breedte in beslag
- Een inline element begint niet op een nieuwe regel en neemt slechts zoveel breedte in beslag als nodig is
- Het
<div>element is een blokniveau en wordt vaak gebruikt als een container voor andere HTML-elementen - Het
<span>element is een inline container die wordt gebruikt om een deel van een tekst of een deel van een document te markeren
HTML-tags
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .