Blokken


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.

VoorbeeldVoorbeeld:
<!-- 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.

VoorbeeldVoorbeeld:
<h1>Dit is <span style="color:red">rood</span></h1>

Tip 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.