7# Les éléments en-ligne usuels

Sur cette page :

Les éléments en-ligne usuels

7.1# L’ancre, le lien hypertexte `<a>`

Les ancres permettent, normalement, de placer un marqueur sur la page, ou un lien hypertexte.

Un lien hypertexte est ce qui fait que le web est le web : ce sont des zones qui permettent de faire un appel à un autre document.

Pour placer un lien hypertexte, on utilise le code suivant :

<a href="http://www.monsite.com/page2.html">Visiter la page 2</a>

D’autres attributs peuvent être renseignés :

hreflang : correspond à la langue de la page cible,
title : un titre du lien, généralement affiché dans une bulle de texte lors du survol du lien,
type : correspond au type-mime du document cible,
rel et rev : pour en savoir plus, référez vous à la section dédiée à ce sujet,
accesskey : pour en savoir plus, référez vous à la section dédiée à ce sujet. Cet attribut semble en fait être une fausse bonne idée et est voué à disparaître.

Les ancres permettent d’enregistrer des références dans la page (un marqueur), qui sera utilisé dans une adresse pour accéder directement à une section, précisée après le symbole #. En plaçant un marqueur ainsi :

<a id="section1" />

le navigateur affichera directement cette zone de la page quand l’adresse donnée sera page.html#section1. En XHTML, il n’est plus nécessaire d’utiliser la balise <a>, l’attribut id étant disponible sur la majorité des balises, une ancre peut être placée sur l’une d’entre elles, par exemple :

<h1 id="section1">La section 1</h1>

7.2# L’abrévation `<abbr>`

Cette balise permet de signaler qu’un élément du contenu est une abréviation. Elle s’utilise ainsi :

<blockquote>
  <p>Je n'travaille plus au <abbr title="gouvernement">gouv'</abbr>...
  ils m'ont foutu à <abbr title="la porte">la p'</abbr>.</p>
</blockquote>

Citation tirée d’une capsule de François Pérusse.

7.3# L’acronyme `<acronym>`

Cette balise signale la présence d’un acronyme. Elle est vouée a disparaître au profit de la balise <abbr>.

<p>Une réecriture presque complète du cours sur les langages
<acronym title="eXtensible Markup Language">XHTML</acronym> et
<acronym title="Cascading Style Sheets">CSS</acronym>
qui a fait le succès de MartiusWeb.net !</p>

7.4# Le retour chariot ` `

Le retour chariot   est un élément indépendant qui permet d’effectuer un saut de ligne sans marge dans un paragraphe :

<p>Voici un paragraphe :
 
avec retour à la ligne</p>

Ceci donne :
celà !

7.5# Les citations `<cite>` et `<q>`

Les citations peuvent être marquées dans le contenu d’un bloc avec <cite> et <q>, pour les citations courtes. Utilisez l’attribut title si vous souhaitez indiquer des informations complémentaires :

<p>On peut faire une citation un peu longue&nbsp;:
   <cite title="Une citation de moi-même">Les citations
   peuvent être marquées</cite>, ou plus courtes :
   <q>avec &lt;cite&gt; et &lt;q&gt;</q></p>

7.6# Les extraits de code `<code>`, `<samp>`, `<var>` et le télétype `<tt>`

Si votre document parle d’un langage informatique, ces balises peuvent être utiles :

<code> signale que vous insérez une instruction de code,
<samp> signale un extrait de code,
<var> signale une variable,
<tt> correspond à du texte télétype, affiché avec une police à largeur fixe, c’est en quelque sorte l’équivalent en-ligne de <pre>.

7.7# Texte inséré `<ins>` et supprimé `<del>`

Il est parfois utile de marquer les modifications d’un document, notamment pour comparer deux versions.

L’élément <ins> permet d’indiquer que son contenu a été ajouté lors de la mise à jour. Au contraire, <del> indique que son contenu est obsolète et à été supprimé dans la nouvelle version.

Pour indiquer la date par rapport à laquelle ces informations ont été ajoutées ou supprimées, il faudra utiliser l’attribut datetime dont la valeur sera au format : aaaa-MM-JJThh:mm:ss-GMT, ici GMT correspond au décalage horaire par rapport au méridien de Greenwhich. Le 27 janvier 1990 à 10 heures (heure de Paris) sera représenté ainsi : 1990-01-27T10:00:00-01:00.

7.8# La définition `<dfn>`

L’élément <dfn> indique la présence d’une définition. Attention, contrairement à ce qui est généralement pensé, <dfn> est destiné au terme qui va être définit et non pas à la définition.

<p>Le <dfn>World Wide Web Consortium</dfn> est un organisme
   de standardisation à but non-lucratif, chargé de
   promouvoir la compatibilité des technologies du
   World Wide Web</p>

7.9# L’emphase `` et la forte emphase ``

L’emphase  et la forte emphase  permettent de marquer l’insistance d’un élément du contenu. Généralement, une emphase est affichée en italique et une forte emphase en gras.

<p>Soyez prudents, ces balises <strong>ne signifient
   pas</strong> <em>mettre en italique</em> ou
   <em>mettre en gras</em>.</p>

Soyez prudents, ces balises ne signifient pas mettre en italique ou mettre en gras.

7.10# Les images `<img />`

L’élément indépendant <img /> permet d’insérer une image dans le contenu. Il ne doit pas être utilisé pour afficher une image faisant partie de la décoration : les CSS devront s’en charger. Une image contient obligatoirement les attributs src qui indique l’adresse du fichier image et alt qui contient le contenu alternatif qui sera affiché si l’image ne peut pas l’être. L’attribut optionnel longdesc permet de donner une description plus longue du contenu de l’image.

Il existe également un mécanisme permettant de transformer l’image en carte, contenant des zones cliquables, à l’aide des attributs ismap et usemap. Mais nous n’en parleront pas ici.

Comme pour la plupart des balises, l’attribut title peut également être utilisable pour afficher une bulle d’information lors du survol de l’image à l’aide de la souris. Bien que certains navigateurs le considèrent comme tel, ce n’est pas le rôle de l’attribut alt.

<p><img src="./images/content/paysage.png" alt="Illustration d'un paysage"
longdesc="au premier plan, on peut voir un arbre, en arrière plan, le ciel" /></p>

7.11# Indice `` et exposant ``

Du texte peut être placé en indice à l’aide de  ou en exposant à l’aide de  :

<p>La 1<sup>ère</sup> molécule que tout le monde connait
   est <abbr title="Hydrogène">H</abbr><sub>2</sub><abbr title="Oxygène">O</abbr>,
   c'est <dfn>l'eau</dfn>.</p>

La 1^ère molécule que tout le monde connait est H₂O, c’est l’eau.

7.12# La commande clavier `<kbd>`

L’élément <kbd> permet de signaler une commande à effectuer au clavier, un raccourci par exemple :

<p>Utilisez le raccourci clavier <kbd>Ctrl+D</kbd> pour enregistrer ce site dans vos favoris.</p>

Utilisez le raccourci clavier Ctrl+D pour enregistrer ce site dans vos favoris.