Gestion de contenu

Maîtrisez toutes les balises HTML pour structurer et formater votre contenu textuel. Paragraphes, citations, formatage et organisation sémantique.

Paragraphes et blocs de texte

La balise <p> est fondamentale pour structurer votre contenu en paragraphes lisibles.

La balise <p>

Syntaxe et usage

html 

<p>Ceci est un paragraphe de texte.</p>

<p class="intro">
    Paragraphe avec une classe CSS.
</p>

Caractéristiques

  • Élément block

    Prend toute la largeur disponible

  • Espacement automatique

    Marge par défaut en haut et en bas

  • Sémantique

    Indique un paragraphe de contenu

Exemple visuel

Sans feuille de style, le navigateur sépare lui-même les paragraphes : c’est la marge par défaut.

Bonnes pratiques

N’utilisez pas <p> pour l’espacement, utilisez plutôt CSS (margin, padding).

Conteneurs : <div> et <section>

<div> — conteneur générique

html 

<div class="article-content">
    <p>Premier paragraphe...</p>
    <p>Deuxième paragraphe...</p>
</div>

<section> — section sémantique

html 

<section>
    <h2>Titre de section</h2>
    <p>Contenu de la section...</p>
</section>

Quand employer l’un ou l’autre

  • <div>

    • Regroupement sans sémantique
    • Styling CSS
    • Layout et positioning

  • <section>

    • Section thématique
    • Améliore l’accessibilité
    • Structure sémantique

Éléments inline

Les balises inline permettent de formater du texte à l’intérieur des paragraphes.

La balise <span>

Conteneur inline générique

html 

<p>
    Le mot <span class="highlight">important</span>
    est mis en évidence.
</p>

<span style="color: red;">Texte rouge</span>

Cas d’usage

  • Styling CSS

    Appliquer des styles à une partie du texte

  • JavaScript

    Cibler des éléments pour l’interactivité

  • Classes et IDs

    Regroupement logique de contenu

Exemple visuel

Un élément inline ne casse pas le flux du texte : il reste dans la ligne.

Attention

<span> n’a aucune sémantique. Préférez les balises sémantiques quand c’est possible.

Éléments de formatage inline

Trois familles

  • Emphase

    <em>texte</em>
    Texte en italique
    <strong>texte</strong>
    Texte important
    <mark>texte</mark>
    Texte surligné

  • Technique

    <code>code</code>
    console.log()
    <kbd>touche</kbd>
    Ctrl
    <var>variable</var>
    x = 42

  • Divers

    <small>texte</small>
    Petit texte
    <sub>texte</sub>
    H2O
    <sup>texte</sup>
    E=mc2

Les neuf balises, rendues par le navigateur

Aucune feuille de style ici : chaque effet vient de la balise elle-même.

Citations et références

Structurez correctement vos citations avec les balises appropriées.

Citations : <blockquote>

Syntaxe complète

html 

<blockquote cite="URL_source">
    <p>
        Le contenu de la citation...
    </p>
    <footer>
        <!-- Attribution -->
        <cite>Auteur</cite>
    </footer>
</blockquote>

Attributs

  • cite="URL"

    Lien vers la source originale

  • <cite>

    Titre d’œuvre ou nom d’auteur

Rendu visuel

Par défaut, le navigateur met le bloc en retrait — sans bordure ni italique : cela, c’est du CSS.

Style CSS

Les blockquotes sont souvent stylées avec une bordure gauche et une indentation.

Citations inline : <q>

Citations courtes

html 

<p>
    Einstein a dit <q>L'imagination
    est plus importante que la
    connaissance</q>.
</p>

<!-- Avec attribution -->
<q cite="source.html">Citation</q>

Avantages

  • Guillemets automatiques

    Le navigateur ajoute les guillemets

  • Localisation

    Guillemets adaptés à la langue

  • Accessibilité

    Sémantique claire pour les lecteurs d’écran

Comparaison

Le document de cet aperçu est en français : les guillemets dessinés sont ceux du français.

International

