Nous avons abordé la plupart des éléments HTML, mais pas tous. Nous n'avons pas abordé le sujet des éléments de texte intégrés.
Contrairement aux idées reçues, le HTML était initialement destiné au partage de documents, et non à des vidéos de chats. De nombreux éléments fournissent la sémantique du texte à la documentation. Un module couvre les liens et l'élément <a>. Le reste de ces éléments sera 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 est affiché en 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 un ordinateur. L'attribut value de l'élément fournit la traduction lisible par un ordinateur du contenu de l'élément. Si le contenu <data> est lié à l'heure ou à la 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 dates et des heures lisibles par l'ordinateur.
L'attribut datetime étant exploitable par un ordinateur, il fournit des informations utiles pour des applications telles que les agendas et les moteurs de recherche.
Lorsque vous fournissez un exemple de sortie d'un programme, utilisez l'élément <samp> pour délimiter le texte. De manière générale, le navigateur affiche également cet échantillon ou le résultat entre guillemets dans une police à chasse fixe.
Lorsque vous fournissez des instructions via une interaction avec le clavier, vous pouvez utiliser l'élément <kbd>. Il représente l'entrée textuelle de l'utilisateur sur un clavier, une saisie vocale ou tout autre périphérique 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 affichent le contenu textuel en italique, dans la police qui l'entoure.
Si vous faites 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 en exposant <sup>. Il existe un élément d'indice <sub> similaire qui spécifie le texte intégré qui doit être affiché en indice pour des raisons typographiques uniquement. Les exposants et les indices sont des nombres, des chiffres, des symboles ou d'autres annotations plus petits que la ligne normale et placés respectivement légèrement au-dessus ou en dessous de la ligne.
Utilisez <del> pour indiquer le texte qui a été supprimé.
Vous pouvez également inclure le cite défini sur la ressource qui explique la modification et l'attribut datetime avec la date ou l'heure au format de date et d'heure lisible par un ordinateur. 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>. Il 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 acceptées
Lorsque vous incluez des abréviations ou des acronymes, fournissez toujours la version complète et développée du terme en texte brut dès la première utilisation, car vous introduisez la représentation abrégée du terme entre les balises d'ouverture et de fermeture <abbr>, sauf si le terme est bien connu du lecteur, comme "HTML" ou "CSS" dans cette série. <abbr> n'est nécessaire que pour cette première occurrence, lorsque l'abréviation ou l'acronyme est défini. L'attribut title n'est ni nécessaire, ni utile.
Lorsque vous définissez un terme qui n'est ni une abréviation ni un acronyme, utilisez l'élément de définition <dfn> pour identifier le terme défini dans le contenu qui l'entoure.
Si le terme en cours de définition n'est pas dans la même langue que le texte qui l'entoure, veillez à inclure l'attribut lang pour identifier la langue.
Lorsque vous écrivez des langues dans différentes directions, le code HTML fournit l'élément <bdi> pour traiter le texte potentiellement bidirectionnel indépendamment du texte qui l'entoure. Cet élément d'internationalisation est particulièrement utile lorsque du contenu dont l'orientation est inconnue est inséré de manière dynamique dans la page. L'élément <bdo> remplace l'orientation actuelle du texte et affiche le texte dans une direction différente. Le W3C fournit une introduction aux 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 de langues écrites telles que 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 rubis (<rp>) a été incluse dans la spécification pour contenir des parenthèses d'ouverture et de fermeture pour les navigateurs qui ne sont pas compatibles avec l'affichage de <ruby>. Lorsque les navigateurs prennent en charge <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 en rubis (<rt>) contient les annotations réelles. 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>.
Mise en valeur du texte
Plusieurs éléments peuvent être utilisés pour accentuer du texte en fonction de la raison sémantique de cette mise en forme (plutôt que pour des raisons de présentation, car il s'agit d'un travail pour CSS).
- Utilisez l'élément
<em>pour mettre en avant une partie du 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 user-agents auditifs tels que les lecteurs d'écran, Alexa et Siri, afin de le mettre en valeur. - Utilisez l'élément
<mark>pour identifier ou mettre en surbrillance le texte qui est pertinent, par exemple pour mettre en surbrillance (ou "marquer") l'occurrence de termes de recherche dans les résultats de recherche. Cela permet d'identifier rapidement le contenu marqué sans le mettre en valeur ni le mettre en avant. - L'élément
<strong>identifie le texte comme ayant une grande importance. 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, 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, comme le numéro ISBN d'un livre.
Trois éléments ont été temporairement obsolètes, mais ont été rajoutés au code HTML. Ils doivent être utilisés avec parcimonie, le cas échéant, car ils n'apportent que peu ou pas de valeur sémantique, et le CSS doit toujours être utilisé pour appliquer des styles aux éléments HTML.
<i>
Les éléments <i> peuvent être utilisés pour des termes techniques, des mots étrangers (là encore, avec l'attribut lang identifiant la langue), des pensées ou des noms de navires. L'élément permet de différencier le contenu intégré du texte qui l'entoure pour une raison spécifique, telle qu'un texte idiomatique, des termes techniques et des désignations taxonomiques. Cet élément ne doit pas être utilisé uniquement pour mettre du texte en italique.
MLW utilise un élément <span> pour le texte bizarre au bas de l'évaluation de l'atelier de Toasty McToastface. L'élément <span> fournit un conteneur intégré générique qui n'a pas de sémantique et ne représente rien. Cela aurait également été une utilisation appropriée de <i>.
Par défaut, l'élément <i> affiche son style 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é aux contenus comportant des annotations non textuelles. Par exemple, vous pouvez annoter les mots mal orthographiés en connaissance de cause. Par défaut, le contenu est souligné, mais cela peut être contrôlé avec CSS, par exemple en ajoutant un trait de soulignement rouge ondulé pour imiter les indicateurs d'erreur grammaticale du traitement de texte.
<p>I always spell <u>licence</u> wrong</p>
<b>
L'élément <b> permet d'attirer l'attention sur du texte qui n'est pas important autrement. 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 remplit l'objectif. Aucun exemple n'est fourni, car je n'ai pas pu trouver de cas d'utilisation valide. C'est ainsi qu'est cet élément de type "dernier recours".
Espaces
Lorsque vous souhaitez ajouter des sauts de ligne, par exemple lors de l'écriture d'un poème ou d'une adresse physique, l'élément de saut de ligne à fermeture automatique, <br>, permet d'ajouter un retour chariot.
<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA 94040
</address>
Pour ajouter un séparateur ou une pause thématique entre les sections du contenu tangentiel (par exemple, entre les chapitres d'un livre ou entre le monologue de 5 000 mots et la recette recherchée par les utilisateurs), incluez un élément <hr>. La RH est l’abréviation de « 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 casser des mots. L'élément <wbr> qui se ferme automatiquement indique au navigateur que si un mot est susceptible de dépasser de son conteneur, le navigateur risque de rompre la ligne. Cette fonction est généralement utilisée pour séparer les mots
dans les URL longues. Elle n'ajoute pas de trait d'union.
Par exemple, dans la biographie de Hal, il y a du texte écrit en octet, chaque octet étant séparé par un espace. Le code de l'octet
ne contient pas d'espaces. Pour permettre à une longue chaîne de code d'octets de n'entrer qu'entre des octets si la ligne doit être encapsulée, 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 avoir aucun nœud enfant (ni des éléments imbriqués, ni du texte). Aucune balise de fin n'est associée à ces éléments, car aucun "intérieur" ne permet de stocker le contenu.
Testez vos connaissances
Testez vos connaissances sur le texte intégré.
Quel élément doit être utilisé pour afficher un exemple de code ?
<code><data><kbd>À quoi sert l'élément <ruby> ?