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

Nous avons abordé la plupart des éléments HTML, mais pas tous. Un domaine dont nous n'avons pas parlé concerne les éléments de texte intégrés. Contrairement aux idées reçues, HTML était à l'origine destiné à partager des documents, et non des vidéos de chats. Il existe de nombreux éléments qui fournissent une sémantique de texte à la documentation. Un module traite des liens et de l'élément <a>. Les autres ces éléments seront brièvement abordés ici.

Exemples de code et rédaction technique

Lorsque vous documentez des exemples de code, utilisez l'élément <code>. Par par défaut, le contenu textuel s'affiche avec une police à chasse fixe. Lorsque vous incluez plusieurs lignes de code, imbriquez <code> dans une <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é à un élément la traduction lisible par un ordinateur ; L'attribut value de l'élément fournit la traduction lisible par machine du contenu de de l'élément. Si le contenu <data> est lié à l'heure ou à la date, <time> , qui représente une période spécifique, doit être utilisé à la place.

L'élément <time> peut inclure l'attribut datetime pour indiquer l'heure et les dates dans un format lisible par l'ordinateur. Facile à comprendre, l'attribut datetime fournit des informations utiles pour des applications telles que les agendas et les moteurs de recherche.

Lorsque vous fournissez un exemple de sortie à partir d'un programme, utilisez <samp>. pour délimiter le texte. Généralement, le navigateur affiche également cet échantillon ou cette sortie entre guillemets dans une police à chasse fixe également.

Lorsque vous fournissez des instructions avec le clavier, le <kbd> peut être utilisé. Il s'agit d'une entrée utilisateur textuelle à 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 des expressions mathématiques ou variables de programmation. La plupart des navigateurs affichent le contenu textuel en italique de la police environnante. Si vous devez faire beaucoup de mathématiques, envisagez d'utiliser MathML, le service basé sur XML Langage de balisage mathématique permettant de décrire une notation mathématique.

Dans le théorème de pythagore, la puissance de deux utilisait l'exposant <sup>. . Il existe un élément d'indice similaire <sub> qui spécifie texte intégré qui doit s'afficher en indice pour des raisons uniquement typographiques. Les exposants et les indices sont des nombres, des chiffres, des symboles ou d'autres annotations plus petites que la ligne normale de type et situées légèrement au-dessus ou en dessous de la ligne. respectivement.

Utilisez <del> pour indiquer que le texte a été supprimé. Incluez éventuellement le cite défini sur la ressource qui explique la modification et l'attribut datetime avec le date ou heure au format de date et d'heure lisible par l'ordinateur. L'élément barré, <s>, permet d'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>. elle est utilisée pour indiquer le texte qui a été ajouté, ou "inséré", en incluant également les attributs cite ou datetime.

Définitions et langues prises en charge

Lorsque vous ajoutez des abréviations ou des acronymes, fournissez toujours la version développée complète du terme en texte brut dès la première utilisation. lorsque vous introduisez la représentation abrégée du terme entre l'ouverture et la clôture <abbr> tags; à moins que le terme ne soit connu du lecteur, tel que "HTML" et "CSS" de cette série. Seulement lors de cette première occurrence, lorsque l'abréviation ou l'acronyme est défini, est <abbr> nécessaire. L'attribut title n'est ni nécessaire, ni utile.

Lorsque vous définissez un terme qui n'est pas une abréviation ni un acronyme, utilisez la 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 environnant, veillez à inclure le lang pour identifier la langue.

Lorsque vous écrivez des langages dans différentes directions, HTML fournit le <bdi> permettant de traiter du texte potentiellement bidirectionnel indépendamment du texte environnant. Cette internationalisation est particulièrement utile lorsque du contenu dont la direction est inconnue est inséré de façon dynamique dans la page. La L'élément <bdo> remplace l'orientation actuelle du texte. pour afficher le texte 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 pour contenir ces annotations qui rendent les langues écrites comme le coréen, le chinois et le japonais plus faciles à lire. Rubis peut également être utilisé pour l'arabe, l'hébreu et le vietnamien.

