Les Balises Div et Span

Les balises <div> et <span> sont des éléments HTML utilisés pour structurer et formater le contenu d'une page web. Elles n'ont pas de signification sémantique propre comme les balises de titre, de paragraphe, de liste, etc.

Au lieu de cela, elles sont utilisées pour appliquer des styles, créer des agencements et regrouper des éléments à des fins de présentation et de mise en forme.

Div

La balise <div> est utilisée pour créer des conteneurs génériques ou des blocs de contenu. Elle permet de regrouper des éléments connexes, de diviser une page en sections ou de créer des mises en page complexes.

La balise <div> est souvent utilisée pour appliquer des styles CSS, ajouter des arrière-plans, définir des bordures et créer des structures de mise en page flexibles.

Exemple d'utilisation de la balise <div>

<div id="conteneur">

        <h1>Titre</h1>
        <p>Contenu du paragraphe.</p>

</div>

En bloc (block) Un élément de niveau bloc commence toujours sur une nouvelle ligne et occupe toute la largeur disponible.

<div> est de niveau bloc et est souvent utilisé comme conteneur pour d'autres éléments HTML.

Nommez d’autres éléments en block qu’on a vus aujourd’hui… <p> <div> <h1> <h2> <ul> <li> <header> <footer> <nav> ...

Span

La balise <span> est utilisée pour appliquer des styles ou formater une partie spécifique d'un texte. Elle peut être utilisée pour cibler une portion de texte à l'aide de CSS ou pour appliquer des modifications spécifiques à des parties de contenu.

Contrairement à la balise <div>, qui est un conteneur de bloc, la balise <span> est un conteneur en ligne.

Exemple d'utilisation de la balise

<p>Le prix est de <span class="prix">25$</span>.</p>

Dans cet exemple, la balise est utilisée pour appliquer un style particulier au prix affiché.

En ligne (inline)

Un élément en ligne ne commence pas sur une nouvelle ligne et il n'occupe que la largeur nécessaire

<span> est un conteneur en ligne utilisé pour baliser une partie d'un texte ou une partie d'un document.

Nommez d’autres éléments en ligne qu’on a vus aujourd’hui… <em>, <strong>, <span>, etc.

Note

En résumé, les balises <div> et <span> sont des éléments HTML utilisés pour structurer et formater le contenu d'une page web. La balise <div> est utilisée pour créer des conteneurs de blocs et des structures de mise en page, tandis que la balise <span> est utilisée pour appliquer des styles à des parties spécifiques du texte.

Exercices

Exercice sur Div & Span
Utiliser correctement les balises <div> et <span>
Exercice Div-Span