Texte – <HTML> #CSS

<h1> à <h6>

<h...> comme heading | titre
Les balises <h1> à <h6> définissent six niveaux de titres, du plus important (<h1>) au moins important (<h6>)

Respectez au mieux le niveau hiérarchique des titres en commençant par le titre le plus important (<h1>) jusqu'au titre de moindre importance (<h6>)

Code

Aperçu dans le navigateur

<h1> à <h6> utilise les attributs globaux

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

<p>

<p> comme paragraphe
Ajoute un paragraphe
Cette balise se caractérise par l'ajout d'une marge de 1em avant <p> et après </p>

Code

Aperçu dans le navigateur

<p> utilise les attributs globaux

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

<pre>

<pre> comme preformated text | texte préformaté
Représente du texte préformaté, il est affiché dans le navigateur de la même manière qu'il est saisie (espace et saut de ligne compris)

Une balise saisie à l'intérieur de <pre> est interprétée tel quelle et non affichée comme saisie

Code

Aperçu dans le navigateur

<pre> utilise les attributs globaux

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

<br>

<br> comme break
Ajoute un saut de ligne

Même si possible, évitez d'appliquer un style Css à cette balise

Code

Aperçu dans le navigateur

<br> utilise les attributs globaux

<hr>

<hr> comme horizontal rule | règle horizontale
Ajoute une ligne horizontale
Cette balise sert à séparer visuellement deux zones de contenu

Code

Aperçu dans le navigateur

<hr> utilise les attributs globaux

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

<strong>

<strong> comme fort
Accentue le texte en gras, le rend important

Code

Aperçu dans le navigateur

<strong> utilise les attributs globaux

strong {
  font-weight: bold;
}

<b>

<b> comme bold | gras
Accentue le texte en gras

A n'utiliser qu'en dernier recours, il est préférable d'utiliser du style Css ou la balise <strong> à la place

Code

Aperçu dans le navigateur

<b> utilise les attributs globaux

b {
  font-weight: bold;
}

<em>

<em> comme emphasized | emphase
Accentue le texte en italique

Code

Aperçu dans le navigateur

<em> utilise les attributs globaux

em {
  font-style: italic;
}

<i>

<i> comme italic | italique
Accentue le texte en italique

A n'utiliser qu'en dernier recours, il est préférable d'utiliser du style Css ou la balise <em> à la place

Code

Aperçu dans le navigateur

<i> utilise les attributs globaux

i {
  font-style: italic;
}

<mark>

<mark> comme mark | marqué
Représente un texte surligné

Code

Aperçu dans le navigateur

<mark> utilise les attributs globaux

mark {
  background-color: yellow;
  color: black;
}

<small>

<small> comme small | petit
Représente le texte en petits caractères

A n'utiliser qu'en dernier recours, il est préférable d'utiliser du style Css à la place

Code

Aperçu dans le navigateur

<small> utilise les attributs globaux

small {
  font-size: smaller;
}

<del>

<del> comme delete | effacé
Représente du texte qui a été effacé, et apparait comme étant barré

Cette balise s'utilise bien souvent avec la balise <ins> qui indique l'insertion de texte

Code

Aperçu dans le navigateur

<del> utilise les attributs globaux

cite

Indique l'url vers une page expliquant pourquoi le texte est considéré comme supprimé

<del cite="url">

Valeur	Description	Infos
url	L'url, le lien vers une page expliquant pourquoi le texte est considéré comme supprimé En valeur absolue (le plus souvent) ou en valeur relative
url	`<del cite="url">texte</del>` <del cite="http://www.monsiteweb.com/revision.html">un texte supprimé avec une source citée</del>

datetime

Indique la date / heure à laquelle le texte a été considéré comme supprimé

<del datetime="date/heure">