La parenthèse rubis (<rp>) a été incluse dans la spécification pour ne contiennent pas de parenthèses ouvrantes et fermantes pour les navigateurs prend en charge l'affichage de <ruby>. Lorsque les navigateurs sont compatibles avec <ruby>, ce qui est le cas de tous les navigateurs récents, le contenu des éléments <rp> ne sont pas affichées. L'élément de texte Ruby (<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 le texte en fonction de la raison sémantique de cette accentuation (plutôt que pour des raisons de présentation, comme c'est le travail des CSS).

  • Utilisez l'élément <em> pour mettre l'accent sur 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 sémantique sens et peuvent être utilisées pour informer les user-agents auditifs comme les lecteurs d'écran, Alexa et Siri, pour mettre l'accent.
  • Utilisez l'élément <mark> pour identifier ou mettre en surbrillance du texte qui sont d'une manière ou d'une autre pertinents, par exemple la mise en surbrillance (ou le "marquage") de leur occurrence dans les résultats de recherche. Cela permet le contenu marqué à identifier rapidement sans accentuer ni importance.
  • L'élément <strong> identifie le texte comme fort l'importance. Les navigateurs affichent généralement le contenu avec une épaisseur de police plus lourde.
  • 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 les références abrégées ou les métadonnées de citation. comme le numéro ISBN d'un livre.

Trois éléments ont été temporairement abandonnés, mais ont été rajoutés au code HTML. Ils doivent être utilisés avec parcimonie, car ils n'offrent que peu ou pas de valeur sémantique. Vous devez toujours utiliser du code CSS 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, l'attribut lang identifiant la langue), les pensées ou les noms de vaisseaux. 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é uniquement pour mettre du texte en italique.

MLW utilise un élément <span> pour le texte bizarre figurant au bas de la remarque de l'atelier de Toasty McToastface. <span> fournit un conteneur intégré générique qui n'a pas de sémantique et ne représente rien. Il s'agirait également d'une utilisation appropriée de <i>.

Par défaut, l'élément <i> est affiché 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é à du contenu comportant des annotations non textuelles. Par exemple : vous voudrez peut-être annoter les mots mal orthographiés sciemment. Par défaut, le contenu est souligné, mais cela peut être contrôlé avec CSS, par exemple en ajoutant un 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> peut être utilisé pour attirer l'attention sur du texte qui n'est pas autrement importante. Cet élément ne transmet aucune information sémantique particulière et ne doit être utilisé que lorsqu'aucun des autres de cette section correspondent à l'objectif. Aucun exemple n'est fourni, car je n'ai pas pu trouver de cas d'utilisation valide. c'est ainsi que le "dernier recours" cet élément.

Espaces

Lorsque vous souhaitez insérer des sauts de ligne, par exemple pour écrire un poème ou un discours, l'élément "Saut de ligne fermant" <br> permet d'ajouter un retour chariot.

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

Fournir un séparateur ou une coupure 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 recherchée par les utilisateurs, ajoutez un élément <hr> . La HR signifie "règle horizontale". Bien que les navigateurs affichent généralement une ligne horizontale, cet élément a une signification sémantique. La Le rôle par défaut est separator.

HTML comporte également un élément qui permet de casser des mots. Le <wbr> à fermeture automatique fournit au navigateur une suggestion indiquant que, si un mot risque de déborder de son conteneur, c'est à cet endroit que le navigateur peut éventuellement casser la ligne. Ceci est couramment utilisé pour séparer les mots au sein avec des URL longues. Il n'ajoute pas de trait d'union.

Par exemple, dans la biographie d'Hal, il y a du texte écrit en byte code, où chaque octet est séparé par un espace. Octet de code ne contient pas d'espaces. Pour permettre à une longue chaîne de code d'octet de se rompre uniquement entre les 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 pas avoir de nœuds enfants, ni être imbriqués. ni texte. Comme aucun d'entre eux n'a d'"intérieur" où le contenu peut être stocké, elles n'ont pas de balise de fin.

Testez vos connaissances

Testez vos connaissances sur le texte intégré.

Quel élément doit être utilisé pour afficher un exemple de code ?

<code>
Bonne réponse !
<data>
Réessayez.
<kbd>
Réessayez.

À quoi sert l'élément <ruby> ?

Pour contenir des éléments décoratifs.
Réessayez.
Pour les annotations utilisées dans certaines langues
Bonne réponse !
Pour mettre en surbrillance le contenu de l’élément.
Réessayez.