Principes de base du texte

Tout comme votre éditeur de texte fournit des titres <h1> à <h6>, ainsi qu'une multitude de façons de mettre en forme des sections de texte de manière significative et visuelle, HTML fournit un ensemble très similaire d'éléments sémantiques et non sémantiques pour donner du sens à la prose.

Cette section couvre les principales façons de baliser du texte, ou les bases du texte. Nous aborderons ensuite les attributs, avant d'explorer d'autres façons de baliser du texte, comme les listes, les tableaux et les formulaires.

Titres, revus et corrigés

Il existe six éléments de titre de section : <h1>, <h2>, <h3>, <h4>, <h5> et <h6>, <h1> étant le plus important et <h6> le moins. Pendant de nombreuses années, les développeurs ont été informés que les titres étaient utilisés par les navigateurs pour structurer les documents. C'était à l'origine un objectif, mais les navigateurs n'ont jamais implémenté de fonctionnalités de structuration de documents, et l'algorithme de structuration proposé a été officiellement supprimé de la spécification HTML. Toutefois, les utilisateurs de lecteurs d'écran s'appuient fortement sur les titres comme stratégie d'exploration pour en savoir plus sur le contenu d'une page, en naviguant dans les titres à l'aide de la touche h. S'assurer que les niveaux de titre sont implémentés de manière logique, comme vous le feriez pour structurer un document, rend votre contenu accessible et est fortement recommandé.

Par défaut, les navigateurs stylisent <h1> comme le plus grand, <h2> légèrement plus petit, chaque niveau de titre suivant étant plus petit par défaut. Historiquement, les feuilles de style de l'agent utilisateur réduisaient également la taille de la police des éléments <h1> imbriqués dans des éléments de sectionnement tels que <article>, <aside>, <nav>, ou <section>.

Certaines feuilles de style d'agent utilisateur incluaient les sélecteurs suivants (ou similaires) pour styliser les éléments <h1> imbriqués comme s'il s'agissait de niveaux de titre inférieurs :

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Toutefois, l'Accessibility Object Model (AOM) et les lecteurs d'écran n'ont jamais modifié les niveaux de titre en fonction de l'imbrication. Un <h1> imbriqué était toujours signalé comme "titre, niveau 1". Cela a créé une incohérence : les titres imbriqués apparaissaient visuellement plus petits tout en restant des titres de premier niveau pour les technologies d'assistance.

Étant donné que la spécification HTML a supprimé l'algorithme de structuration de documents, les navigateurs ont supprimé ces règles de feuille de style d'agent utilisateur héritées. Par conséquent, les éléments <h1> imbriqués conservent leur taille de police <h1> standard au lieu de se réduire automatiquement.

Ne vous fiez pas à l'imbrication d'éléments <h1> dans des éléments de sectionnement pour le style visuel ou la hiérarchie structurelle. Balisez toujours votre contenu à l'aide d'éléments de titre séquentiels (<h1> à <h6>) en fonction de la structure du document. Cela garantit que votre contenu est clair et accessible aux moteurs de recherche, aux lecteurs d'écran et aux futurs responsables de la maintenance.

En dehors des titres, la plupart des textes structurés sont constitués d'une série de paragraphes. En HTML, les paragraphes sont balisés avec la <p> balise. La balise de fermeture est facultative, mais toujours recommandée.

La section #about comporte un titre et quelques paragraphes :

Cette section n'est pas un repère, car elle n'a pas de nom accessible. Pour la transformer en region, qui est un rôle de repère, vous pouvez utiliser aria-labelledby pour fournir le nom accessible :

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Ne créez des repères que si et quand cela est approprié. Un nombre excessif de repères peut rapidement désorienter les utilisateurs de lecteurs d'écran.

Citations

Lorsque vous balisez un article ou un billet de blog, vous pouvez inclure une citation, avec ou sans citation visible. Il existe des éléments pour ces trois composants : <blockquote>, <q> et <cite> pour une citation visible, ou l'attribut cite pour fournir plus d'informations pour la recherche.

La section #feedback contient un en-tête et trois avis. Ces avis sont des citations en bloc, dont certaines contiennent des citations, suivies d'un paragraphe contenant la citation de la citation. En omettant le troisième avis pour gagner de l'espace, le balisage est le suivant :

Les informations sur l'auteur de la citation, ou la citation, ne font pas partie de la citation et ne figurent donc pas dans le <blockquote>, mais après la citation. Bien qu'il s'agisse de citations au sens courant du terme, elles ne citent pas réellement une ressource spécifique et sont donc encapsulées dans un élément de paragraphe <p>.

La citation apparaît sur trois lignes, y compris le nom de l'auteur, son rôle précédent et son aspiration professionnelle. Le saut de ligne <br> crée un saut de ligne dans un bloc de texte. Il peut être utilisé dans les adresses physiques, dans la poésie et dans les blocs de signature. Les sauts de ligne ne doivent pas être utilisés comme un retour chariot pour séparer les paragraphes. Fermez plutôt le paragraphe précédent et ouvrez-en un nouveau. L'utilisation de paragraphes pour les paragraphes est non seulement bénéfique pour l'accessibilité, mais permet également de les styliser. L'élément <br> n'est qu'un saut de ligne. Il est affecté par très peu de propriétés CSS.

