Blog

Share this post :

Div HTML – Qu’est-ce qu’une balise Div et comment la styliser avec CSS

Le balisage de division HTML, appelé “div” en abrégé, est un élément spécial qui te permet de regrouper des ensembles de contenus similaires sur une page web. Tu peux l’utiliser comme un conteneur générique pour associer des contenus similaires.

La balise div est l’une des balises les plus utilisées et semble toujours être là malgré l’introduction d’éléments sémantiques (ces éléments te permettent d’utiliser plusieurs balises comme conteneur).

Dans ce tuto, je vais te montrer les différentes choses que tu peux faire avec la balise div, comment tu peux utiliser plusieurs divs dans le même fichier HTML sans te perdre, et comment la styliser.

Quand utiliser la balise div

La balise div est polyvalente – tu peux l’utiliser pour réaliser plusieurs choses sur une page web. Tu l’utiliseras principalement dans les mises en page web et pour créer des éléments artistiques en CSS, mais elle est extrêmement flexible.

 

En fin de compte, tu finiras presque toujours par l’utiliser pour mettre en forme ce qu’elle contient ou pour manipuler de telles choses avec JavaScript.

1. Utiliser la balise div dans les mises en page web

Tu vas principalement utiliser la balise “div” pour regrouper des contenus similaires afin de les styliser facilement. Un excellent exemple est d’utiliser la balise “div” pour regrouper différentes sections d’une page web. Tu peux rassembler l’en-tête, la navigation, les sections et le pied de page d’une page dans une balise “div” individuelle pour pouvoir les styliser ensemble.

Plus tard dans ce tutoriel, je vais te montrer comment créer une mise en page web avec plusieurs balises “div” sans te perdre.

En soi, la balise “div” n’a pas d’effet direct sur la présentation du contenu à moins que tu ne la styles.

2. Utiliser la balise div dans l’art CSS

Avec la balise “div”, tu peux créer différentes formes et dessiner n’importe quoi car elle est facile à styler.

  • Comment créer un carré avec la balise “div”

Pour créer un carré avec la balise “div”, tu dois d’abord définir une balise “div” vide et lui attacher un attribut de classe dans le HTML. En CSS, sélectionne la balise “div” avec l’attribut de classe, puis définis une hauteur et une largeur égales pour elle.

<div class="square"></div>
 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

  • Comment créer un cercle avec la balise “div”

Tu peux créer un cercle avec la balise “div” en codant une balise “div” vide dans le HTML, en définissant une hauteur et une largeur égales pour elle en CSS, puis un rayon de bordure (border-radius) de 50%.

<div class="circle"></div>
  body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }

    .circle {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }

  • Comment créer le drapeau nigérian avec CSS

Créer le drapeau nigérian avec la balise “div” est assez simple. Le drapeau est une forme rectangulaire avec les couleurs vert, blanc et vert.

Pour le réaliser, définis 3 balises “div” et attache des classes différentes, puis stylise-les de manière appropriée dans le CSS.

<div class="naija-flag">
<div class="first-green">
</div>
<div class="white">
</div>
<div class="second-green">
</div>
</div>
.naija-flag {
  display: flex;
}
.first-green {
  height: 100px;
  width: 60px;
  background-color: green;
}
.white {
  height: 100px;
  width: 60px;
  background-color: white;
}
.second-green {
  height: 100px;
  width: 60px;
  background-color: green;
}

Comment styliser la balise div

Comme nous l’avons discuté précédemment, la balise “div” est très facile à styliser. C’est l’une des raisons pour lesquelles de nombreux développeurs l’utilisent pour regrouper des contenus similaires.

La balise “div” accepte presque toutes les propriétés CSS sans problème. Regardons maintenant quelques exemples à ce sujet.

1. Comment Appliquer les Propriétés de Police avec la balise div

Tu peux appliquer les propriétés CSS telles que la taille de police (font-size), la famille de police (font-family), le poids de police (font-weight) et le style de police (font-style) sur le contenu regroupé avec la balise div :

<div class="font-properties">
<p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
        ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
      </p>
<p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
        ipsam eaque rem dicta, quos quas ipsum.
      </p>
</div>
body {
      max-width: 900px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }

.font-properties {
      font-family: cursive, sans-serif;
      font-size: 1.3rem;
      font-weight: bolder;
      font-style: italic;
    }

2. Comment Appliquer la Couleur avec la Balise Div

Tu peux appliquer les propriétés CSS color et background-color sur le contenu regroupé avec la balise div :

<div class="color-properties">
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
    ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
  </p>
<p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
    ipsam eaque rem dicta, quos quas ipsum.
  </p>
</div>
.color-properties {
  color: white;
  background-color: #2ecc71;
}

3. Comment Styliser du Texte avec la Balise Div

Tu peux appliquer les propriétés CSS text-transform et text-decoration sur une balise div comme ceci :

<div class="text-properties">
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
    ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
  </p>
<p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
    ipsam eaque rem dicta, quos quas ipsum.
   </p>
</div>
.text-properties {
    text-transform: uppercase;
    text-decoration: underline;
  }

4. Comment Créer un Effet d’Ombre avec la Balise Div

Tu peux créer un effet d’ombre avec la balise “div” en utilisant la propriété box-shadow :

<div class="box-shadow">
<p>
        Before paying to learn to program, checkout freeCodeCamp.org
        <br />
        The HTML, CSS, and JavaScript curricula would take you from zero to hero
        in web development.
      </p>