Valeur	Description	Infos
AAAA-MM-JJThh:mm:ssZ	La date à laquelle le texte a été considéré comme supprimé L'heure est en option Le format peut-être AAAA-MM-JJThh:mm:ssZ avec : AAAA : l'année sur 4 chiffres (2022) MM : le mois sur 2 chiffres (12) JJ : le jour sur 2 chiffres (05) T : caractére de séparation hh : l'heure sur 2 chiffres (08) mm : les minutes sur 2 chiffres (45) ss : les secondes sur 2 chiffres (03) Z : le Fuseau horaire
AAAA-MM-JJThh:mm:ssZ	`<del datetime="AAAA-MM-JJThh:mm:ssZ">texte</del>` <del datetime="2022-12-05T08:45:03Z">Un texte avec une date de suppression indiquée</del>

del {
  text-decoration: line-through;
}

<ins>

<ins> comme insert | inséré
Représente le texte qui a été inséré, et apparait comme étant souligné

Cette balise s'utilise bien souvent avec la balise <del> qui indique l'effacement d'une portion de texte

Code

Aperçu dans le navigateur

<ins> utilise les attributs globaux

cite

Indique l'url vers une page expliquant pourquoi le texte est considéré comme ajouté

<ins cite="url">

Valeur	Description	Infos
url	L'url, le lien vers une page expliquant pourquoi le texte est considéré comme ajouté En valeur absolue (le plus souvent) ou en valeur relative
url	`<ins cite="url">texte</ins>` <ins cite="http://www.monsiteweb.com/ajout.html">Un texte inséré avec une source citée</ins>

datetime

Indique la date / heure à laquelle le texte a été ajouté

<ins datetime="date/heure">

Valeur	Description	Infos
AAAA-MM-JJThh:mm:ssZ	La date à laquelle le texte a été ajouté L'heure est en option Le format peut-être AAAA-MM-JJThh:mm:ssZ avec : AAAA : l'année sur 4 chiffres (2022) MM : le mois sur 2 chiffres (12) JJ : le jour sur 2 chiffres (05) T : caractére de séparation hh : l'heure sur 2 chiffres (08) mm : les minutes sur 2 chiffres (45) ss : les secondes sur 2 chiffres (03) Z : le Fuseau horaire
AAAA-MM-JJThh:mm:ssZ	`<ins datetime="AAAA-MM-JJThh:mm:ssZ">texte</ins>` <ins datetime="2022-12-05T08:45:03Z">Un texte avec une date insertion indiquée</ins>

ins {
  text-decoration: underline;
}

<sub>

<sub> comme subscription | souscription
Affiche du texte souscrit (en indice)

<sub> est souvent utilisé pour l'affichage de formule chimique

Code

Aperçu dans le navigateur

<sub> utilise les attributs globaux

sub {
    vertical-align: sub;
    font-size: smaller;
}

<sup>

<sup> comme superscript | exposant
Affiche du texte sous forme d'exposant

<sup> est souvent utilisé pour l'affichage de formule mathématique ou l’abréviation de certains mots

Code

Aperçu dans le navigateur

<sup> utilise les attributs globaux

sup {
    vertical-align: super;
    font-size: smaller;
}

<dfn>

<dfn> comme definition | définition
Permet de donner une définition au texte
Affiche le texte en italique

S'utilise souvent avec l'attribut global title pour donner une définition au terme
Sans l'attribut title c'est le contenu qui représente le terme que l'on définit.

Code

Aperçu dans le navigateur

<dfn> utilise les attributs globaux

dfn {
  font-style: italic;
}

<kbd>

<kbd> comme keyboard | clavier
Indique la saisie sous forme de texte de touche de clavier
Affiche le texte en police de caractère monospace

Code

Aperçu dans le navigateur

<kbd> utilise les attributs globaux

kbd {
  font-family: monospace;
}

<meter>

<meter> comme meter | mesure
Affiche une jauge remplie selon une mesure
Les éléments saisies à l'intérieur de <meter>...</meter> ne sont pas affichés mais servent au cas où le navigateur ne serait pas compatible avec cette balise

L'attribut value est obligatoire

A ne pas confondre avec <progress> qui représente une barre de progression

Code

Aperçu dans le navigateur

