Autres éléments de texte intégrés

Nous avons abordé la plupart des éléments HTML, mais certainement pas tous. Nous n'avons pas encore parlé des éléments de texte en ligne. Contrairement à une idée reçue, le langage HTML était initialement destiné au partage de documents, et non de vidéos de chats. De nombreux éléments fournissent une sémantique de texte pour la documentation.

Un module traite des liens et de l'élément <a>. Le reste de ces éléments est brièvement abordé ici.

Exemples de code et rédaction technique

Lorsque vous documentez des exemples de code, utilisez l' <code> élément. Par défaut, le contenu textuel s'affiche dans une police à chasse fixe. Lorsque vous incluez plusieurs lignes de code, imbriquez l'élément <code> dans un <pre> élément, qui représente du texte préformaté.

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

L'élément <data> associe un contenu donné à une traduction lisible par machine. L'attribut value de l'élément fournit la traduction lisible par machine du contenu de l'élément. Si le <data> contenu est lié à une heure ou à une date, vous devez utiliser l' <time> élément, qui représente une période spécifique.

L'élément <time> peut inclure l'attribut datetime pour fournir des heures et des dates lisibles par l'utilisateur au format lisible par machine. L'attribut datetime est lisible par machine, ce qui fournit des informations utiles aux applications, telles que les agendas et les moteurs de recherche.

Lorsque vous fournissez un exemple de sortie d'un programme, utilisez l' <samp> élément pour encadrer le texte. Le navigateur affiche généralement cet exemple ou cette sortie entre guillemets dans une police à chasse fixe.

Lorsque vous fournissez des instructions avec une interaction au clavier, l' <kbd> élément peut être utilisé. Il représente l'entrée utilisateur textuelle à partir d'un clavier, d'une saisie vocale ou de tout autre appareil de saisie de texte.

L'élément <var> peut être utilisé pour les expressions mathématiques ou les variables de programmation. La plupart des navigateurs présentent le contenu textuel dans une version en italique de la police environnante. Si vous écrivez beaucoup de mathématiques, envisagez d'utiliser MathML, le langage de balisage mathématique basé sur XML pour décrire la notation mathématique.

La puissance de deux dans le théorème de Pythagore a utilisé l'élément <sup> exposant. Il existe un élément indice <sub> semblable qui spécifie le texte en ligne qui doit être affiché en indice pour des raisons uniquement typographiques. Les exposants et les indices sont des nombres, des chiffres, des symboles ou d'autres annotations plus petits que la ligne de texte normale et placés légèrement au-dessus ou en dessous de la ligne, respectivement.

Utilisez <del> pour indiquer le texte qui a été supprimé. Vous pouvez également inclure l'attribut cite défini sur la ressource qui explique la modification et l'attribut datetime avec la date ou la date et l'heure au format lisible par machine. L'élément barré, <s>, peut être utilisé pour indiquer que le contenu n'est plus pertinent, mais qu'il n'a pas été supprimé du document.

Le <ins> est l' opposé de l'élément <del>. Cet élément est utilisé pour indiquer le texte qui a été ajouté ou inséré, y compris éventuellement les attributs cite ou datetime.

Définitions et prise en charge des langues

Lorsque vous incluez des abréviations ou des acronymes, fournissez toujours la version complète du terme en texte brut lors de la première utilisation. Ensuite, insérez la représentation abrégée de le terme entre les balises <abbr> d'ouverture et de fermeture. L'élément <abbr> n'est nécessaire que lors de la première occurrence, lorsque l'abréviation ou l'acronyme est défini. L'attribut title n'est ni nécessaire ni utile.

L'exception à cette règle se produit si le terme est considéré comme bien connu du lecteur, comme HTML et CSS dans cette série.

Lorsque vous définissez un terme qui n'est pas une abréviation ni un acronyme, utilisez l'élément de définition <dfn> pour identifier le terme défini dans son contenu environnant.

Si le terme défini n'est pas dans la même langue que le texte environnant, veillez à inclure l'lang attribut pour identifier la langue.

Lorsque vous écrivez des langues de différentes directions, HTML fournit l'<bdi> élément pour traiter le texte potentiellement bidirectionnel de manière isolée du texte environnant. Cet élément d'internationalisation est particulièrement utile lorsque du contenu de directionnalité inconnue est inséré de manière dynamique dans la page. L'élément <bdo> remplace la directionnalité actuelle du texte, ce qui le rend dans une direction différente. Le W3C fournit une présentation des algorithmes bidirectionnels.

Certains jeux de caractères incluent de petites annotations placées au-dessus ou à droite des caractères pour fournir des informations sur la prononciation. L'élément <ruby> est le conteneur à utiliser pour contenir ces annotations qui facilitent la lecture des langues écrites comme le coréen, le chinois et le japonais. Ruby peut également être utilisé pour l'hébreu, l'arabe et le vietnamien.

La parenthèse ruby (<rp>) a été incluse dans la spécification pour contenir les parenthèses ouvrantes et fermantes pour les navigateurs qui ne sont pas compatibles avec l'affichage de <ruby>. Lorsque les navigateurs sont compatibles avec <ruby>, ce qui est le cas de tous les navigateurs permanents, le contenu des éléments <rp> n'est pas affiché. L'élément de texte ruby (<rt>) contient les annotations réelles. Les deux sont imbriqués dans le <ruby>.