<p>
        There is a Python curriculum that will get you a considerable knowledge
        in Python <br />
        And an upcoming Data Science curriculum.
      </p>
</div>
.box-shadow {
      font-family: cursive, sans-serif;
      background-color: #2ecc71;
      color: white;
      padding: 10px;
      border-radius: 4px;
      box-shadow: 2px 2px 20px 23px #7fecad;
    }

Qu’est-ce qui se passe dans le CSS ci-dessus ?

J’ai réussi à créer l’effet d’ombre avec la propriété CSS box-shadow.

  • La première valeur (2px) représente le décalage sur l’axe x (décalage-x).
  • La deuxième valeur (à nouveau 2px) représente le décalage sur l’axe y (décalage-y).
  • La valeur suivante (20px) est pour le rayon de flou, déterminant à quel point l’ombre est floue.
  • La valeur suivante (23px) est le rayon d’étendue, contrôlant à quelle distance l’ombre s’étend.
  • La dernière valeur est la couleur de l’ombre – dans ce cas, #7fecad.

Le résultat ressemble à ceci :

Comment Utiliser Plusieurs Éléments Div sans se Confondre

Les balises “div” sont couramment utilisées pour regrouper des contenus similaires. Dans les anciennes pages web et même dans certaines plus récentes, tu trouveras des balises “div” partout, malgré le fait que l’utilisation de balises sémantiques soit recommandée pour l’accessibilité et un meilleur référencement.

Étant donné que les balises “div” sont toujours très courantes, je recommande d’appliquer des attributs de classe et d’identifiant pour pouvoir manipuler des éléments “div” individuels avec ces attributs.

Je vais te guider pour mettre cela en pratique en créant une mise en page web de base.

La première section que tu voudras créer est l’en-tête, contenant le logo et la barre de navigation :

 <div class="header">
<h2 class="logo">gomycode</h2>
<ul class="nav">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">About</a>
</li>
<li>
<a href="">Serices</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</div>

Avant de styliser la barre de navigation, j’ai effectué des réinitialisations CSS pour que les éléments s’alignent correctement et s’affichent de manière agréable :

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

.hero,
.about,
.services,
.contact {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 20px;
}

Dans l’extrait de code ci-dessus :

  • J’ai supprimé les marges et les espacements par défaut.
  • J’ai défini une largeur maximale pour les sections principales afin qu’elles ne s’étendent pas complètement, pour une meilleure expérience utilisateur.
  • J’ai ajouté une marge en bas de chaque section pour leur donner de l’espace.
  • J’ai défini une marge de 0 en haut et en bas, et automatique à gauche et à droite pour les centrer.

Pour styliser la barre de navigation de manière appropriée, je vais sélectionner la balise de conteneur “div” avec son attribut de classe, “header”. Je lui donnerai un affichage “flex”, ainsi que d’autres propriétés pour la mettre en page de manière agréable. Je vais également sélectionner la “div” qui englobe la barre de navigation (élément “ul”) par sa classe et la mettre en page avec Flexbox.

.header {
      padding: 0 70px;
      display: flex;
      align-content: center;
      justify-content: space-between;
      margin-top: 20px;
      margin-bottom: 20px;
    }

.nav {
      display: flex;
      align-content: center;
      justify-content: center;
      gap: 60px;
      list-style-type: none;
    }

.nav li a {
      text-decoration: none;
      color: black;
      font-size: 1.2rem;
    }

Pour les sections restantes, en dehors du pied de page, le HTML et les styles sont génériques :

<div class="hero">
<h1>Hero Section</h1>
</div>
<div class="about">
<h1>About Us</h1>
</div>
<div class="services">
<h1>Our Services</h1>
</div>
<div class="contact">
<h1>Contact Us</h1>
</div>
<div class="footer">
<p>&copy; 2023 All Rights Reserved</p>
</div>
.hero {
      background-color: #eee;
      height: 200px;
    }

.hero h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.about {
      background-color: #eee;
      height: 200px;
    }

.about h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.services {
      background-color: #eee;
      height: 200px;
    }

.services h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.contact {
      background-color: #eee;
      height: 200px;
    }

.contact h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.footer {
      background-color: #777;
      height: 40px;
    }

.footer p {
      margin: 0 auto;
      line-height: 1.7;
    }

J’ai attribué aux sections individuelles une couleur de fond grisâtre et une hauteur de 200 pixels. J’ai positionné les balises “h1” à l’intérieur au centre grâce à Flexbox et j’ai appliqué un “line height” de 1.5 à chacune d’elles.

Enfin, j’ai donné au pied de page une couleur de fond gris plus foncé pour le rendre distinct et j’ai centré le contenu à l’intérieur avec un “line height” de 1.7.

La mise en page finale ressemble à ceci :

La balise HTML “div” est couramment utilisée parmi les développeurs web partout.

Cependant, garde à l’esprit que tu devrais généralement utiliser des balises HTML sémantiques à la place de la balise “div”, sauf si aucune d’entre elles (les balises sémantiques) ne correspond vraiment au contenu à regrouper. Cela s’explique par le fait que les balises sémantiques sont meilleures pour l’accessibilité et le référencement.

En résumé, la balise “div” reste utile et n’est pas près de disparaître, donc n’hésite pas à l’utiliser lorsque c’est nécessaire.

Share this post :

Sign up for Newsletters