Balise HTML <div>
La balise <div> est un conteneur utilisé pour définir une division ou une section. C’est un élément de niveau bloc qui n’affecte pas intrinsèquement le contenu, mais il est principalement utilisé pour regrouper des éléments HTML afin qu’ils soient stylisés avec CSS ou manipulés par des scripts.
Positionnement des blocs définis par la balise <div>
TIP
Nous recommandons d’utiliser la balise <div> uniquement lorsqu’aucun autre élément sémantique introduit dans HTML5 (comme <nav>, <main> ou <article>) n’est approprié.
Comme <div> est un élément de niveau bloc, un saut de ligne est placé avant et après lui.
Il est possible de placer n’importe quel élément HTML à l’intérieur d’une balise <div>, y compris un autre <div>.
DANGER
Les éléments de niveau bloc comme <div> ne peuvent pas être imbriqués à l’intérieur des balises <p>, car le paragraphe sera interrompu à l’endroit où la balise <div> est placée.
Pour appliquer des styles à l’intérieur d’un paragraphe, utilisez la balise <span>, qui est utilisée avec des éléments en ligne.
Syntaxe
La balise <div> se présente par paires. Le contenu est écrit entre la balise ouvrante (<div>) et la balise fermante (</div>).
Exemple de la balise HTML <div> :
Exemple de balise HTML <div>
<!DOCTYPE html>
<html>
<head>
<title>The <div> Tag</title>
</head>
<body>
<h1> The <div> Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the <div> tag to group two paragraphs for applying a background to the text, and to add color to this
<span style="color:#1c87c9">word</span> we place it within <span> tag.</p>
<p> Pay attention, that the <div> tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>
</html>Lorsque nous construisons des mises en page, nous travaillons avec plusieurs blocs définis par la balise <div>. Le positionnement de ces blocs est au cœur de la mise en page : placer les éléments dans les bonnes positions relatives sur toutes les tailles d’écran est l’une des tâches les plus importantes.
Selon le contenu et les objectifs de la page, nous pouvons utiliser différentes techniques (ou leurs combinaisons) pour déterminer l’emplacement de chaque bloc. Apprenons-en davantage sur ces techniques.
Flexbox ¶
Dans les sites web modernes, les mises en page basées sur float sont remplacées par Flexbox. L’idée principale de Flexbox est qu’il permet de contrôler l’alignement, la direction, l’ordre et la taille des éléments à l’intérieur du conteneur.
Exemple de Flexbox avec la balise HTML <div> :
Un exemple de balise HTML <div> avec Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Propriété CSS float ¶
La propriété CSS float, ou « flottants », permet aux éléments d’apparaître côte à côte ou séparés les uns des autres, ce qui nous permet de créer différents types de mises en page, notamment des pages à plusieurs colonnes, des barres latérales, des grilles, etc.
Exemple de la balise HTML <div> avec la propriété CSS float :
Exemple de balise HTML <div> avec la propriété CSS Float
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
overflow: auto;
border: 3px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background-color: #1faadb;
}
.green {
float: left;
width: 35%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Résultat
Marges négatives ¶
Des marges négatives peuvent être appliquées aux éléments statiques ou flottants.
Exemple de marges négatives :
Exemple de balise HTML <div> avec des marges négatives
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background-color: #1faadb;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">This is some hyperlink inside div tag.</a>
</div>
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Positionnement relatif+absolu ¶
Si vous souhaitez positionner un div par rapport à un élément particulier, vous pouvez utiliser une combinaison de position: relative et de position: absolute.
Exemple de positionnement relatif+absolu de la balise HTML <div> :
Un exemple de balise HTML <div> avec la propriété CSS position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 10px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #1faadb;
}
.green {
top: 10px;
left: 15px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>DANGER
position: relative n’affecte pas le positionnement des éléments dans le flux normal, sauf si vous ajoutez des décalages.
Attributs ¶
| Attribute | Value | Description |
|---|---|---|
| align | left right center justify | Was used to align the content inside a <div> tag. This attribute is not supported in HTML5. CSS text-align property is used instead. |
La balise <div> prend également en charge les attributs globaux et les attributs d’événement.
Comment styliser une balise HTML <div>
{
"tag_name": "div"
}Practice
What is the primary function of the HTML <div> tag?