Balises DIV et SPAN

Introduction

Dans la création de sites web, les balises HTML jouent un rôle crucial pour structurer et styliser le contenu. Parmi elles, les balises <div> et <span> se distinguent par leur souplesse et leur polyvalence, en particulier lorsqu'elles sont combinées avec les classes CSS. Ce cours vous présentera l'intérêt de ces balises et leur utilisation pour construire des sites modernes et adaptés.

Avant de détailler l'intérêt des balises <div> et <span>, parlons des classes CSS, de leur utilité, et voyons un exemple que nous allons utiliser ci-dessous.

Les classes CSS et leur utilité

Les classes CSS sont essentielles pour donner du style aux balises <div> et <span>. Une classe est un attribut HTML qui sert à identifier un ou plusieurs éléments pour leur appliquer des styles personnalisés.

Exemple de déclaration CSS :

.header {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
}

.highlight {
    color: red;
    font-weight: bold;
}

Effet des classes :

La classe header applique un fond gris clair, un padding, et centre le texte de l'en-tête.
La classe highlight met le texte en rouge et le rend gras.

Balise `<div>`

La balise <div> est une balise de type conteneur qui sert à regrouper des éléments HTML. Elle est souvent utilisée pour structurer des sections d'une page web.

Caractéristiques principales :

Bloc : La balise <div> occupe toute la largeur disponible de la page.
Organisation : Elle permet de créer des divisions logiques dans le contenu.
Usage : Elle est souvent utilisée comme point d'application de styles CSS.

Exemple :

Bienvenue sur mon site Site fait par moi-même !

<div class="header">
    <h1>Bienvenue sur mon site</h1>
    <h2>Site fait par moi-même !</h2>
</div>

Ici, la classe header appliquée au <div> permet de styliser l'en-tête de la page.

Balise `<span>`

La balise <span> est une balise en ligne qui sert à styliser une portion précise de texte ou un élément HTML sans perturber le flux du contenu.

Caractéristiques principales :

En ligne : Elle n'interrompt pas le flux du texte.
Flexibilité : Elle est idéale pour appliquer des styles à des mots ou des phrases spécifiques.

Exemple :

Ce site est extraordinaire !

<p>Ce site est <span class="highlight">extraordinaire</span> !</p>

Dans cet exemple, la classe highlight appliquée au <span> permet de mettre en avant le mot "extraordinaire".

Comparaison entre `<div>` et `<span>`

Caractéristique	`<div>`	`<span>`
Type d'élément	Bloc	En ligne
Usage principal	Organisation de sections	Mise en forme de texte
Interruption de la mise en page	Oui	Non

Atelier pratique

Objectif :

Créer une page web simple contenant un en-tête, une section principale et des mots mis en valeur.

Code HTML à réaliser :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balises DIV et SPAN</title>
    <style>
        .header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }

        .highlight {
            color: blue;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Bienvenue sur notre site</h1>
    </div>
    <div class="content">
        <p>Apprenez à utiliser les balises <span class="highlight">HTML</span> comme un pro.</p>
    </div>
</body>
</html>

Consigne :

Créez ce code dans un fichier HTML.
Testez-le dans votre navigateur.
Expérimentez en modifiant les styles CSS ou en ajoutant d'autres <div> et <span>.

Conclusion

Les balises <div> et <span> sont des outils incontournables pour structurer et styliser vos pages web. En les associant à des classes CSS, vous pouvez créer des designs élégants et fonctionnels tout en conservant une organisation claire de votre code. Essayez de les utiliser dans vos propres projets pour découvrir leur plein potentiel !