HTML
Div-element

Invoering

Syntaxis

• <div>example div</div>

nesting

Het is gebruikelijk om meerdere <div> in een andere <div> . Dit wordt meestal "nesting" -elementen genoemd en maakt het mogelijk elementen verder in subsecties te verdelen of ontwikkelaars te helpen met CSS-styling.

De <div class="outer-div"> wordt gebruikt om twee <div class="inner-div"> elementen te groeperen; elk met een <p> -element.

<div class="outer-div">
  <div class="inner-div">
    <p>This is a paragraph</p>
  </div>
  <div class="inner-div">
    <p>This is another paragraph</p>
  </div>
</div>

Dit levert het volgende resultaat op (CSS-stijlen toegepast voor de duidelijkheid):

Inline en block-elementen nesten Tijdens het nesten van elementen moet u er rekening mee houden dat er inline- en block-elementen zijn. terwijl blokelementen "een regeleinde op de achtergrond toevoegen", wat betekent dat andere geneste elementen automatisch in de volgende regel worden getoond, kunnen inline-elementen standaard naast elkaar worden geplaatst

Vermijd diep <div> nestelen

Een diepe en vaak gebruikte geneste containerlay-out vertoont een slechte coderingsstijl.

Afgeronde hoeken of sommige vergelijkbare functies maken vaak een dergelijke HTML-code. Voor de meeste van de nieuwste generatie browsers zijn er CSS3-tegenhangers. Probeer zo min mogelijk HTML-elementen te gebruiken om de verhouding tussen content en tag te vergroten en de paginabelasting te verminderen, wat resulteert in een betere ranking in zoekmachines.

div sectie Element mag niet dieper dan 6 lagen worden genest.

Basis gebruik

Het element <div> heeft meestal geen specifieke semantische betekenis, het vertegenwoordigt eenvoudigweg een deling en wordt meestal gebruikt voor het groeperen en inkapselen van andere elementen in een HTML-document en het scheiden van die van andere groepen inhoud. Als zodanig kan elke <div> beste worden beschreven aan de hand van de inhoud.

<div>
  <p>Hello! This is a paragraph.</p>
</div>

Het div element is meestal een element op blokniveau , wat betekent dat het een blok van een HTML-document scheidt en de maximale breedte van de pagina beslaat. Browsers hebben doorgaans de volgende standaard CSS-regel:

div {
  display: block;
}

Het wordt door het World Wide Web Consortium (W3C) sterk aangemoedigd om het div-element te beschouwen als een laatste redmiddel, voor wanneer geen ander element geschikt is. Het gebruik van meer geschikte elementen in plaats van het div-element leidt tot een betere toegankelijkheid voor lezers en gemakkelijker onderhoudbaarheid voor auteurs.

Een blogbericht zou bijvoorbeeld worden gemarkeerd met <article> , een hoofdstuk met <section> , de navigatiehulpmiddelen van een pagina met <nav> en een groep formulierbesturingselementen met <fieldset> .

div-elementen kunnen handig zijn voor stilistische doeleinden of om meerdere paragrafen in een sectie te plaatsen die allemaal op dezelfde manier moeten worden geannoteerd.