<meter> utilise les attributs globaux

value

Indique la valeur actuelle de la jauge

Obligatoire avec la balise <meter>
La valeur de value doit être compris entre la valeur des attributs min et max

<meter value="nombre">

Valeur	Description	Infos
nombre	La valeur de remplissage de la jauge
nombre	`<meter value="nombre">texte</meter>` <meter value="0.57">57%</meter>

max

Indique la valeur maximum de la jauge

La valeur de max doit être supérieur aux valeurs des attributs min, low, high et value

<meter value="nombre" max="nombre">

Valeur	Description	Infos
nombre	La valeur maximal de la jauge Par defaut `max`=1
nombre	`<meter value="nombre" max="nombre">texte</meter>` <meter value="600" max="1000">600 personnes</meter>

min

Indique la valeur minimum de la jauge

La valeur de min doit être inférieur aux valeurs des attributs low, high, max et value

<meter value="nombre" min="nombre">

Valeur	Description	Infos
nombre	La valeur minimale de la jauge Par defaut `min`=0
nombre	`<meter value="nombre" min="nombre">texte</meter>` <meter value="0.75" min="0.5">75% de participation sur 50% obligatoire</meter>

high

Indique la valeur considérée comme étant élevée de la jauge
Lorsque la valeur de l'attribut value dépasse la valeur de l'attribut high, l'indicateur de la jauge change de couleur

La valeur de high doit être supérieur aux valeurs des attributs min et low et inférieur à la valeur de l'attribut max

<meter value="nombre" high="nombre">

Valeur	Description	Infos
nombre	La valeur considérée comme étant élevée de la jauge
nombre	`<meter value="nombre" high="nombre">texte</meter>` <meter value="0.7" high="0.65">70% - dépassement de la limite</meter> <meter value="0.7" high="0.75">70% - limite non atteinte</meter>

low

Indique la valeur considérée comme étant faible de la jauge
Lorsque la valeur de l'attribut value n'atteint pas la valeur de l'attribut low, l'indicateur de la jauge change de couleur

La valeur de low doit être inférieur aux valeurs des attributs max et high et supérieur à la valeur de l'attribut min

<meter value="nombre" low="nombre">

Valeur	Description	Infos
nombre	La valeur considérée comme étant faible de la jauge
nombre	`<meter value="nombre" low="nombre">texte</meter>` <meter value="0.4" low="0.35">40% - dépassement de la limite</meter> <meter value="0.4" low="0.45">40% - limite non atteinte</meter>

optimum

Indique la valeur considérée comme étant optimum de la jauge

La valeur de optimum doit être supérieur aux valeurs des attributs min et low et inférieur aux valeurs des attributs high et max

<meter value="nombre" optimum="nombre">

Valeur	Description	Infos
nombre	La valeur considérée comme étant optimum de la jauge
nombre	`<meter value="nombre" optimum="nombre">texte</meter>` <meter value="0.5" optimum="0.55">50% - proche de la valeur optimum</meter>

<progress>

<progress> comme progress | progression
Affiche une barre de progression
Les éléments saisies à l'intérieur de <progress >...</progress > ne sont pas affichés mais servent au cas où le navigateur ne serait pas compatible avec cette balise

A ne pas confondre avec <meter> qui représente une jauge métrée

Code

Aperçu dans le navigateur

<progress> utilise les attributs globaux

value

Indique la valeur actuelle de la barre de progression

La valeur de value doit être inférieur ou égale à la valeur de l'attribut max

<progress value="nombre">

Valeur	Description	Infos
nombre	La valeur de progression de la barre
nombre	`<progress value="nombre">texte</progress>` <progress value="0.57">57%</progress>

max

Indique la valeur maximum de la barre de progression

La valeur de max doit être supérieur ou égale à la valeur de l'attribut value

<progress value="nombre" max="nombre">

Valeur	Description	Infos
nombre	La valeur maximal de la barre de progression Par defaut `max`=1
nombre	`<progress value="nombre" max="nombre">texte</progress>` <progress value="600" max="1000">600 sur 1000</progress>

