HTML Balise div

La balise HTML <div> permet de regrouper la grande section d’éléments HTML.

Nous savons que chaque étiquette a un objectif spécifique, par exemple. La balise p est utilisée pour spécifier le paragraphe, les balises <h1> à <h6> pour spécifier les en-têtes, mais la balise <div> est semblable à une unité de conteneur utilisée pour encapsuler d’autres éléments de page et diviser les documents HTML en sections.

Les développeurs Web utilisent généralement la balise div pour regrouper des éléments HTML et appliquer des styles CSS à plusieurs éléments à la fois. Par exemple: Si vous encapsulez un ensemble d’éléments de paragraphe dans un élément div afin de pouvoir tirer parti des styles CSS et appliquer le style de police à tous les paragraphes à la fois au lieu de coder le même style pour chaque élément de paragraphe.

<div style = "border: 1px rose uni; remplissage: 20px; taille de la police: 20px">
<p> Bienvenue sur w3tutoriels.com, vous trouverez ici des didacticiels sur les dernières technologies. </p>
<p> Ceci est le deuxième paragraphe </p>
</div>

Résultat :

Différence entre balise div et balise span

balise div	balise span
HTML div est un élément de bloc .	HTML span est un élément en ligne
L’élément div est utilisé pour envelopper de grandes sections d’éléments .	L’élément span est utilisé pour envelopper une petite partie de textes, d’images, etc.

Exemple de div: Formulaire de connexion

Dans cet exemple, nous créons une boîte en utilisant une balise div. Il y a un formulaire de connexion à l’intérieur de la boîte. Voyons le code CSS et HTML.

Code CSS:

.loginform{  
    padding:10px;  
    border:1px solid pink;  
    border-radius:10px;  
    float:right;  
    margin-top:10px;  
}  
.formheading{  
    background-color:red;  
    color:white;  
    padding:4px;  
    text-align:center;  
}  
.sub{  
background-color:blue;  
padding: 7px 40px 7px 40px;  
color:white;  
font-weight:bold;  
margin-left:70px;  
border-radius:5px;  
}

Code HTML :

<div class="loginform">  
<h3 class="formheading">Please Login</h3>  
<form action="LoginServlet" method="post">  
<table>  
<tr><td>Email:</td><td><input type="email" name="email"/></td></tr>  
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>  
<tr><td colspan="2" style="text-align:center"><input class="sub" type="submit" value="login"/></td></tr>  
</table>  
</form>  
</div>

Résultat :