HTML

Utilisation des éléments de division <div> et <span> pour structurer le contenu

Utilisation des éléments de division <div> et <span> pour structurer le contenu


Les balises <div> et <span> sont des éléments de division utilisés pour structurer et organiser le contenu d'une page HTML. Voici comment les utiliser :


1. Balise <div> :


  • La balise <div> est un conteneur de bloc qui est utilisé pour grouper et diviser le contenu en sections distinctes.
  • Elle est couramment utilisée pour créer des mises en page complexes et pour regrouper des éléments ayant des styles ou des comportements similaires.
  • Exemple :


<div id="en-tete">
  <h1>Titre de la page</h1>
  <p>Contenu de l'en-tête</p>
</div>
<div id="contenu">
  <p>Contenu principal</p>
</div>
<div id="pied-de-page">
  <p>Pied de page</p>
</div>


2. Balise <span> :


  • La balise <span> est un conteneur en ligne qui est utilisé pour appliquer des styles ou des manipulations spécifiques à une partie de texte ou d'élément en ligne.
  • Elle est utilisée lorsque vous souhaitez appliquer des styles ou des scripts à un texte ou à un petit groupe d'éléments en ligne.
  • Exemple :


<p>Voici un texte avec une <span style="color: red;">partie en rouge</span>.</p>


Conseils d'utilisation :


  • Utilisez <div> pour structurer votre page en sections logiques ou pour créer des mises en page complexes.
  • Utilisez <span> pour appliquer des styles ou des scripts à des parties spécifiques de texte ou d'éléments en ligne.


Conclusion :


En utilisant les balises <div> et <span> dans votre fichier HTML, vous pouvez structurer et organiser le contenu de votre page de manière appropriée. Les <div> sont utilisés pour diviser le contenu en sections distinctes, tandis que les <span> sont utilisés pour appliquer des styles ou des scripts à des parties spécifiques de texte ou d'éléments en ligne. Assurez-vous d'utiliser ces balises judicieusement pour améliorer la lisibilité et la maintenabilité de votre code HTML.

1281 vues
Posté le 21 février 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
1 458 vues
Lien externe de feuilles de style CSS avec l'élément <link>
Lien externe de feuilles de style CSS avec l'élément <link>L'élément <link> est utilisé dans une page HTML pour lier une feuille de style CSS externe. Cela permet de séparer le...
HTML
4 016 vues
Twitter Cards
Les Twitter Cards sont des protocoles qui vous permettent d’attacher des photos, des vidéos et autres médias interactifs à vos tweets afin d’amener...
Créer son site
3 841 vues
Formulaire d'inscription en PHP (2/2)
Dans cette deuxième partie nous allons compléter et sécuriser notre formulaire avec différentes conditions.Par exemple nous allons utiliser la function crypt de PHP.Exemple :<?php ...
Créer son site de rencontres
3 496 vues
Personnaliser sa barre de menu
Nous allons maintenant apprendre à personnaliser notre barre de recherche à partir de l'exemple de celle de Bootstrap.Nous allons également ajouter 2 nouvelles pages PHP que nous nommerons...
Créer son site de rencontres
2 620 vues
Ajouter un avatar
Nous allons maintenant ajouter des avatars à nos profils et afficher ses avatars lors de l’affichage des membres 😁
Créer son site de rencontres
5 810 vues
Structure de base d'une page HTML
Cours sur la Structure de Base d'une Page HTMLLa structure de base d'une page HTML est essentielle pour créer des sites Web. Comprendre cette structure vous permettra de démarrer efficacement dans...
HTML
2 265 vues
Afficher les messages dans l'ordre
Dans cette vidéo on va personnaliser (un peu) l'interface des conversations avec du CSS.Nous allons également remettre les messages dans l'ordre et lors de la réception du message par le...
Créer son site de rencontres
1 027 vues
Positionnement statique, relatif, absolu et fixe
Positionnement Statique, Relatif, Absolu et Fixe en CSSEn CSS, le positionnement des éléments peut être contrôlé en utilisant différentes propriétés. Les quatre types de positionnement les...
CSS
Publicité
Cette pub permet au site de vivre ...