<s>

<s> comme suppress | supression
Affiche un texte barré

A ne pas confondre avec <del> qui représente l'effacement d'une portion de texte

Code

Aperçu dans le navigateur

<s> utilise les attributs globaux

s {
  text-decoration: line-through;
}

<samp>

<samp> comme sample | exemple
Représente le texte comme étant produit par un programme informatique
Affiche le texte en police de caractère monospace

Code

Aperçu dans le navigateur

<samp> utilise les attributs globaux

samp {
  font-family: monospace;
}

<template>

<template> comme template | modèle de contenu
Représente le contenu comme étant invisible au chargement de la page
Le contenu est masqué, mais reste présent dans le code

Cette balise s'utilise souvent avec du javascript

Code

Aperçu dans le navigateur

<template> utilise les attributs globaux

template {
  display: none;
}

<var>

<var> comme variable | variable
Définit du texte comme étant une variable, souvent mathématique ou code de programmation
Affiche le texte en italique

Code

Aperçu dans le navigateur

<var> utilise les attributs globaux

var {
  font-style: italic;
}

<wbr>

<wbr> comme word break | coupure de mots
Indique un endroit dans le texte où le navigateur peut casser la ligne
<wbr> est une balise orpheline (qui ne se ferme pas)

Code

Aperçu dans le navigateur

<wbr> utilise les attributs globaux

<u>

<u> comme underline | souligné
Indique une portion de texte mise en évidence car mal orthographiée
Affiche le texte en souligné

Si le but est de souligner le texte, il est préférable d'utiliser du style Css à la place.

Code

Aperçu dans le navigateur

<u> utilise les attributs globaux

u {
  text-decoration: underline;
}

<time>

<time> comme time | temps
Représente une heure, une date ou une durée liée à une portion de texte
Utilisé par les navigateurs pour gérer la date si possible et les moteurs de recherche pour obtenir des résultats de recherche plus pertinent

Même s'il n'est pas obligatoire, il est fortement conseillé d'utiliser l'attribut <datetime>

Code

Aperçu dans le navigateur

<time> utilise les attributs globaux

datetime

Indique la date / heure à laquelle le texte a été associée

<time datetime="date/heure">

Valeur	Description	Infos
AAAA-MM-JJThh:mm:ssZ	La date à laquelle le texte a été ajouté L'heure est en option Le format peut-être AAAA-MM-JJThh:mm:ssZ avec : AAAA : l'année sur 4 chiffres (2022) MM : le mois sur 2 chiffres (12) JJ : le jour sur 2 chiffres (05) T : caractére de séparation hh : l'heure sur 2 chiffres (08) mm : les minutes sur 2 chiffres (45) ss : les secondes sur 2 chiffres (03) Z : le Fuseau horaire
AAAA-MM-JJThh:mm:ssZ	`<time datetime="AAAA-MM-JJThh:mm:ssZ">texte</time>` Freddie Mercury est décédé le <time datetime="1991-11-24 10:00:00Z">dimanche 24 novembre 1991</time>

<span>

<span> comme span | étendue
Ne représente rien de particulier, il sert juste de conteneur
<span> est principalement utilisé pour ajouter des attributs globaux à des éléments en ligne

<span> est aux textes (élément en ligne) ce que <div> est aux blocs (élément de bloc)

Code

Aperçu dans le navigateur

<span> utilise les attributs globaux

<code>

<code> comme code | code
Représente le texte comme étant du code de programmation
Affiche le texte en police de caractère monospace

Code

Aperçu dans le navigateur

<code> utilise les attributs globaux

code {
  font-family: monospace;
}

<a>

<a> comme anchor | ancre
<a> définit un lien hypertexte, il permet de créer un lien à partir du contenu qu'il englobe
<a> est une des balises les plus importante d'HTML
Un lien non visité est souligné et de couleur bleu
Un lien visité est souligné et de couleur violet
Un lien actif est souligné et de couleur rouge

