HTML <div> Tag

Definitie en gebruik

<div> Labels definiëren het splitsen of delen (sectie of subsectie, division/section) van een HTML-document.

<div> Labels kunnen documenten opdelen in afzonderlijke, verschillende delen. Ze kunnen dienen als een strikte organisatiemethode en zijn niet gekoppeld aan enige indeling.

Elke soort inhoud kan worden geplaatst} <div> binnen!<div> tag kan worden gebruikt als container voor HTML-elementen, dan kunnen stijlen met CSS worden ingesteld of worden bewerkt met JavaScript.

Als de id of class te markeren <div>te maken, dan wordt de werking van het label effectiever. Door gebruik te maken van class of id Eigenschap, kan eenvoudig worden gebruikt om <div> stijltag instellen.

Opmerking:Standaard plaatsen browsers altijd <div> een newline-teken voor en achter het element plaatsen.

Gebruik

<div> is een blokgelijk element. Dit betekent dat zijn inhoud automatisch een nieuwe regel begint. In feite is de newline een <div> ingebouwde unieke formatteerprestaties. Dit kan worden bereikt door <div> met class of id extra stijlen toe te passen.

Hoef niet voor elk <div> toevoegen aan met class of id, hoewel dit ook enige voordelen heeft.

Men kan dezelfde <div> Element toepassing class of id Eigenschappen, maar in de meeste gevallen wordt er maar één van toegepast. Het belangrijkste verschil is dat class wordt gebruikt voor elementgroepen (soortgelijke elementen, of begrijp het als een bepaald type element), terwijl id wordt gebruikt om aparte unieke elementen te identificeren.

Zie ook:

HTML-tutorial:HTML block elements and inline elements

HTML-tutorial:HTML layout

HTML DOM referentiehandboek:Div-object

Voorbeeld

Het <div>-deel dat in het document CSS-stijlen gebruikt:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Dit is de titel binnen de div-elementen</h2>
  <p>Dit is enkele tekst binnen de div-elementen.</p>
</div>
</body>
</html>

Try it yourself

Casestudie

<body>
 <h1>Nieuwe website</h1>
  <p>Enkele teksten. Enkele teksten. Enkele teksten...</p>
  ...
 <div class="news">
  <h2>Nieuwskop 1</h2>
  <p>Enkele teksten. Enkele teksten. Enkele teksten...</p>
  ...
</div>
 <div class="news">
  <h2>Nieuwskop 2</h2>
  <p>Enkele teksten. Enkele teksten. Enkele teksten...</p>
  ...
 </div>
 ...
</body>

Voorbeeldverklaring

Zoals u kunt zien, simuleert dit HTML-segment de structuur van een nieuwswebsite. Elke div combineert de titel en samenvatting van elk nieuwsbericht, wat betekent dat de div aan het document aanvullende structuur toevoegt. Bovendien, omdat deze div's tot dezelfde soort elementen behoren, kunnen deze worden gemarkeerd met class="news", wat niet alleen geschikte semantiek aan de div's toevoegt, maar ook gemakkelijk formatteren met stijlen, wat een dubbele winst is.

Tip:For a deeper understanding of the usage of class and id, please read the section 'div, id, and other assistants' in the chapter 'Structured Markup' of 'W3school'.

Global attributes

<div> The tag also supports Global attributes in HTML.

event attributes

<div> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will use the following default values to display <div> Element:

div {
  display: block;
}

Try it yourself

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support