Titres et textes
Les balises de titrage (<h1> à <h6>)
Section intitulée « Les balises de titrage (<h1> à <h6>) »Il existe 6 niveaux de titres en HTML, de <h1> à <h6>.
<h1>est utilisé pour le titre principal de la page<h2>pour les sous-titres<h3>à<h6>pour les titres de niveau inférieur (sous-sections)
Exemple :
Section intitulée « Exemple : »<!-- Titre principal --><h1>Apprendre le HTML en s'amusant</h1>
<!-- Chapitre --><h2>Chapitre 1 : Les balises de base</h2>
<!-- Sous-section --><h3>1.1 Les différentes balises</h3>Règles à respecter :
Section intitulée « Règles à respecter : »- Un seul
<h1>par page. - Pas de saut de niveau (ne pas passer de
<h1>à<h3>directement). - Utilise une hiérarchie logique pour améliorer le SEO et l’accessibilité (notamment pour les lecteurs d’écran).
Exemple à structurer :
Section intitulée « Exemple à structurer : »Tu peux t’exercer avec ce texte sur les chats, à structurer avec les bonnes balises :
<h1>Qui sont les chats ?</h1><p> Les <strong>chats</strong> sont les membres de la famille des <em>félins</em>, et ils partagent de nombreuses caractéristiques avec leurs cousins : les lions, les tigres et les panthères.</p>
<h2>Quelle est l'histoire des chats ?</h2>
<h3>Les premiers chats domestiques</h3><p> Les chats sont originaires d'Afrique, d'Asie et d'Europe, et ils ont été domestiqués il y a environ 9 000 ans...</p>
<h3>La domestication des chats en Europe</h3><p>Les chats ont été introduits en Europe au Moyen Âge...</p>
<h2>Quelles sont les caractéristiques des chats ?</h2><p> Ils sont <em>très flexibles</em>, peuvent sauter jusqu’à cinq fois leur hauteur, et courir à <abbr title="kilomètres">km</abbr>/<abbr title="heure" >h</abbr >.</p>Mettre du texte en valeur
Section intitulée « Mettre du texte en valeur »<strong> = importance (gras)
Section intitulée « <strong> = importance (gras) »Pour signaler que le mot est important.
<strong>chats</strong><em> = emphase (italique)
Section intitulée « <em> = emphase (italique) »Pour insister sur un mot.
<em>félins</em>Information
Ces balises sont sémantiques, donc accessibles et bonnes pour le référencement.
Les balises à éviter pour le style
Section intitulée « Les balises à éviter pour le style »<b>= gras<i>= italique<u>= souligné
Attention
Ces balises ne donnent aucun sens au texte. Utilise plutôt du CSS pour gérer l’apparence (gras, italique, souligné).
Citations
Section intitulée « Citations »Bloc de citation :
Section intitulée « Bloc de citation : »<blockquote cite="https://fr.wikipedia.org/wiki/Chat"> Les chats sont les membres de la famille des félins...</blockquote>Abréviations
Section intitulée « Abréviations »Utilise <abbr> pour afficher une explication au survol :
<abbr title="kilomètres">km</abbr> <abbr title="heures">h</abbr>Afficher du code
Section intitulée « Afficher du code »Pour afficher du code dans une page HTML :
<pre> <code><h1>Hello, world</h1><p>Bienvenue sur mon site</p> </code></pre>Le bloc
<pre></pre>garde les retours à la ligne et les espaces. Le bloc<code></code>indique qu’il s’agit de code.Les caractères spéciaux doivent être encodés :
&→&<→<>→>"→"
Récapitulatif
Section intitulée « Récapitulatif »| Action | Balise recommandée | À éviter |
|---|---|---|
| Titre principal | <h1> | Jamais plus d’un |
| Sous-titre | <h2> à <h6> | Ne pas sauter de niveau |
| Mettre en gras sémantiquement | <strong> | <b> |
| Mettre en italique sémantiquement | <em> | <i> |
| Souligner | ❌ via CSS uniquement | <u> |
| Citation | <blockquote> | - |
| Abréviation | <abbr> | - |
| Code HTML visible | <pre><code>...</code></pre> | - |