Principes de base du texte

De la même manière que votre éditeur de texte fournit <h1> aux en-têtes <h6>, ainsi que de nombreuses façons de mettre en forme des sections de texte de manière pertinente et visuelle, le langage HTML fournit un ensemble très similaire d'éléments sémantiques et non sémantiques pour donner un sens à la prose.

Cette section décrit les principales méthodes de balisage du texte, ou les principes de base du texte. Nous aborderons ensuite les attributs, puis nous examinerons d'autres moyens de balisage du texte, tels que les listes, les tableaux et les formulaires.

Titres revisités

Il y a six éléments d'en-tête de section : <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. <h1> est le plus important et <h6> le moins. Pendant de nombreuses années, les développeurs ont appris que les en-têtes étaient utilisés par les navigateurs pour décrire les documents. C'était à l'origine un objectif, mais les navigateurs n'ont pas mis en œuvre les fonctionnalités de description. Toutefois, les utilisateurs de lecteurs d'écran utilisent les titres comme stratégie d'exploration pour en savoir plus sur le contenu de la page, à l'aide de la touche h. Par conséquent, vous assurer que les niveaux de titre sont mis en œuvre comme vous le feriez pour décrire un document rend votre contenu accessible et reste très encouragé.

Par défaut, les navigateurs appliquent le style <h1> le plus grand et <h2> légèrement plus petit, chaque niveau de titre suivant étant plus petit par défaut. Par défaut, les navigateurs diminuent également la taille de police <h1> en fonction du nombre d'éléments <article>, <aside>, <nav> ou <section> dans lesquels elle est imbriquée.

Certaines feuilles de style user-agent incluent les sélecteurs suivants ou des éléments similaires pour appliquer un style aux éléments <h1> imbriqués comme s'ils étaient d'un niveau moins important:

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

En revanche, le modèle d'objet d'accessibilité (AOM, Accessibility Object Model) consigne toujours correctement le niveau de l'élément ; dans ce cas, "titre, niveau 1". Notez que le navigateur ne le fait pas pour les autres niveaux de titre. Toutefois, n'utilisez pas de style de navigateur basé sur les titres. Même si les navigateurs ne prennent pas en charge l'ajout de lignes, faites comme si c'était le cas ; balisez vos titres de contenu comme s'ils le faisaient. Votre contenu aura ainsi un sens pour les moteurs de recherche, les lecteurs d'écran et les futurs responsables (comme vous pourriez bien être vous).

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

La section #about comporte un titre et quelques paragraphes:

Cette section n'est pas un point de repère, car son nom n'est pas accessible. Pour en faire un 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 points de repère que si et quand c'est approprié. Avoir trop de points de repère peut rapidement être désorienté pour les utilisateurs de lecteurs d'écran.

Citations

Lorsque vous balisez un article ou un article de blog, vous pouvez inclure une citation ou 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 dans le cadre d'une recherche.

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

Les informations sur l'auteur ou la citation ne font pas partie de la citation, et donc pas dans la <blockquote>, mais sont placées après. 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, avec 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 retour chariot vers des paragraphes distincts. Au lieu de cela, fermez le paragraphe précédent et ouvrez-en un nouveau. L'utilisation de paragraphes est non seulement bonne pour l'accessibilité, mais elle permet également d'appliquer des styles. 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 sur les citations dans un paragraphe après chaque citation, celles présentées précédemment sont codées de cette manière, car elles ne proviennent pas d'une source externe. Si c'est 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é comme titre d'une source. Le contenu de <cite> peut être le titre d'un livre, le nom d'un site Web, d'une série TV, ou même le nom d'un programme informatique. L'encapsulation <cite> peut être utilisée, que la source soit mentionnée de manière passe, ou qu'elle soit citée ou référencée. Le contenu de <cite> est l'œuvre, pas son auteur.

Si la citation de Blendan Smooth était tirée de son magazine hors ligne, vous écririez la citation 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.

Afin d'indiquer que le contenu doit être mentionné lorsque vous ne pouvez pas rendre le contenu visible, l'attribut cite utilise l'URL du document source ou du message pour les informations citées comme valeur. Cet attribut est valide à la fois pour <q> et pour <blockquote>. Bien qu'il s'agisse d'une URL, elle est lisible par un ordinateur, mais pas visible pour le lecteur:

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

La plupart des navigateurs ajoutent une marge intérieure à la fois aux directions intégrées <blockquote> et au contenu <cite> en italique. Ce contrôle peut être contrôlé avec CSS. L'élément <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 suit : "Je suis désolé, , mais je suis désolé de ne pas pouvoir faire ça." Le code pour cela, en anglais et en français, est :

L'élément de guillemet intégré, <q>, ajoute des guillemets adaptés au langage. Les styles par défaut du user-agent incluent du contenu généré par des guillemets ouverts et fermés:

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

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

Comme <blockquote>, l'élément <q> accepte l'attribut cite.

Entités HTML

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

Vous utiliserez souvent les entités © pour les droits d'auteur (©), ™ pour les marques (TM) et   pour les espaces non scissionnels. Les espaces insécables sont utiles lorsque vous souhaitez insérer un espace entre deux caractères ou mots tout en empêchant un saut de ligne à 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, a un équivalent encodé qui commence par &#.

Si vous regardez l'avis de ToastyMcToastface sur l'atelier (non inclus dans l'exemple de code ci-dessus), il y a des caractères 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 peut aussi être écrite comme suit:

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

Il y a quelques caractères non échappés et quelques références de caractères nommés dans ce bazar de code. Comme le jeu de caractères est UTF-8, les derniers caractères de la citation 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 permettre l'échappement de différents caractères. Vous pouvez également vous assurer d'inclure <meta charset="UTF-8"> dans <head>.

Même lorsque vous spécifiez le jeu de caractères au format UTF-8, vous devez toujours échapper la < lorsque vous voulez 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 des entités HTML, vous devez écrire < lorsque vous enseignez à quelqu'un comment coder une <. 😀

L'emoji représentant un smiley est 😀, mais ce document est déclaré au format UTF-8. Il n'est donc pas échappé.

Testez vos connaissances

Testez vos connaissances sur le texte HTML.

Comment afficher un symbole de droits d'auteur en HTML ?

c

Réessayez.

©

Bonne réponse !

&copyright.

Réessayez.

Quel élément est utilisé pour indiquer que quelque chose est une citation ?

<blockquote>

Réponse correcte

<quote>

Réessayez.

<cite>

Réessayez. L'élément <cite> est utilisé pour indiquer la source d'une citation, et non la citation elle-même.