Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les préconisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

Les balises méconnues du XHTML 1.0 Strict

Les balises du XHTML ne se limitent pas à des <div> ou des <span> ! Il existe un bon nombre de balises que peu de personnes utilisent alors qu’elle permettent une meilleure accessibilité. Prenez le temps de les découvrir et surtout de les utiliser !

Publié il y a déjà trop longtemps…

<ol>, <li>
Liste numérotée.
Ex :

  1. La première chose
  2. La deuxième chose
  3. La troisième chose
  4. etc.
<dl>, <dt> & <dd>
Liste de définition. Toute cette page en est un exemple.
<dt> : Désigne le terme de la définition (dans cette page les balises).
<dd> : Désigne la définition en tant que telle (dans cette page les explications).
<dl> : Désigne la liste de définitions (cette balise englobe les balises <dd> et <dt>).
Ex :

<dl>  <dt>Rouge</dt>  <dd>Couleur primaire</dd>  <dt>Voiture</dt>  <dd>Moyen de transport individuel</dd> </dl>
<abbr>
Abréviation.
Arguments :

  • title (Signification de l’abréviation)

Ex :

  • Melle
  • St
  • Tél…
<acronym>
Acronyme.
Arguments :

  • title (Signification de l’acronyme)

Ex :

  • SNCF
  • ANPE
  • WWW
<address>
Affichage d’une adresse e-mail.
Ex:

login@exemple.fr
<pre>
Texte préformaté.
Ex : 

body {    margin:0;    padding:0;    text-align: center; }

A noter : Le texte à l’intérieur des balises <pre> s’affiche exactement à l’identique que ce soit dans le code ou dans la page. Les espaces sont tous pris en compte ainsi que les retours chariots.

<blockquote>
Bloc de citation
Ex :

Depuis que l’homme pense, depuis qu’il sait dire et écrire sa pensée, il se sent frôlé par un mystère impénétrable pour ses sens grossiers et imparfaits, et il tâche de suppléer, par l’effort de son intelligence, à l’impuissance de ses organes. Quand cette intelligence demeurait encore à l’état rudimentaire, cette hantise des phénomènes invisibles a pris des formes banalement effrayantes. De là sont nées les croyances populaires au surnaturel, les légendes des esprits rôdeurs, des fées, des gnomes, des revenants, je dirai même la légende de Dieu, car nos conceptions de l’ouvrier-créateur, de quelque religion qu’elles nous viennent, sont bien les inventions les plus médiocres, les plus stupides, les plus inacceptables sorties du cerveau apeuré des créatures.

<ins> & <del>
Soulignement et barrage de texte
Ex :

  • Souligner un mot important.
  • Les erreurs ratures sont parfois bien interessantes à utiliser.
<bdo>
Modifie la direction d’affichage du texte.
Arguments :

  • ltr (left to right / lecture de gauche à droite)
  • rtl (right to left / lecture de droite à gauche)

Ex :

  • Texte de gauche à droite
  • Texte de droite à gauche