Notez que les parenthèses ne sont pas visibles si votre navigateur est compatible avec <ruby>.

Mettre en évidence du texte

Plusieurs éléments peuvent être utilisés pour mettre en évidence du texte en fonction de la raison sémantique de la mise en évidence (plutôt que pour des raisons de présentation, car il s'agit d'une tâche pour CSS).

• Utilisez l'élément <em> pour mettre en évidence ou souligner une étendue de contenu. L'élément <em> peut être imbriqué, chaque niveau d'imbrication indiquant un degré d'accentuation plus élevé. Cet élément a une signification sémantique et peut être utilisé pour informer les agents utilisateurs auditifs tels que les lecteurs d'écran, Alexa et Siri, afin de mettre l'accent sur le texte.
• Utilisez l'élément <mark> pour identifier ou mettre en évidence du texte pertinent, par exemple en mettant en évidence (ou "marquant") l'occurrence de termes de recherche dans les résultats de recherche. Cela permet d'identifier rapidement le contenu marqué sans ajouter d'accentuation ni d'importance.
• L'élément <strong> identifie le texte comme étant très important. Les navigateurs affichent généralement le contenu avec une épaisseur de police plus importante.
• L'élément <cite>, abordé dans les bases du texte, est utilisé pour marquer les titres de livres, d'articles ou d'autres œuvres créatives, ou une référence abrégée ou des métadonnées de citation pour ceux-ci, comme le numéro ISBN d'un livre.

Trois éléments ont été temporairement obsolètes, mais ont été réintégrés dans HTML. Ils doivent être utilisés avec parcimonie, voire pas du tout, car ils n'offrent que peu ou pas de valeur sémantique. De plus, le CSS doit toujours être utilisé pour le style des éléments HTML.

<i>

Les éléments <i> peuvent être utilisés pour les termes techniques, les mots étrangers (avec l' lang attribut identifiant la langue), les pensées ou les noms de navires. L'élément est utilisé pour différencier le contenu en ligne du texte environnant pour une raison spécifique, telle que le texte idiomatique, les termes techniques et les désignations taxonomiques.

Cet élément ne doit pas être utilisé pour mettre du texte en italique.

MLW utilise un <span> élément pour le texte étrange en bas de l'avis sur l'atelier de Toasty McToastface. L'élément <span> fournit un conteneur en ligne générique sans sémantique et ne représente rien. Cela aurait également été une utilisation appropriée de <i>.

Le style par défaut de l'élément <i> consiste à afficher l'élément dans une police en italique. Dans cet exemple, nous définissons font-style: normal, car les caractères utilisés ne sont pas disponibles en italique.

<u>

L'élément <u> est destiné au contenu comportant une annotation non textuelle. Par exemple, vous pouvez annoter des mots mal orthographiés. Par défaut, le contenu est souligné, mais cela peut être contrôlé avec CSS, par exemple en ajoutant un soulignement ondulé rouge pour imiter les indicateurs d'erreur de grammaire du traitement de texte.

<p>I always spell <u>licence</u> wrong</p>

<b>

L'élément <b> peut être utilisé pour attirer l'attention sur du texte qui n'est pas important. Cet élément ne transmet aucune information sémantique spéciale et ne doit être utilisé que si aucun des autres éléments de cette section ne correspond à l'objectif. Aucun exemple n'est fourni, car je n'ai pas pu trouver de cas d'utilisation valide. C'est à quel point cet élément est un "dernier recours".

Espace blanc

Lorsque vous souhaitez des sauts de ligne, par exemple lorsque vous écrivez de la poésie ou une adresse physique, l'élément de saut de ligne à fermeture automatique, <br>, est utilisé pour ajouter un retour chariot.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

Pour fournir un séparateur ou une rupture thématique entre des sections de contenu tangentiel, par exemple entre les chapitres d'un livre ou entre le monologue de 5 000 mots et la recette que vos utilisateurs recherchent réellement, incluez un <hr> élément. HR signifie "horizontal rule" (règle horizontale). Bien que les navigateurs affichent généralement une ligne horizontale, cet élément a une signification sémantique. Le rôle par défaut est separator.

HTML comporte également un élément qui permet de couper les mots. L'élément <wbr> à fermeture automatique suggère au navigateur que si un mot risque de dépasser son conteneur, il s'agit d'un endroit où le navigateur peut éventuellement couper la ligne. Cette méthode est couramment utilisée pour couper les mots dans les longues URL. Elle n'ajoute pas de trait d'union.

Par exemple, dans la biographie de Hal, le texte est écrit en code d'octet, chaque octet étant séparé par un espace. Le code d'octet ne comporte pas d'espaces. Pour qu'une longue chaîne de code d'octet ne soit coupée qu'entre les octets si la ligne doit être renvoyée à la ligne, nous incluons l'élément <wbr> à chaque opportunité de coupure :

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

Les éléments <br>, <hr> et <wbr> sont tous des éléments vides, ce qui signifie qu'ils ne peuvent pas avoir de nœuds enfants, ni d'éléments imbriqués ni de texte. Comme aucun de ces éléments n'a d'"intérieur" où le contenu peut être stocké, ils n'ont pas de balise de fin.

Vérifiez vos connaissances

Testez vos connaissances sur le texte en ligne.