Het <div>-element

Een van de veelgebruikte elementen in HTML is het <div>-element. <div> is een afkorting voor “division” of een container die de pagina in aparte onderdelen verdeelt. Deze secties zijn erg nuttig voor het groeperen van elementen in HTML.


    <body>
      <div>
        <h1>Waarom div's gebruiken?</h1>
        <p>Uitstekend voor het groeperen van elementen!</p>
      </div>
    </body>

<div>-elementen zijn standaard niet visueel zichtbaar, maar ze zijn uitermate geschikt voor het toepassen van aangepaste stijlen op HTML-elementen.

<div>s kunnen diverse inhoud bevatten, zoals tekst, links, afbeeldingen of video's. Het is raadzaam om altijd twee spaties insprong toe te voegen voor een betere leesbaarheid wanneer elementen binnen <div>s worden genest.

Toepassingen van het <div>-element

Het <div>-element wordt vaak gebruikt in combinatie met CSS voor het opmaken van generieke blokken van inhoud, zoals containers voor tekst, afbeeldingen en andere elementen, zonder specifieke semantische betekenis.

<div>'s bieden ontwikkelaars de mogelijkheid om HTML-elementen te groeperen en dezelfde stijlen toe te passen op alle gegroepeerde elementen. Bovendien is het mogelijk om het <div>-element als geheel van stijl te voorzien, wat uitgebreider wordt behandeld in de cursus over CSS.

Styling met CSS


    <div class="content">
        <h1>Welkom op mijn website</h1>
        <p>Hier vind je diverse inhoud.</p>
    </div>

    <style>
    .content {
        background-color: lightgrey;
        padding: 20px;
        border-radius: 5px;
    }
    </style>

Welkom op mijn website

Hier vind je diverse inhoud.

Responsieve lay-outs

<div>-elementen kunnen worden gebruikt voor het creëren van responsieve lay-outs in combinatie met CSS-frameworks zoals Bootstrap, of technieken zoals Flexbox en CSS Grid. Dit stelt ontwikkelaars in staat om adaptieve gebruikerservaringen te bieden op verschillende apparaten.

Een voorbeeld van een eenvoudig responsief ontwerp met Flexbox zou kunnen zijn:


    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>

    <style>
    .flex-container {
        display: flex;
        justify-content: space-around;
    }
    </style>