Django - 2.4 La balise div pour structurer une page
La balise div est l'une des balises les plus utilisées en HTML. Elle regroupe d'autres éléments dans une même section, ce qui clarifie l'organisation du fichier. Cette leçon montre comment l'utiliser et quelle différence elle a avec la balise span.
Un conteneur de type bloc
La balise div est un élément de type bloc. Elle regroupe du contenu, comme des paragraphes, des titres ou des images. Elle n'a pas de valeur sémantique : c'est un conteneur général, contrairement à des balises comme footer ou h1.
Organiser le fichier en sections
Les div découpent la page en sections distinctes. Le code gagne en lisibilité, et le développeur retrouve plus facilement l'élément à modifier ou à supprimer.
La balise span est aussi générique, mais elle est en ligne. Elle reste à l'intérieur d'une ligne de texte, alors que div est un bloc.
Styliser une section
La vidéo applique un style à une div, avec une couleur bleue et une bordure de 5 pixels. Elle place ensuite un titre h1 et un paragraphe dans une deuxième div, pour obtenir deux sections distinctes.
En résumé
La balise div regroupe des éléments dans un bloc sans valeur sémantique. Elle rend le fichier HTML plus facile à lire et à modifier. Elle permet aussi d'appliquer un style à un ensemble d'éléments.
Points clés
- La balise div est un conteneur de type bloc, sans valeur sémantique.
- La balise span est un conteneur en ligne, placé dans une ligne de texte.
- Des div séparent les sections d'une page.
- Un style peut être appliqué à un groupe d'éléments.
- Un code bien découpé facilite les modifications.
Questions fréquentes
Quelle différence y a-t-il entre div et span ?
La balise div est un bloc qui regroupe plusieurs éléments. La balise span est en ligne et reste à l'intérieur d'une ligne de texte.
Pourquoi utiliser div si elle n'a pas de sens ?
Elle organise le fichier et permet d'appliquer un style à plusieurs éléments à la fois.
Peut-on mettre plusieurs éléments dans une div ?
Oui. La vidéo place un titre, un paragraphe et des images dans une même div.