Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

Voor beginnende HTML-ontwikkelaars is één van de meestgestelde vragen: "Wat is het verschil tussen een DIV en een SPAN.

Het antwoord, dat je dan krijg zegt dan vaak iets over block-level en inline-level elementen, maar daar wordt het niet echt duidelijk van.

Wat je als eerste leert is, dat je op een HTML-pagina alles tussen tags plaatst.

Toon/verberg html5 code

Het gedeelte dat op je pagina zichtbaar is, staat tussen de <body>-tags

Enkele veelgebruikte tags zijn bijv. <p>, <h1>, <strong>, <div> en <span>. En daarmee gaan we eens kijken wat het verschil is tussen block-level en inline-level elementen.

Een block-level element is een element, dat altijd op een nieuwe regel begint en ook altijd die hele regel in beslag neemt, of beter gezegd: de gehele breedte van het element waar het zich in bevindt. Een inline element daarentegen neemt niet meer ruimte in beslag, dan nodig is voor de inhoud die erin staat.

Uiteraard is het mogelijk om deze standaard-instellingen te overschrijven, maar daarover later meer.

Hieronder zie je in een voorbeeld, wat er gebeurt als je een tekst in een div plaats (blauwe achtergrond) of in een span (gele achtergrond).

<div style="background-color: cyan;">Dit is tekst in een div.</div>
<span style="background-color: yellow;">Dit is tekst in een span.</span>
Dit is tekst in een div.
Dit is tekst in een span.

Een DIV en een SPAN zijn daarbij allebei ook betekenisloos. Ze zeggen niets over de inhoud die erin te vinden is. Dit in tegenstelling tot bijv. <p> (paragraaf) of <h1> (kop niveau 1).

Het is mogelijk om geneste elementen te maken. Hiervoor geldt de regel, dat je een DIV en een SPAN in een andere DIV kunt opnemen, een SPAN in een andere SPAN, maar niet een DIV in een SPAN.

Overigens is het ook niet mogeiljk (of zinvol) om bijv. paragrafen of koppen te nesten.

Op deze manier zijn alle HTML-elementen op te delen in block-level en inline-level elementen. Hieronder een overzicht:

Block-level elementen:

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1> t/m <h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <td>, <tfoot>, <tr>, <ul>, <video>.

Inline elementen

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <s>, <pre>, <section>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

Standaardinstellingen overschrijven

Standaard worden block-level elementen dus altijd op een eigen regel getoond, met de volledige ruimte die ze krijgen van hun container.

.

Voor inline elementen kunnen we dit gedrag ook afdwingen, nl. door in de CSS toe te voegen:

display: block;

Andersom is het ook mogelijk om block-level elementen inline te plaatsen:

display: inline;

Tot slot is er ook nog een tussenvorm beschikbaar:

display: inline-block;

display: inline; houdt rekening met de hoogte van de regel waar het element in staat, het is niet mogelijk om de hoogte of breedte van het element zelf in te stellen door middel van bijv. height: 200px; width: 300px;, wel door de tekstgrootte binnen het element aan te passen. Het is wel mogelijk om links en rechts padding of margin in te stellen, maar boven of onder heeft niet de verwachte uitwerking.

display: inline-block; biedt wel de mogelijkheid om breedte en hoogte in te stellen, evenals margin en padding aan alle kanten. Maar daarbij zullen links en rechts van een dergelijk element andere HTML-elementen kunnen voorkomen, mits de breedte van het inline-block element dit toestaat.

display: block; zal altijd de volledig beschikbare breedte opvullen. Indien die volledige breedte benut is, zal de hoogte automatisch worden aangepast met een nieuwe regel. Het is uiteraard toegestaan om de hoogte, breedte, margin en padding aan te passen. Ook wannneer het block element smaller is dan de volledig beschikbare breedte, dan nog zal een volgend HTML-element altijd op de volgende regel worden geplaatst.

Hieronder drie voorbeelden, waarbij in alle gevallen een <div> wordt gebruikt, die in het tweede en derde voorbeeld wordt gewijzigd in resp. een inline-block en een inline element.

Eerst een voorbeeld van een block element:

Een relatief smal blok met een wat langere tekst zal automatisch meerdere regels in beslag gaan nemen.
Hoewel er voldoende ruimte naast het blok hierboven is, komt dit blok toch op een nieuwe regel
<div style="width:200px;border:solid 1px red;">Een relatief smal blok met een wat langere tekst zal automatisch meerdere regels in beslag gaan nemen.</div>
<div style="width:400px;border:solid 1px red;">Hoewel er voldoende ruimte naast het blok hierboven is, komt dit blok toch op een nieuwe regel</div>

Dan een voorbeeld van een inline-block element:

Een relatief smal blok met een wat langere tekst zal automatisch meerdere regels in beslag gaan nemen.
Omdat er voldoende ruimte naast het vorige blok is, komt dit blok niet op een nieuwe regel.
<div style="display:inline-block;width:200px;border:solid 1px green;">Een relatief smal blok met een wat langere tekst zal automatisch meerdere regels in beslag gaan nemen.</div>
<div style="display:inline-block;width:400px;border:solid 1px green;">Omdat er voldoende ruimte naast het vorige blok is, komt dit blok niet op een nieuwe regel.</div>

Tot slot een voorbeeld van een inline element:

Een inline element doet niets met de instelling van de breedte en tekst zal automatisch doorlopen.
Een tweede inline element zal er achteraan gezet worden en desnoods over meerdere regels getoond worden.
<div style="display:inline;width:200px;border:solid 1px blue;">Een inline element doet niets met de instelling van de breedte en tekst zal automatisch doorlopen.</div>
<div style="display:inline;width:400px;border:solid 1px blue;">Een tweede inline element zal er achteraan gezet worden en desnoods over meerdere regels getoond worden.</div>

Een veelgebruikte toepassing is de opbouw van een horizontaal menu. De basis hiervoor is een ongeordende lijst (<ul>), waarvan de list-items normaal gesproken onder elkaar getoond worden, omdat het block-level elementen zijn. Door hierbij display: inline-block; op te geven, kunnen ze mooi naast elkaar gezet worden, terwijl het wel mogelijk is om hoogte en breedte aan te passen.

In het eerste voorbeeld is de 'gewone' lijst te zien. Hierbij heeft de <ul> een paarse achtergrond gekregen en het eerste en derde item een lichtere kleur. Het tweede voorbeeld daaronder laat zien hoe dit met enkele simpele aanpassingen kan worden aangepast:

  • Home
  • Nieuws
  • Forum
  • Contact
Toon/verberg html5 code

Voor degenen die goed hebben opgelet: Je ziet, dat bij <ul> de lettergrootte op 0 wordt gezet en vervolgens bij de <li> weer een hogere waarde krijgt.

Omdat we de list-items achter elkaar plaatsen, gaat de browser ze als woorden beschouwen en geeft daarbij ieder woord wat ruimte. Wanneer de tekstgrootte 0 is, dan wordt die tussenruimte 0. Om te voorkomen, dat ook de tekst van de list-items 0 wordt, moeten we daarvoor weer een hogere waarde opgeven.

Er zijn overigens meer manieren om dit op te lossen. Eén daarvan is door bij alle <li>'s de afsluitende tag </li> weg te laten. Een andere - net zo vreemde - is door geen ruimte (ook geen harde return) te laten tussen de afsluitende </li>-tags en de daaropvolgende <li>-tag.

Een logischere manier is door hier geen inline-block te gebruiken, maar gebruik te maken van float: left.