Nous avons abordé la plupart des éléments HTML, mais pas tous. Un domaine que nous n'avons pas abordé concerne les éléments de texte en ligne. Contrairement à ce que l'on pourrait penser, le langage HTML était à l'origine destiné au partage de documents, et non de vidéos de chats. De nombreux éléments fournissent une sémantique textuelle pour la documentation.
Il existe un module sur les liens et 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'élément <code>. Par défaut, le contenu textuel s'affiche dans une police à chasse fixe. Lorsque vous incluez plusieurs lignes de code, imbriquez <code> dans un élément <pre>, 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 une machine. L'attribut value de l'élément fournit la traduction lisible par une machine du contenu de l'élément. Si le contenu <data> est lié à une heure ou une date, l'élément <time>, qui représente une période spécifique, doit être utilisé à la place.
L'élément <time> peut inclure l'attribut datetime pour fournir des heures et des dates lisibles par l'homme dans un format lisible par les machines. L'attribut datetime est lisible par machine, ce qui fournit des informations utiles pour les applications, telles que les calendriers et les moteurs de recherche.
Lorsque vous fournissez un exemple de résultat d'un programme, utilisez l'élément <samp> pour encadrer le texte. Le navigateur affiche généralement cet exemple ou la sortie entre guillemets dans une police à chasse fixe.
L'élément <kbd> peut être utilisé pour fournir des instructions avec interaction au clavier. Il représente la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif 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 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 utilisait l'élément exposant <sup>. Il existe un élément d'indice <sub> semblable qui spécifie le texte intégré qui doit être affiché en indice pour des raisons purement 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 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 de date et heure lisible par machine. L'élément barré, <s>, peut être utilisé pour indiquer qu'un contenu n'est plus pertinent, mais qu'il n'a pas été supprimé du document.
<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é", en incluant éventuellement les attributs cite ou datetime.
Définitions et langues disponibles
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 du terme entre les balises d'ouverture et de fermeture <abbr>. <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.
Une exception à cette règle est 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 le contenu environnant.
Si le terme défini n'est pas dans la même langue que le texte environnant, veillez à inclure l'attribut lang pour identifier la langue.
Lorsque vous écrivez des langues de différentes directions, HTML fournit l'élément <bdi> pour traiter le texte potentiellement bidirectionnel de manière isolée par rapport au texte qui l'entoure. Cet élément d'internationalisation est particulièrement utile lorsque du contenu dont la directionnalité est inconnue est inséré de manière dynamique dans la page. L'élément <bdo> remplace la directionnalité actuelle du texte, en l'affichant dans une autre direction. Le W3C propose 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. Le 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 prennent pas en charge l'affichage de <ruby>. Lorsque les navigateurs sont compatibles avec <ruby>, ce qui est le cas de tous les navigateurs evergreen, le contenu des éléments <rp> n'est pas affiché. L'élément de texte ruby (<rt>) contient les annotations proprement dites. Ces deux éléments sont imbriqués dans <ruby>.
Notez que les parenthèses ne sont pas visibles si votre navigateur est compatible avec <ruby>.
Mettre en avant du texte
Plusieurs éléments peuvent être utilisés pour mettre en valeur du texte en fonction de la raison sémantique de cette mise en valeur (plutôt que pour des raisons de présentation, car c'est le rôle du CSS).
- Utilisez l'élément
<em>pour mettre en avant ou souligner une partie du contenu. L'élément<em>peut être imbriqué, chaque niveau d'imbrication indiquant un degré d'emphase plus élevé. Cet élément a une signification sémantique et peut être utilisé pour informer les agents utilisateurs audio tels que les lecteurs d'écran, Alexa et Siri, afin de mettre en évidence un élément. - Utilisez l'élément
<mark>pour identifier ou mettre en évidence du texte pertinent, par exemple en mettant en surbrillance (ou en "marquant") l'occurrence des termes de recherche dans les résultats de recherche. Cela permet d'identifier rapidement le contenu marqué sans ajouter d'emphase ni d'importance. - L'élément
<strong>indique que le texte est 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 principes de base du texte, permet de 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 ces œuvres, 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. Elles doivent être utilisées avec parcimonie, voire pas du tout, car elles n'apportent que peu ou pas de valeur sémantique. De plus, le CSS doit toujours être utilisé pour la mise en forme des éléments HTML.
<i>
Les éléments <i> peuvent être utilisés pour les termes techniques, les mots étrangers (avec l'attribut lang qui identifie la langue), les pensées ou les noms de navires. L'élément est utilisé pour différencier le contenu intégré du texte environnant pour une raison spécifique, comme 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 élément <span> pour le texte étrange en bas de l'avis sur l'atelier de Toasty McToastface. L'élément <span> fournit un conteneur générique en ligne qui n'a aucune sémantique et ne représente rien. Il s'agit également d'une utilisation appropriée de <i>.
Le style par défaut de l'élément <i> consiste à afficher l'élément 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 des annotations non textuelles. Par exemple, vous pouvez annoter les mots mal orthographiés à dessein. 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 grammaticale des logiciels de 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 par ailleurs. Cet élément ne transmet aucune information sémantique particulière et ne doit être utilisé que lorsqu'aucun des autres éléments de cette section ne convient. Aucun exemple n'est fourni, car je n'ai pas trouvé de cas d'utilisation valide. C'est dire à quel point cet élément est un "dernier recours".
Espace blanc
Lorsque vous souhaitez insérer des sauts de ligne, par exemple pour écrire un poème 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 insérer un séparateur ou une pause 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 élément <hr>. 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 dispose également d'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 de son conteneur, il s'agit d'un endroit où le navigateur peut éventuellement passer à la ligne. Il est généralement utilisé pour insérer un saut de ligne entre les mots dans les longues URL. Il 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 permettre à une longue chaîne de code d'octet de se scinder uniquement entre les octets si la ligne doit être renvoyée à la ligne, nous incluons l'élément <wbr> à chaque emplacement de scission :
<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 éléments imbriqués, ni texte). Comme aucun de ces éléments ne contient de "contenu", ils n'ont pas de balise de fin.
Vérifier que vous avez bien compris
Testez vos connaissances sur le texte intégré.
Quel élément doit être utilisé pour afficher un exemple de code ?
<code><kbd><data>À quoi sert l'élément <ruby> ?