L'attribut href n'est pas obligatoire mais nécessaire pour spécifier la cible du lien

Code

Aperçu dans le navigateur

<a> utilise les attributs globaux

href

Indique l'url d'une ressource

Très fortement conseillé avec cette balise

<a href="valeur">

Valeur	Description	Infos
url	L'url, le lien pointant vers une ressource, un fichier, un document En valeur absolu vers une ressource externe Ou en valeur relative pour un élément interne
url	`<a href="url">` <a href="http://htmlcss.pamaq.com/pages/uneautrepage.html">Vers une autre page avec un lien en valeur absolu</a> <a href="pages/uneautrepage.html">Vers une autre page avec un lien en valeur relatif</a>
id	L'id d'un élément peut être spécifié pour établir un lien dans le page courante L'élément ciblé apparaitra alors en haut de la page
id	`<a href="#id">` Contenu<br>Contenu<br>Contenu<br><span id="ancre">Ancre</span><br>Contenu<br>Contenu<br>Contenu<br>Contenu<br><a href="#ancre">Vers l'ancre</a><br>Contenu
protocol:cible	Le lien peut également cibler une autre ressource mailto : ouvrir le logiciel de messagerie avec l'élément cible comme destinataire tel : ouvrir l'application téléphone et composer le numéro ciblé
protocol:cible	`<a href="protocol:cible">` Vous pouvez m'envoyer un <a href="mailto:ceciestuntest@test.com">email</a> ou me <a href="tel:+123456789">téléphoner</a>

hreflang

Cet attribut sert à définir la langue du fichier indiqué dans l'attribut href

<a href="url" hreflang="valeur">

Valeur	Description	Infos
Code de la langue	Le code est généralement constitué de 2 lettres selon la norme ISO 639-1 La liste des codes est disponible sur le site de Wikipedia
Code de la langue	`<a href="url" hreflang="valeur">` <a href="https://de.wikipedia.org/wiki/Hreflang" hreflang="de">Voir cet article en allemand</a>

referrerpolicy

Indique les informations à envoyer lors du clique sur le lien spécifié dans l'attribut href

Fonctionne uniquement avec l'attribut href

L'en-tête Referer contient l'adresse de la page web précédente.
Elle est définie suite au clique d'un lien qui aboutit à la page courante. Cela permet de suivre la provenance des internautes et d'en tirer des informations à analyser
L'origine est définie par le protocole, l'hôte et le port (si indiqué) de la page courante.
Par exemple : https://www.monsiteweb.com:443
Le protocole est https
L'hôte est www.monsiteweb.com
Le port est 443

<a href="url" referrerpolicy="valeur">