Bien que nous ayons fourni des informations de citation dans un paragraphe suivant chaque citation en bloc, les citations présentées précédemment sont codées de cette manière, car elles ne proviennent pas d'une source externe. Si c'était le cas, la source peut (devrait ?) être citée.

Si l'avis a été extrait d'un site Web d'avis, d'un livre ou d'une autre œuvre, l'élément <cite> peut être utilisé pour le titre d'une source. Le contenu de <cite> peut être le titre d'un livre, le nom d'un site Web ou d'une émission de télévision, ou même le nom d'un programme informatique. L'<cite> encapsulation peut être utilisée que la source soit mentionnée en passant ou qu'elle source soit citée ou référencée. Le contenu de <cite> est l'œuvre, pas l'auteur.

Si la citation de Blendan Smooth a été extraite de son magazine hors ligne, vous écrivez la citation en bloc comme suit :

L'élément de citation <cite> n'a pas de rôle implicite et doit obtenir son nom accessible à partir de son contenu. N'incluez pas de aria-label.

Pour attribuer le crédit qui lui est dû lorsque vous ne pouvez pas rendre le contenu visible, il existe l'attribut cite, qui prend comme valeur l'URL du document ou du message source pour les informations citées. Cet attribut est valide à la fois sur <q> et <blockquote>. Bien qu'il s'agisse d'une URL, elle est lisible par machine, mais pas visible par le lecteur :

Bien que la balise de fermeture </p> soit facultative (et toujours recommandée), la balise de fermeture </blockquote> est toujours requise.

La plupart des navigateurs ajoutent un remplissage aux deux directions en ligne <blockquote> et mettent en italique le contenu <cite>. Cela peut être contrôlé avec CSS. Le <blockquote> n'ajoute pas de guillemets, mais ceux-ci peuvent être ajoutés avec du contenu généré par CSS. L'élément <q> ajoute des guillemets par défaut, en utilisant des guillemets adaptés à la langue.

Dans la section #teachers, HAL est cité comme disant : "Je suis désolé , mais je crains de ne pas pouvoir faire ça, ." Le code correspondant, en anglais et en français, est le suivant :

L'élément de citation en ligne, <q>, ajoute des guillemets adaptés à la langue. Les styles par défaut de l'agent utilisateur incluent le contenu généré par les guillemets ouvrants et fermants :

q::before {content: open-quote;}
q::after {content: close-quote;}

L'attribut lang est inclus pour indiquer au navigateur que, bien que la langue de base de la page ait été définie sur l'anglais dans la balise d'ouverture <html lang="en-US">, ce paragraphe de texte est dans une autre langue. Cela permet aux commandes vocales telles que Siri, Alexa et VoiceOver d'utiliser la prononciation française. Il indique également au navigateur le type de guillemets à afficher.

Comme <blockquote>, l'élément <q> est compatible avec l'attribut cite.

Entités HTML

Vous avez peut-être remarqué la séquence d'échappement ou "entité". Étant donné que le < est utilisé en HTML, vous devez l'échapper à l'aide de < ou d'un encodage moins facile à mémoriser <. Il existe quatre entités réservées en HTML : <, >, & et ". Leurs références de caractères sont respectivement <, >, & et ".

Voici quelques autres entités que vous utiliserez souvent : © pour le droit d'auteur (©), ™ pour la marque (™) et   pour l'espace insécable. Les espaces insécables sont utiles lorsque vous souhaitez inclure un espace entre deux caractères ou mots tout en empêchant un saut de ligne de se produire à cet endroit. Il existe plus de 2 000 références de caractères nommées. Toutefois, si nécessaire, chaque caractère, y compris les emoji, possède un équivalent encodé qui commence par &#.

Si vous examinez l'avis sur l'atelier de ToastyMcToastface (non inclus dans l'exemple de code ci-dessus), vous remarquerez des caractères de texte inhabituels :

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

La dernière phrase de cette citation en bloc peut également être écrite comme suit :

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

Ce code contient quelques caractères non échappés et quelques références de caractères nommées. Étant donné que le jeu de caractères est UTF-8, les derniers caractères de la citation en bloc n'ont pas besoin d'être échappés, comme dans cet exemple. Seuls les caractères non compatibles avec le jeu de caractères doivent être échappés. Si nécessaire, il existe de nombreux outils pour échapper différents caractères, ou vous pouvez simplement vous assurer d'inclure <meta charset="UTF-8"> dans le <head>.

Même lorsque vous spécifiez le jeu de caractères comme UTF-8, vous devez toujours échapper le < lorsque vous souhaitez imprimer ce caractère à l'écran. En règle générale, vous n'avez pas besoin d'inclure les références de caractères nommées pour >, ", ou &. Toutefois, si vous souhaitez écrire un tutoriel sur les entités HTML, vous devez écrire < lorsque vous apprenez à quelqu'un à coder un <. 😀

Oh, et cet emoji souriant est 😀, mais ce document est déclaré comme UTF-8, il n'est donc pas échappé.

Vérifiez vos connaissances

Testez vos connaissances sur le texte en HTML.