Éléments "div" et "span"

Index général
Introduction au Web Page Web de base Introduction à HTML Introduction à CSS Les tableaux
Les images Les listes Les hyperliens Les couleurs Les attributs ID et CLASS
Les éléments DIV et SPAN Éléments structurants Mise en page en colonnes Éléments de types block et inline Le modèle de boîte CSS
Les unités de mesures CSS Les sélecteurs CSS Les grilles CSS Introduction aux formulaires Suppléments pour PFI

Dernière mise à jour le 12 octobre 2022

Les éléments div et span sont des éléments "neutres", qui n'ont aucune signification particulière en HTML.

Ils sont pourtant très utilisés. Voyons pourquoi.

L'élément div

L'élément div n'a aucun sens particulier au niveau de la structure d'un document HTML.

S'il est beaucoup utilisé, c'est parce qu'il sert de conteneur pour d'autres éléments HTML.

div n'a aucun attribut obligatoire, mais utilise souvent style, class et et id.

Dans l'exemple suivant, div permet d'attribuer des styles CSS à tout un bloc d'éléments :

Exemple 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>L'élément "div"</title>
</head>
<body>

  <div style="background-color: green; color: yellow; padding: 25px;
  font-family: sans-serif;">

    <h2>Les hobbits</h2>
    <p>
      Les Hobbits, également appelés Demi-hommes ou Periannath, forment un
      des peuples d'Hommes vivant en Terre du Milieu, dans le légendaire de
      l'écrivain britannique J. R. R. Tolkien.
    </p>
    <p>
      Ils apparaissent pour la première fois dans le roman Le Hobbit et
      sont mentionnés dans Le Silmarillion, mais leur histoire est
      principalement racontée dans le roman Le Seigneur des anneaux, et
      plus particulièrement dans le prologue consacré aux Hobbits et à
      leur pays, la Comté.
    </p>
    <p>
      Source: Wikipédia
    </p>

  </div>

</body>
</html>
Je teste

L'élément span

L'élément span n'a lui aussi aucun sens particulier au niveau de la structure d'un document HTML.

Il est utilisé comme conteneur pour du texte.

span n'a aucun attribut obligatoire, mais utilise souvent style, class et id.

Dans l'exemple suivant, l'élément span permet d'attribuer des styles CSS à une portion d'un paragraphe :

Exemple 
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>L'élément "span"</title>
</head>
<body>
  <p>
    On dit que l'on peut voir danser les elfes dans
    les prés, <span style="background-color: cyan;
    font-weight: bold;">particulièrement les nuits
    et les matins brumeux</span>.
  </p>
</body>
</html>
Je teste