Valeur	Description	Infos
no-referrer-when-downgrade	Valeur par défaut Indique que les informations d'en-tête Referer ne seront envoyée que si le lien spécifié dans l'attribut `href` provient d'un site sécurisé équivalent ou plus élevé (https)
no-referrer-when-downgrade	`<a href="url" referrerpolicy="no-referrer-when-downgrade">` <a href="https://fr.wikipedia.org" referrerpolicy="no-referrer-when-downgrade">Lien</a>
no-referrer	Signifie qu'aucune information d'en-tête Referer ne sera envoyée
no-referrer	`<a href="url" referrerpolicy="no-referrer">` <a href="https://fr.wikipedia.org" referrerpolicy="no-referrer">Lien</a>
origin	Envoi les informations d'origine du lien spécifié dans l'attribut `href` comme en-tête Referer
origin	`<a href="url" referrerpolicy="origin">` <a href="https://fr.wikipedia.org" referrerpolicy="origin">Lien</a>
same-origin	Envoi les informations d'origine du lien spécifié dans l'attribut `href` comme en-tête Referer s'il a la même origine
same-origin	`<a href="url" referrerpolicy="same-origin">` <a href="https://fr.wikipedia.org" referrerpolicy="same-origin">Lien</a>
origin-when-cross-origin	Envoi les informations d'origine du lien spécifié dans l'attribut `href` comme en-tête Referer lorsqu'il n'a pas la même origine, sinon envoi l'url compléte
origin-when-cross-origin	`<a href="url" referrerpolicy="origin-when-cross-origin">` a href="https://fr.wikipedia.org" referrerpolicy="origin-when-cross-origin">Lien</a>
strict-origin	Envoi les informations d'origine du lien spécifié dans l'attribut `href` comme en-tête Referer lorsque le protocole est le même
strict-origin	`<a href="url" referrerpolicy="strict-origin">` <a href="https://fr.wikipedia.org" referrerpolicy="strict-origin">Lien</a>
strict-origin-when-cross-origin	Envoi les informations d'origine du lien spécifié dans l'attribut `href` comme en-tête Referer lorsqu'il n'a pas la même origine, sinon envoi l'url compléte si le protocole est le même
strict-origin-when-cross-origin	`<a href="url" referrerpolicy="strict-origin-when-cross-origin">` <a href="https://fr.wikipedia.org" referrerpolicy="strict-origin-when-cross-origin">Lien</a>
unsafe-url	Envoi les informations d'en-tête Referer du lien spécifié dans l'attribut `href` dans tout les cas ATTENTION : cette valeur présente un grand risque de sécurité
unsafe-url	`<a href="url" referrerpolicy="unsafe-url">` <a href="https://fr.wikipedia.org" referrerpolicy="unsafe-url">Lien</a>

rel

Spécifie la nature de la ressource correspondante au lien indiqué dans l'attribut href

S’utilise toujours avec l’attribut href

<a rel="valeur" href="url">

Valeur	Description	Infos
alternate	Indique que l'`url` pointe vers une version alternative de la page ciblée (page d'impression par exemple)
alternate	`<a rel="alternate" href="url">` <a rel="alternate" hreflang="de" href="https://de.wikipedia.org/">Wikipedia version Allemande</a>
author	Indique que l'`url` pointe vers le site web de l'auteur de l'élément ciblé
author	`<a rel="author" href="url">` <a rel="author" href="https://vincentmunier.com/shop/fr/">L'auteur du film La panthère des neiges</a>
help	Indique que l'`url` pointe vers un document d'aide de l'élément ciblé
help	`<a rel="help" href="url">` <a rel="help" href="https://fr.wikipedia.org/wiki/Aide:Accueil">Besoin d'aide sur Wikipedia</a>
license	Indique que l'`url` pointe vers un document fournissant les termes du copyright de l'élément ciblé
license	`<a rel="license" href="url">` <a rel="license" href="https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Citation_et_r%C3%A9utilisation_du_contenu_de_Wikip%C3%A9dia">Terme d'utilisation du contenu de Wikipedia</a>
search	Indique que l'`url` pointe vers une interface de recherche dont fait partie l'élément ciblé
search	`<a rel="search" href="url">` <a rel="search" href="https://www.wikidata.org/w/index.php?search=metz">Metz se trouve dans WikiData</a>
bookmark	Indique que l'`url` est un permalien {permalien;https://fr.wikipedia.org/wiki/Permalien}++Permet de placer un marque-page pour un seul article d'une page qui en contient plusieurs
bookmark	`<a rel="bookmark" href="url">` Permalien de <a rel="bookmark" href="https://fr.wikipedia.org/w/index.php?title=Metz&oldid=191694532">Metz</a>
external	Indique que l'`url` pointe vers un site externe
external	`<a rel="external" href="url">` <a rel="external" href="https://fr.wikipedia.org">Wikipedia</a>
nofollow	Indique que l'`url` pointe vers un site non approuvé++Bloque les moteurs de recherche à suivre la cible de l'`url`
nofollow	`<a rel="nofollow" href="url">` <a rel="nofollow" href="fr.wikipedia.org">Wikipedia</a>
noopener	Indique au navigateur d'ouvrir la cible de l'`url` sans que le nouveau contexte de navigation ne reçoive d'accès au document précédent
noopener	`<a rel="noopener" href="url">` <a rel="noopener" href="https://fr.wikipedia.org">Wikipedia</a>
noreferrer	Empêche, que l'adresse indiquée dans l'`url` soit fournie via l'en-tête HTTP Referer
noreferrer	`<a rel="noreferrer" href="url">` <a rel="noreferrer" href="https://fr.wikipedia.org">Wikipedia</a>
tag	Indique que l'`url` fait référence à une étiquette (tag) que décrit l'élément ciblé
tag	`<a rel="tag" href="url">` Un héros venu de <a rel="tag" href="https://fr.wikipedia.org/wiki/Hellboy_(personnage)">l'enfer</a>
next	Indique que la page actuelle fait partie d'une série, et que la page suivante est renseigné par l' `url`
next	`<a rel="next" href="url">` Aller à la page <a rel="next" href="https://fr.wikipedia.org/wiki/Metz">suivante</a>
prev	Indique que la page actuelle fait partie d'une série, et que la page précédente est renseigné par l' `url`
prev	`<a rel="prev" href="url">` Aller à la page <a rel="prev" href="https://fr.wikipedia.org/wiki/Moselle_(d%C3%A9partement)">précédente</a>