En français : « guillemets », en anglais : "quotes".

Formatage avancé

Balises spécialisées pour différents types de contenu.

Adresses et contact : <address>

<address> — informations de contact

html 

<address>
    DevWeb Academy<br>
    123 Rue du Code<br>
    75001 Paris<br>
    <a href="mailto:contact@devweb.com">
        contact@devweb.com
    </a>
</address>

Usage

  • Usage

    • Contact de l’auteur/organisation
    • Adresse physique ou électronique
    • Informations de contact uniquement

Rendu visuel

Par défaut, le navigateur met une adresse en italique.

Attention

<address> n’est pas pour toutes les adresses, uniquement pour les contacts.

Temps : <time>

Balise time avec datetime

html 

<!-- Date complète -->
<time datetime="2024-12-25">
    25 décembre 2024
</time>

<!-- Date et heure -->
<time datetime="2024-12-25T14:30:00">
    25 déc. à 14h30
</time>

<!-- Durée -->
<time datetime="PT2H30M">
    2h30
</time>

Formats datetime

  • Formats datetime

    • YYYY-MM-DD : Date
    • HH:MM:SS : Heure
    • PTXHYM : Durée

Exemples pratiques

La date lisible est pour l’humain, l’attribut datetime pour la machine.

SEO

Les moteurs de recherche comprennent mieux les dates avec <time>.

Listes et organisation

Structurez vos informations avec les différents types de listes HTML.

Types de listes

  • <ul> — non ordonnée

    html 

    <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

    Les puces sont dessinées par le navigateur.

  • <ol> — ordonnée

    html 

    <ol>
    <li>Planifier</li>
    <li>Développer</li>
    <li>Tester</li>
</ol>

    La numérotation est automatique : aucun chiffre n’est tapé.

  • <dl> — définitions

    html 

    <dl>
    <dt>HTML</dt>
    <dd>Langage de balisage</dd>
    <dt>CSS</dt>
    <dd>Feuilles de style</dd>
</dl>

    Le terme reste à gauche, la définition est mise en retrait.

Listes avancées

Listes imbriquées

html 

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

Attributs des listes ordonnées

  • start="5"

    <ol start="5"> commence à cinq : « Cinquième étape », « Sixième étape »

  • type="A"

    <ol type="A"> numérote par lettres : « Premier point », « Deuxième point »

  • reversed

    <ol reversed> décompte : « Dernier », « Avant-dernier »

Listes imbriquées et attributs

Une liste imbriquée change de puce toute seule ; start, type et reversed pilotent la numérotation.

Exercice pratique

Créez une page complète utilisant toutes les balises de contenu apprises.

Mission : article de blog complet

Créez un article avec

  • Structure de base

    • Titre principal et sous-titres
    • 3-4 paragraphes de contenu
    • Une citation avec <blockquote>
    • Date de publication avec <time>

  • Formatage

    • Mots importants avec <strong>
    • Code avec <code>
    • Citations inline avec <q>
    • Spans stylés avec classes

  • Listes

    • Liste des technologies apprises
    • Étapes de développement (ordonnée)
    • Glossaire avec <dl>

  • Contact

    • Section auteur avec <address>
    • Informations de contact

Template de démarrage

html 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Article</title>
    <style>
        .highlight { background: yellow; }
        blockquote {
            border-left: 4px solid #ccc;
            padding-left: 1rem;
            font-style: italic;
        }
    </style>
</head>
<body>
    <!-- TODO: Votre contenu ici -->
    <article>
        <header>
            <!-- Titre + date -->
        </header>
        <!-- Contenu principal -->
        <footer>
            <!-- Informations auteur -->
        </footer>
    </article>
</body>
</html>

Objectifs

  • Utiliser au moins 8 balises différentes
  • Respecter la sémantique HTML
  • Créer un contenu lisible et accessible
  • Valider le code HTML

Maîtrisez le contenu HTML

Vous connaissez maintenant toutes les balises essentielles pour structurer votre contenu. Explorez les autres aspects du HTML pour créer des sites complets.