H9 - Div's

De bestaande semantische onderdelen blijven staan. Een technische binnenwrapper begrenst de inhoudsbreedte. Float en clear oefen je apart: ze zijn geen bouwstenen voor de uiteindelijke hoofdindeling.

Een <div> is een algemene container. div komt van division. Dat betekent verdeling, gebied of stukje. Je maakt met een div dus een stukje op je website waarin je onderdelen bij elkaar zet.

• Een div is een algemeen stukje van je pagina.
• Een div betekent zelf niets inhoudelijks.
• Een div is vooral handig als doosje voor CSS.
• Een div heeft een openingstag en een sluit-tag.
• In een div kun je andere HTML-elementen zetten.
• Gebruik een div vooral als er geen betere HTML-tag voor bestaat.

<div class="kaart">
    <h2>Nieuws</h2>
    <p>Hier staat een kort bericht.</p>
</div>

De class kaart maakt duidelijk welke rol dit doosje heeft. Zonder CSS ziet een div er meestal niet bijzonder uit.

In H1 heb je semantische HTML5-tags gezien. Die tags vertellen iets over de betekenis van de inhoud. Een div doet dat niet.

• <header> is duidelijker dan <div id="bovenkant">.
• <nav> is duidelijker dan <div id="menu">.
• <main> is duidelijker dan <div id="inhoud">.
• <article> is duidelijker dan <div class="bericht"> als het echt een zelfstandig bericht is.
• <footer> is duidelijker dan <div id="onderkant">.

<!-- Minder duidelijk -->
<div id="menu">
    <a href="index.html">Home</a>
    <a href="contact.html">Contact</a>
</div>

<!-- Duidelijker -->
<nav>
    <a href="index.html">Home</a>
    <a href="contact.html">Contact</a>
</nav>

Gebruik dus eerst de HTML-tag die het beste past bij de inhoud. Gebruik pas een div als je alleen een extra doosje nodig hebt voor vormgeving of layout.

Een div is nog steeds nuttig. Je gebruikt hem vooral als je een extra container nodig hebt, maar geen extra betekenis wilt toevoegen.

• Om meerdere elementen samen te groeperen voor CSS.
• Om een wrapper te maken rond een deel van de pagina.
• Om een achtergrond, rand, padding of layout-regel op een groep toe te passen.
• Om een technisch hulpdoosje te maken voor vormgeving.

<main>
    <div class="pagina-breedte">
        <h1>Mijn website</h1>
        <p>Deze inhoud staat in een gecentreerde wrapper.</p>
    </div>
</main>

.pagina-breedte {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

Hier is <main> de semantische tag voor de hoofdinhoud. De div is alleen een hulpmiddel om de breedte en ruimte te regelen.

Vroeger werden websites vaak opgebouwd met veel divs en creatieve id-namen. Dat werkt technisch, maar de HTML wordt snel onduidelijk.

<!-- Niet ideaal -->
<div id="bovenblok">
    <h1>Mijn website</h1>
</div>

<div id="linkerding">
    <p>Nieuws</p>
</div>

<div id="rechterding">
    <p>Contact</p>
</div>

Beter is om eerst semantische tags te kiezen en daarna classes te gebruiken voor herbruikbare vormgeving.

<header>
    <h1>Mijn website</h1>
</header>

<main>
    <section class="kaart">
        <h2>Nieuws</h2>
        <p>Laatste berichten.</p>
    </section>

    <section class="kaart">
        <h2>Contact</h2>
        <p>Neem contact op.</p>
    </section>
</main>

• Gebruik geen id's als gewone layoutnamen.
• Gebruik classes voor onderdelen die vaker kunnen voorkomen.
• Gebruik semantische tags voor betekenis.
• Gebruik divs alleen als extra technische container.

Met float kun je een element naar links of rechts laten zweven. Tekst en andere inline inhoud kunnen er dan omheen lopen.

<img class="foto-links" src="img/project-01.webp" alt="Een foto bij het artikel">

<p>
    Deze tekst loopt langs de afbeelding. Dat kan handig zijn bij een artikel waarin een kleine
    afbeelding naast de tekst staat.
</p>

.foto-links {
    float: left;
    width: 200px;
    margin-right: 20px;
    margin-bottom: 12px;
}

• float: left zet het element links.
• float: right zet het element rechts.
• Margin zorgt voor ruimte tussen de afbeelding en de tekst.
• Float is vooral logisch voor tekst die om een afbeelding heen loopt.

Float werd vroeger veel gebruikt om complete websites in kolommen te zetten. Tegenwoordig gebruik je daarvoor meestal flexbox of grid.

.zijbalk {
    float: left;
    width: 30%;
}

.inhoud {
    float: right;
    width: 65%;
}

Dit soort layout met float kom je nog tegen in oude websites, maar het is minder prettig om mee te werken dan moderne CSS-layout.

• Float haalt een element deels uit de normale documentstroom.
• Daardoor kan de hoogte van een ouder-element onverwacht lijken.
• Je moet vaak extra regels gebruiken om floats weer te stoppen.
• Voor nieuwe layouts leer je straks flexbox en grid.

Als een element niet naast een gefloat element mag komen, gebruik je clear.

<img class="foto-links" src="img/project-01.webp" alt="Een foto bij het artikel">

<p>Deze tekst loopt langs de afbeelding.</p>

<h2 class="nieuwe-sectie">Nieuwe sectie</h2>

.foto-links {
    float: left;
    width: 200px;
    margin-right: 20px;
}

.nieuwe-sectie {
    clear: both;
}

• clear: left stopt naast links gefloate elementen.
• clear: right stopt naast rechts gefloate elementen.
• clear: both stopt naast beide kanten.
• Daarna begint het element onder de float.

Kies eerst de tag die inhoudelijk klopt. Gebruik daarna pas een div als extra hulpmiddel.

• Gebruik <section> voor een duidelijk onderdeel van een pagina.
• Gebruik <article> voor inhoud die zelfstandig kan bestaan.
• Gebruik <nav> voor navigatie.
• Gebruik <header> en <footer> voor boven- en onderkant.
• Gebruik <div> als er geen betekenisvolle tag past.

<article class="kaart">
    <h2>Blogbericht</h2>
    <p>Dit bericht kan zelfstandig gelezen worden.</p>
</article>

<div class="schaduw-wrapper">
    <article>
        <h2>Bericht met extra vormgeving</h2>
        <p>De div is hier alleen een extra CSS-wrapper.</p>
    </article>
</div>

• Gebruik niet automatisch overal een div.
• Kies eerst een semantische HTML-tag als die past.
• Gebruik classes voor herbruikbare vormgeving.
• Gebruik id's niet als creatieve layoutnamen.
• Gebruik divs als technische wrappers voor CSS.
• Gebruik float vooral voor tekst om afbeeldingen heen.
• Gebruik float liever niet voor nieuwe pagina-layouts.
• Gebruik clear als inhoud onder een float moet beginnen.