target

Spécifie la façon dont les liens vont s'ouvrir

<a href="url" target="valeur">

Valeur	Description	Infos
_blank	L'ouverture des liens se passe dans une nouvelle fenêtre ou un nouvel onglet
_blank	`<a href="url" target="_blank">` <a href="https://fr.wikipedia.org" target="_blank">Wikipedia</a>
_self	Valeur par defaut L'ouverture des liens est dans cette même fenêtre
_self	`<a href="url" target="_self">` <a href="https://fr.wikipedia.org" target="_self">Wikipedia</a>
_parent	Cette valeur est principalement employée lors de l'utilisation de cadre (frame) L'ouverture des liens se passe dans la fenêtre parent
_parent	`<a href="url" target="_parent">` <a href="https://fr.wikipedia.org" target="_parent">Wikipedia</a>
_top	Cette valeur est principalement employée lors de l'utilisation de cadre (frame) L'ouverture des liens se passe dans la fenêtre du plus haut niveau
_top	`<a href="url" target="_top">` <a href="https://fr.wikipedia.org" target="_top">Wikipedia</a>

ping

Cet attribut permet de notifier, via une requête POST, d'autres adresses (url) lorsque le lien est suivi.
Il est généralement utilisé pour tracer l'internaute.

<a href="url" ping="valeur">

Valeur	Description	Infos
liste url	Les url de la liste doivent être séparées par un espace
liste url	`<a href="url" ping="liste d'url">` <a href="https://fr.wikipedia.org" ping="http://www.google.com">Wikipedia</a>

download

Cet attribut indique que l'url saisie dans l'attribut href sera téléchargé lorsque l'internaute clique sur le lien
Lorsqu'une valeur est renseigné à l'attribut, le nom du fichier à télécharger prendra cette valeur.

<a href="url" download>
<a href="url" download="valeur">

Valeur	Description	Infos
download	indique au navigateur de télécharger le fichier indiqué dans l'attribut `href` Le nom du fichier à télécharger sera celui indiqué dans la valeur de l'attribut `href`
download	`<a href="url" donwload>` <a href="image/la-famille-manchots-empereurs.jpg" download>Une belle photo de Vincent Munier à télécharger</a>
valeur	indique au navigateur de télécharger la valeur indiqué dans l'attribut `href` Le fichier à télécharger prendra le nom spécifié dans la valeur de l'attribut
valeur	`<a href="url" donwload="valeur">` <a href="image/la-famille-manchots-empereurs.jpg" download="pinguins">Une belle photo de Vincent Munier à télécharger</a>

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: pointer;
}

a:link:active, a:visited:active {
  color: (internal value);
}

<blockquote>

<blockquote> comme blockquote | bloc de citation
Représente une longue citation

Il est préférable d'utiliser <q> pour de courtes citations

Code

