Balises des éléments bloc

3.1 Élément <p>

Les éléments bloc en HTML sont utilisés pour créer la structure et organiser le contenu d'une page web. Ils aident à diviser le contenu en blocs et segments logiques. Ces éléments commencent une nouvelle ligne et occupent toute la largeur disponible. Examinons plus en détail trois balises souvent utilisées : <p>, <div>, et <span>.

Balise <p>

La balise <p> est utilisée pour créer des paragraphes de texte. C'est un élément bloc, ce qui signifie que chaque paragraphe commence sur une nouvelle ligne et a des marges en haut et en bas.

Exemple d'utilisation :

    
      <p>
        Ceci est le premier paragraphe de texte. Les paragraphes sont utilisés pour diviser le texte en blocs logiques,
        améliorant ainsi sa lisibilité.
      </p>
      <p>Ceci est le second paragraphe de texte. Chaque paragraphe commence sur une nouvelle ligne.</p>
    
  

Propriétés :

• Élément bloc : Se place sur une nouvelle ligne et occupe toute la largeur disponible.
• Marges automatiques : Généralement, les navigateurs ajoutent des marges avant et après le paragraphe.
• Nesting : La balise <p> ne peut pas contenir d'autres éléments bloc.

Stylisation avec CSS :

    
      p {
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 15px;
      }
    
  

3.2 Élément <div>

La balise <div> est un conteneur bloc universel utilisé pour regrouper d'autres éléments et appliquer des styles à ceux-ci. Elle n'a pas de styles intégrés et est utilisée uniquement pour structurer le contenu.

Exemple d'utilisation :

    
      <div class="container">
        <h2>Titre du bloc</h2>
        <p>Un peu de texte à l'intérieur du bloc div.</p>
      </div>
    
  

Propriétés :

• Élément bloc : Se place sur une nouvelle ligne et occupe toute la largeur disponible.
• Universalité : Peut contenir n'importe quels autres éléments, incluant bloc et inline.
• Stylisation et scripts : Souvent utilisé pour appliquer des styles CSS et des scripts JavaScript.

Stylisation avec CSS :

    
      .container {
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #f9f9f9;
      }
    
  

3.3 Élément <span>

La balise <span> est un élément inline utilisé pour mettre en évidence une partie de texte ou un autre contenu à l'intérieur d'éléments bloc. Elle n'a pas de styles intégrés et sert à appliquer des styles CSS et des scripts JavaScript à des parties spécifiques de texte.

Exemple d'utilisation :

    
      <p>Ce texte contient un <span class="highlight"> mot</span> surligné, qui est différent du reste du texte.</p>
    
  

Propriétés :

• Élément inline : Ne crée pas de nouvelle ligne et occupe seulement la largeur nécessaire.
• Flexibilité : Utilisé pour appliquer des styles à des parties spécifiques du texte ou d'autres éléments.
• Souvent utilisé en combinaison avec CSS et JavaScript : Aide à styliser ou manipuler précisément les parties du texte.

Stylisation avec CSS :

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

3.4 Comparaison <div> et <span>

<div>:

• Élément bloc
• Commence sur une nouvelle ligne
• Peut contenir d'autres éléments bloc et inline
• Utilisé pour regrouper et structurer le contenu

<span>:

• Élément inline
• Ne perturbe pas le flux du texte
• Utilisé pour styliser des parties spécifiques du texte
• Souvent utilisé pour la mise en surbrillance et le travail avec JavaScript

Exemple d'utilisation combinée <div> et <span>:

    
      .article {
        border: 1px solid #ddd;
        padding: 10px;
      }

      .keyword {
        color: blue;
        font-style: italic;
      }
    
  

    
      <div class="article">
        <h2>Titre de l'article</h2>
        <p>
          Ceci est un paragraphe de texte d'article avec un <span class="keyword">mot-clé</span> surligné pour attirer l'attention.
        </p>
      </div>
    
  

Les balises <p>, <div> et <span> sont les blocs de construction de base du HTML, qui permettent de créer des pages web structurées, stylisées et interactives. Comprendre leurs caractéristiques et bien les utiliser aide à créer des interfaces pratiques et fonctionnelles.