Formations aurelearn

Les balises rares

La balise <q> permet d’insérer une courte citation de quelques mots, à l’ivnerse de <blockquote> qui permet une plus grande latitude. Le contenu de cette balise est nativement entouré de guillemets.

index.html

<q>Être ou ne pas être : telle est la question</q><cite> - William Shakespeare</cite>

Être ou ne pas être : telle est la question - William Shakespeare

La balise <cite> permet d’indiquer la référence d’une citation contenue dans une balise <q> ou <blockquote>.

index.html

<figure>
<blockquote cite="https://fr.wikipedia.org/wiki/Les_Mis%C3%A9rables">
<p>Pour but, le salut ; pour moyen, le sacrifice.</p>
</blockquote>
<figcaption><cite>Les Misérables</cite></figcaption>
</figure>

Pour but, le salut ; pour moyen, le sacrifice.

Les Misérables

blockquote

source ↗

La balise <blockquote> représente une citation plutôt longue (à l’inverse de <q> qui est prévu pour afficher seulement quelques mots). Pour indiquer l’auteur de cette citation, il conviendra d’entourer la balise d’une <figure> et d’utiliser la balise <cite> dans le <figcaption>.

index.html

<figure>
<blockquote cite="https:/albert-einstein.com">
<p>Deux choses sont infinies : l'Univers et la bêtise humaine. Mais en ce qui concerne l'Univers, je n'en ai pas encore acquis la certitude absolue.</p>
</blockquote>
<figcaption><cite>Albert Einstein</cite></figcaption>
</figure>

Deux choses sont infinies : l’Univers et la bêtise humaine. Mais en ce qui concerne l’Univers, je n’en ai pas encore acquis la certitude absolue.

Albert Einstein

La balise <dfn> permet d’entourer un mot dans le cas où le suite de la phrase va le définir.

index.html

<p>Un <dfn>ananas</dfn> est une plante basse semi-pérenne, cultivée en régions tropicales qui fournit un fruit à la pulpe savoureuse.</p>
<p>Le <dfn title="Cascading Style Sheet">CSS</dfn> est un langage de présentation qui vise à mettre en forme une page HTML.</p>

Un ananas est une plante basse semi-pérenne, cultivée en régions tropicales qui fournit un fruit à la pulpe savoureuse.

Le CSS est un langage de présentation qui vise à mettre en forme une page HTML.

La balise <abbr> permet de spécifier une abbréviation suivie de son nom complet. Si le nom complet peut être omis, il convient alors de le spécifier dans l’attribut title.

index.html

<p>Le <abbr>HTML</abbr> (HyperText Markup Language) est un langage de programmation web.</p>
<p>Le <abbr title="HyperText Markup Language">HTML</abbr> est un langage de programmation web.</p>

Le HTML (HyperText Markup Language) est un langage de programmation web.

Le HTML est un langage de programmation web.

La balise <data> relie un contenu à sa version interprétable par un ordinateur. On pourrait l’utiliser pour afficher un produit (qui est lié à un ID) ou afficher son prix.

index.html

<p><data value="123">Mon produit génial</data></p>
<p>Ce produit est proposé au tarif exceptionnel de <data value="0.99">0,99€</data>.</p>

Mon produit génial

Ce produit est proposé au tarif exceptionnel de 0,99€.

La balise <time> représente une date au format humain, ainsi que sa valeur numérique dans l’attribut datetime. Elle doit être utilisée partout où une date (ou heure) a besoin d’être affichée.

index.html

<time datetime="2022-12-25 00:00:00">Lundi 25 décembre 2022</time>

La balise <sub> permet d’afficher du contenu sous forme d’indice.

index.html

<p>Nous avons tous besoin de H<sub>2</sub>0 pour survivre.</p>

Nous avons tous besoin de H20 pour survivre.

La balise <sup> permet d’afficher du contenu sous forme d’exposant.

index.html

<p>Je possède 300m<sup>2</sup> de terrain agricole.</p>

Je possède 300m2 de terrain agricole.

La balise <mark> est utilisée pour mettre en avant une portion de texte en la surlignant. Elle est notamment utilisée pour mettre en valeur des résultats de recherche.

index.html

<p>La recherche que j'ai faite m'a donné des résultats correspondant au terme <mark>stackoverflow</mark>.</p>

La recherche que j’ai faite m’a donné des résultats correspondant au terme stackoverflow.

<mark> et style

Si vous utilisez <mark> uniquement pour profiter du surlignement visuel, mieux vaut utiliser <span> qui ne possède aucune sémantique particulière.

La balise <wbr> permet de spécifier au navigateur toutes les opportunités où il peut couper du texte si besoin. Si vous souhaitez des tirets pour bien séparer les choses lorsque le navigateur coupe le texte, il convient alors de remplacer <wbr/> par &shy; (soft hyphens).

index.html

<p>anti<wbr/>constitution<wbr/>nellement</p>
<p style="font-size: min(8vw, 114px); margin-block: 2rem;">anti<wbr/>constitution<wbr/>nellement</p>
<p style="font-size: min(8vw, 114px); margin-block: 2rem;">anti&shy;constitution&shy;nellement</p>

anticonstitutionnellement

anticonstitutionnellement

anti­constitution­nellement

© 2023 • Aurélien Devaux