Aperçu dans le navigateur

<blockquote> utilise les attributs globaux

cite

Indique l'url vers la source du document ou du message cité

<blockquote cite="url">

Valeur	Description	Infos
url	L'url, le lien vers la page web d'origine du texte cité En valeur absolue (le plus souvent) ou en valeur relative
url	`<blockquote cite="url">bloc de texte</blockquote>` <blockquote cite="https://fr.wikipedia.org/wiki/Metz">Metz présente une importante diversité architecturale, de l’antiquité au XXe siècle</blockquote>

blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

<cite>

<cite> comme cite | Titre d’une œuvre
Définit le titre d'une œuvre
Le titre de l'œuvre est affiché en italique

A n'utiliser qu'en cas de titre d'une œuvre et non de l'auteur ou autre

Code

Aperçu dans le navigateur

<cite> utilise les attributs globaux

cite {
  font-style: italic;
}

<q>

<q> comme quote | citation courte
Indique une courte citation
Affiche la citation entre guillemets

Il est préférable d’utiliser <blockquote> pour de longues citations

Code

Aperçu dans le navigateur

<q> utilise les attributs globaux

cite

Indique l'url vers la source du document ou du message cité

<q cite="url">

Valeur	Description	Infos
url	L'url, le lien vers la page web d'origine du texte cité En valeur absolue (le plus souvent) ou en valeur relative
url	`<q cite="url">texte</q>` <q cite="https://www.dicocitations.com/citation_celebre_ajout/28.php">Il faut cultiver notre jardin..</q>

q {
  display: inline;
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

<abbr>

<abbr> comme abbreviation | abréviation
Définit l'utilisation d'une abréviation, d'un acronyme
Définit l'utilisation d'une abréviation, d'un acronyme
Affiche le texte sous ligné par une ligne en pointillé

S'utilise souvent avec l'attribut global title pour afficher le terme complet

Code

Aperçu dans le navigateur

<abbr> utilise les attributs globaux

abbr {
  display: inline;
}

S'utilise souvent avec l'attribut global title pour afficher le terme complet

Code

Aperçu dans le navigateur

<abbr> utilise les attributs globaux

abbr {
  display: inline;
}

<address>

<address> comme address | adresse
Indique des informations de contact, de coordonnées (nom, adresse postale, mail, téléphone...)
Apparait en italique, suivi d'un saut de ligne

Code

Aperçu dans le navigateur

<address> utilise les attributs globaux

address {
  display: block;
  font-style: italic;
}

<bdo>

<bdo> comme Bi-Directional Override | Remplacement bidirectionnel
Modifie la direction du texte (de la gauche vers la droite ou la droite vers la gauche)

Ne fonctionne qu'avec l'attribut dir

Code

Aperçu dans le navigateur

<bdo> utilise les attributs globaux

dir

Indique la direction du texte

<bdo dir="valeur">

Valeur	Description	Infos
ltr	Left To Right - de la gauche vers la droite
ltr	`<bdo dir="ltr">texte</bdo>` <bdo dir="ltr">texte qui se lit de gauche à droite</bdo>
rtl	Right To Left - de la droite vers la gauche
rtl	`<bdo dir="rtl">texte</bdo>` <bdo dir="rtl">texte qui se lit de droite à gauche</bdo>

bdo {
  unicode-bidi: bidi-override;
}

<h1> à <h6>

Les paragraphes

<p>

<pre>

<br>

<hr>

Le formatage du texte

<strong>

<b>

<em>

<i>

<mark>

<small>

<del>

cite

datetime

<ins>

cite

datetime

<sub>

<sup>

<dfn>

<kbd>

<meter>

value

max

min

high

low

optimum

<progress>

value

max

<s>

<samp>

<template>

<var>

<wbr>

<u>

<time>

datetime

<span>

<code>

<a>

href

hreflang

referrerpolicy

rel

target

ping

download

Les citations

<blockquote>

cite

<cite>

<q>

cite

<abbr>

<abbr>

<address>

<bdo>

dir