📚 Le contenu textuel en HTML
Le HTML propose de nombreuses balises pour structurer et mettre en forme du texte. Nous allons
découvrir les titres, paragraphes, emphases, listes et liens - les bases essentielles de tout site
web.
📐 Les titres (h1 à h6)
HTML propose 6 niveaux de titres, de <h1> (le plus important) à
<h6> (le moins important).
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Section</h3>
<h4>Sous-section</h4>
<h5>Paragraphe</h5>
<h6>Détail</h6>
Titre h1
Titre h2
Titre h3
Titre h4
Titre h5
Titre h6
⚠️ Important : Un seul <h1> par page, respecter la hiérarchie (pas de h3
après un h1)
📝 Paragraphes et texte
Les balises de base pour structurer du texte.
<p>Paragraphe de texte</p>
<strong>Texte important</strong>
<em>Texte emphase</em>
<mark>Texte surligné</mark>
<small>Petit texte</small>
<del>Texte supprimé</del>
<ins>Texte inséré</ins>
<code>Code inline</code>
Ceci est un paragraphe normal.
Texte en gras (important)
Texte en italique (emphase)
Texte surligné
Texte de petite taille
Texte supprimé
Texte inséré
console.log('Hello')
💡 Astuce : <strong> et <em> ont un sens sémantique, pas juste visuel
<ul> - Liste non ordonnée
Liste à puces, sans ordre particulier.
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
📍 Usage : Menus, listes de features, tags...
<ol> - Liste ordonnée
Liste numérotée, avec un ordre précis.
<ol>
<li>Étape 1</li>
<li>Étape 2</li>
<li>Étape 3</li>
</ol>
- Ouvrir VS Code
- Créer un fichier HTML
- Coder !
📍 Usage : Instructions, classements, étapes...
🔁 Listes imbriquées
On peut mettre des listes dans des listes !
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>
💡 Astuce : Très utilisé pour les menus de navigation
<a> - Lien simple
Balise d'ancrage pour créer des liens hypertexte.
<a href="https://google.com">
Visiter Google
</a>
📌 Attribut : href définit la destination
🆕 Nouvel onglet
Ouvrir un lien dans un nouvel onglet.
<a href="https://google.com"
target="_blank">
Nouvel onglet
</a>
⚠️ Sécurité : Ajouter rel="noopener" avec target="_blank"
📧 Lien email
Créer un lien qui ouvre le client email.
<a href="mailto:contact@site.com">
Nous contacter
</a>
💡 Bonus : href="tel:0123456789" pour numéro de téléphone
🔖 Lien d'ancrage
Lien vers une section de la même page.
<a href="#section2">
Aller à la section 2
</a>
<section id="section2">
Contenu...
</section>
📍 Usage : Table des matières, "retour en haut", navigation interne
📂 Lien relatif
Lien vers une autre page du même site.
<!-- Même dossier -->
<a href="
contact.html">Contact</a>
<!-- Dossier parent -->
<a href="
../index.html">Accueil</a>
<!-- Sous-dossier -->
<a href="
pages/about.html">À propos</a>
💡 Chemin :
• ./ = dossier actuel
• ../ = dossier parent
• / = racine du site
🎨 Styles de liens
Les liens ont 4 états CSS différents.
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
📚 États :
• :link = lien non visité
• :visited = lien visité
• :hover = survol souris
• :active = au clic
