HTML Blokken
HTML-Blokken worden gebruikt om tekst, afbeeldingen, mulimedia enz. toe te voegen aan een webpagina.Alle HTML-elementen kunnen worden onderverdeeld in twee categorieën:
- Inline elementen
- Blok level elementen
Inline elementen
Aan de andere kant kunnen inline elementen binnen zinnen optreden en worden normaal weergegeven, zonder regeleinden. Bijvoorbeeld de <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <KBD> en <var> elementen zijn allemaal inline elementen.Blok level elementen
Blok level elementen verschijnen op het scherm alsof ze een line break voor en na hebben. Bijvoorbeeld de <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr / >, <blockquote> en <address> elementen zijn allemaal blok level elementen. Blok level elementen beginnen en eindigen met een nieuwe lijn, wanneer deze wordt weergegeven in een browser.Groeperen van elementen
Er zijn twee belangrijke elementen die we vaak gebruiken voor het groeperen van diverse HTML tags, dat is het <div> element en het <span> element. Beide elementen hebben een opening tag en een afsluitende tag.
<div> ... </div>
<span> ... </span>Het <div> element
Het <div> element is een zeer belangrijk blokelement die een grote rol speelt bij het bundelen van verschillende HTML tags. Deze tag deelt een document in. Met dit blokelement kun je andere blokelementen groeperen. Dit zorgt ervoor dat je pagina overzichtelijker wordt, maar deze tag kan je ook gebruiken om een specifieke style te geven aan bepaalde stukken van je webpagina.
Voorbeeld:
<!-- Voorbeeld: 1 -->
<div style="color:red;">
<h2>Blok: 1</h2>
<p>Hieronder volgt een lijst met groenten</p>
<ul>
<li>Broccoli</li>
<li>Spinazie</li>
<li>Komkommer</li>
<li>Champignons</li>
</ul>
</div>
<!-- Voorbeeld: 2 -->
<div style="background-color:black; color:white; padding:15px;">
<h2>Blok: 2</h2>
<p>Hieronder volgt een lijst met vruchten</p>
<ul>
<li>Bananen</li>
<li>Perzikken</li>
<li>Sinaasappels</li>
<li>Mandarijnen</li>
</ul>
</div>
Het <span> element
Het HTML <span> is een inline element en kan worden gebruikt voor het groeperen van inline elementen in een HTML document. Meestal wordt dit gebruikt om aangepaste stijlen te geven aan je pagina's.
 |
Het verschil tussen de <span> tag en de <div> tag is dat de <span> tag wordt gebruikt met inline-elementen en de <div> tag wordt gebruikt met de blok level elementen. |