<dfn>
Balise une définition dans un texte.
Ex : Le pommier arbre fruitier commun en Normandie.
<code>
Désigne un code dans un texte.
Ex : Evitez les mots de passe du genre 1234
<samp>
Introduit un exemple.
Ex : Ceci est un exemple de la balise exemple !
<kbd>
Indique à l’utilisateur ce qu’il doit taper au clavier ("kbd" est la contraction de "keyboard")
Ex : Tapez conf.exe dans la fenêtre d’execution.
<var>
Indique un nom de variable.
Ex : La variable $toto est un exemple de variable en PHP.
<cite>
Petite citation.
Ex : Et des goélands, en veux-tu ? En voilà ! s’exclama Benoît.
<q>
Introduction d’une citation
Ex : I have a dream… commença Martin Luther King.
A noter : Les doubles quotes (") s’affichent automatiquement grâce à la balise <q>
<sub> & <sup>
Ex :

  • Exposant "<sup>" : Je suis arrivé 3ème de la course.
  • Indice "<sub>" : Cette réaction chimique a donné du H2SO4.
<tt>
Texte en teletype (TTY).
Ex : Ceci est un texte tappé dans un terminal.
<button>
Crée un bouton semblable à un bouton de formulaire mais en est indépendant.
Ex :

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

  1. an.archi

    Salut !

    C’est une bonne initiative de lister ces balises, mais j’aimerais quand même émettre quelques réserves sur ta publication. :o)

    – Tu parles d’acronymie, mais tu donnes des abbréviations qui ne sont pas des acronymes comme exemples. Un acronyme se lit comme un mot mais ne s’épelle pas.
    – "address" peut comporter autre chose que des adresses e-mail.
    – "ins" et "del" ne signifient pas "souligné" et "barré", mais "inséré" et "supprimé". Les effets visuels ne seront pas forcément ceux-ci, bien qu’ils le soient par défaut.
    – "code" désigne un code informatique, pas n’importe quelle chaîne de caractères.
    Р"q" est une citation courte, pas forc̩ment une introduction.

    Voilà, je crois que c’est tout… :o)
    Tu as toutes les infos dont je parle ici : http://www.la-grange.net/w3c/htm...

  2. Shemu

    Salut an.archi ;o)

    Je ne vais relancer ici un débat que bon nombre de site on eût…
    Par exemple, sur les balises <abbr> et <acronym>, j’explique ici comment moi je les utilise… Mon site ne fait pas office de référence !

    Je te remercie néanmoins de tes remarques très pertinentes ;o)

  3. an.archi

    Ben…
    Comment dire…
    Je vois pas pourquoi il y aurait débat, en fait (en ce qui concerne <abbr> et <acronym>, en tout cas). :o]

    Mis à part ça, merci pour tous les bons plans photoshopesques, c’est du pur bonheur. :o)

  4. Neri

    Merci pour ces infos j’ai enfin trouvé réponse à mon probleme avec <sub> & <sup> :)

  5. gcyrillus

    <pre> ne reagit pas comme tu le dit ou je n’ai pas bien compris ce que tu expliques
    pour moi la balise qui affiche le texte tel qu’il est ecrit en ignorant totalement ce qui ressemble a des balise est <plaintext></plaintext>
    me trompe-je ?

  6. Dojean

    Petit souci avec BUTTON sous IE : PAs d’action avec Href (<a href=\"../public/index.php?a=recherche\"><button>nouvelle recherche</button></a>) Dommage ! A moins que quelqu’un sache comment détourner le problème …

  7. gcyrillus

    pour faire fonctionner ton bouton comme tu le veut, il te faut utiliser onclick
    autrement il n’a que 2 actions possible au sein d’un formulaire: submit et reset.

    ex:
    <button onclick="open(‘gcyrillus.free.fr/’,  »,  »);">voir mon site</button>

    en esperant que le code ne sera pas trop deformé …

    (reprise de mon commentaire precedent,< plaintext> bug avec IE !, alors je me suis retourné vers la vielle balise <xmp></xmp> que j’intercalle dans un<pre></pre> pour pouvoir afficher un code html par exemple sans avoir a recoder les tag et a ajouter les saut de lignes, ceci dit <xmp> est une balise depreciée, qui reste utile chez les hebergeurs n’offrant pas le php et lorsque l’on veut s’affranchir aussi du javascript).

  8. hyperactif

    Dojean, pour faire fonctionner ton bouton correctement, tu devrais plutôt écrire <button onclick="location.href=’www.babylon-design.com’&q…

    Je n’ai jamais entendu parler de la propriété open(), et j’ai toujours utilisé location.href… enfin, j’ai vu que l’autre marche, mais je ne sais pas laquelle des 2 est plus correcte (peut-être que les 2 le sont)

    J’espère avoir pu t’aider
    Alex

  9. jparia

    Génial, j’étais passé à travers la balise <button> à qui l’on peut attribuer un style
    idéal pour des infos et exemple de fonctionnement d’une application.

  10. Olivier G.

    Ton gros reset CSS en ligne 1 de general.css fait qu’on ne voit pas tes exemples…

    • Shemu

      Moi je les vois bien pourtant…

  11. Adrien Leygues

    Un petit complément sur <address> que j’ai souvent mal employé et qui concerne des informations sur l’auteur d’une page, d’un site :

    http://www.la-grange.net/w3c/htm...

    • Shemu

      Tout à fait, et je constate aussi que j’ai commis d’autres petites erreurs… Cet article mériterait une petite mise à jour.

Les commentaires sont clos.