Créer des <div> en HTML est simple. Un élément <div> est un conteneur générique sans signification sémantique particulière, utilisé pour regrouper d’autres éléments HTML et appliquer des styles ou du comportement via CSS et JavaScript.
Comment créer une <div> en HTML
- Syntaxe de base :
- La syntaxe d’une
<div>est très simple :html ¨K3K - Vous pouvez ajouter du contenu ou d’autres éléments HTML à l’intérieur de cette balise
<div>:html ¨K4K
- Ajout d’une classe ou d’un ID :
- Pour cibler une
<div>avec CSS ou JavaScript, vous pouvez lui attribuer une classe ou un identifiant (ID). - Classe (
class) :html ¨K5K
Ensuite, vous pouvez styliser cette div avec CSS :css .ma-classe { background-color: lightblue; padding: 20px; } - Identifiant (
id) :html ¨K6K
Pour le styliser :css #mon-id { border: 2px solid black; margin: 10px; }
- Imbrication de
<div>:
- Vous pouvez imbriquer des
<div>les unes dans les autres pour créer des structures complexes.<div class="parent"> <div class="enfant"> <p>Texte à l'intérieur de la div enfant.</p> </div> </div>Et les styles correspondants :.parent { background-color: lightgray; padding: 20px; } .enfant { background-color: white; border: 1px solid gray; padding: 10px; }
- Exemple concret :
- Voici un exemple complet d’une page HTML avec plusieurs
<div>stylisées :<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemple de div</title> <style> .header { background-color: #4CAF50; color: white; text-align: center; padding: 15px; } .content { background-color: #f1f1f1; padding: 20px; margin: 15px; } .footer { background-color: #333; color: white; text-align: center; padding: 10px; } </style> </head> <body> <div class="header"> <h1>Bienvenue sur ma page</h1> </div> <div class="content"> <p>Ceci est le contenu principal de la page.</p> <p>Il est à l'intérieur d'une div avec la classe "content".</p> </div> <div class="footer"> <p>Footer de la page</p> </div> </body> </html>
Résumé
Les <div> sont des conteneurs de base utilisés pour structurer et organiser le contenu sur une page web. Vous pouvez leur ajouter des classes ou des identifiants pour les cibler avec CSS ou JavaScript, et les imbriquer pour créer des mises en page complexes. Utilisées correctement, elles sont essentielles pour la conception et le développement de pages web modernes.
Image par Freepik
