HTML - Contenu Textuel

Gestion de Contenu

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

📝 Balises de Texte
🎯 Sémantique
♿ Accessibilité

Paragraphes et Blocs de Texte

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

La Balise <p>

Syntaxe et Usage :

<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 :

Ceci est le premier paragraphe. Il contient du texte normal et illustre l'espacement automatique entre les paragraphes.

Ce paragraphe a une classe CSS qui change la couleur et la graisse du texte.

Le dernier paragraphe montre comment les paragraphes s'enchaînent naturellement avec un espacement cohérent.

💡 Bonnes pratiques : N'utilisez pas <p> pour l'espacement, utilisez plutôt CSS (margin, padding).

Conteneurs : <div> et <section>

<div> - Conteneur générique :

<div class="article-content">
<p>Premier paragraphe...</p>
<p>Deuxième paragraphe...</p>
</div>
Usage :
  • • Regroupement sans sémantique
  • • Styling CSS
  • • Layout et positioning

<section> - Section sémantique :

<section>
<h2>Titre de section</h2>
<p>Contenu de la section...</p>
</section>
Usage :
  • • 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 :

<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 :

Dans ce paragraphe, le mot important est surligné avec une classe CSS.

Vous pouvez aussi avoir du texte coloré et souligné dans la même phrase.

Les éléments inline ne cassent pas le flux du texte.

⚠️ Attention : <span> n'a aucune sémantique. Préférez les balises sémantiques quand c'est possible.

Éléments de Formatage Inline

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

Citations et Références

Structurez correctement vos citations avec les balises appropriées.

Citations : <blockquote>

Syntaxe complète :

<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 :

"L'imagination est plus importante que la connaissance. Car la connaissance est limitée, tandis que l'imagination englobe le monde entier."

— Albert Einstein

"Le web est conçu pour être décentralisé afin que chacun puisse y participer."

— Tim Berners-Lee
💡 Style CSS : Les blockquotes sont souvent stylées avec une bordure gauche et une indentation.

Citations Inline : <q>

Citations courtes :

<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 :

Avec <q> :

Einstein a dit L'imagination est plus importante que la connaissance.

Sans balise :

Einstein a dit "L'imagination est plus importante que la connaissance".

Citations imbriquées :

Il a répondu : Elle m'a dit Bonjour en arrivant.

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

Formatage Avancé

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

Adresses et Contact

<address> - Informations de contact :

<address>
DevWeb Academy<br>
123 Rue du Code<br>
75001 Paris<br>
<a href="mailto:contact@devweb.com">
contact@devweb.com
</a>
</address>
📍 Usage :
  • • Contact de l'auteur/organisation
  • • Adresse physique ou électronique
  • • Informations de contact uniquement

Rendu visuel :

DevWeb Academy
123 Rue du Code
75001 Paris
contact@devweb.com
+33 1 23 45 67 89
⚠️ Attention : <address> n'est pas pour toutes les adresses, uniquement pour les contacts.

Temps : <time>

Balise time avec datetime :

<!-- 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 :
  • • YYYY-MM-DD : Date
  • • HH:MM:SS : Heure
  • • PTXHYM : Durée

Exemples pratiques :

Article publié le

Conférence prévue le

Durée de la formation :

Mis à jour

🤖 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 :

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

<ol> - Ordonnée :

<ol>
<li>Planifier</li>
<li>Développer</li>
<li>Tester</li>
</ol>
  1. 1. Planifier
  2. 2. Développer
  3. 3. Tester

<dl> - Définitions :

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

Listes Avancées

Listes imbriquées :

<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>
  • Frontend
    • • HTML
    • • CSS
  • Backend
    • • PHP
    • • Node.js

Attributs des listes ordonnées :

start="5" :
<ol start="5">
  1. Cinquième étape
  2. Sixième étape
type="A" :
<ol type="A">
  1. Premier point
  2. Deuxième point
reversed :
<ol reversed>
  1. Dernier
  2. Avant-dernier

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 :

<!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.

🖼️ Images 🔗 Liens 📊 Tableaux 📝 Formulaires 📦 Imbrication 🎨 CSS