Outils pour utilisateurs

Outils du site


10_balises_html_rarement_utilisees_qui_valent_le_coup

tag_programmation_html_web

10 balises HTML rarement utilisées qui valent le coup

Aujourd'hui, pour les développeurs Web, il devient indispensable de se former à plusieurs langages de programmation : XHTML, PHP, JavaScript… Les technologies ne manquent pas. Conséquence, on fini par se focaliser sur l'essentiel et d'en oublier quelques subtilités bien pratique.

C'est pourquoi je vais présenter ici une dizaine de balises HTML qui peuvent facilement trouver une utilité dans la vie d'un développeur Web.

<cite>

Vous connaissez peut être la balise <blockquote> qui permet de créer automatiquement un bloque de citation facilement. Et bien il existe son petit frère nommé <cite> qui permet de faire la même chose mais directement dans du texte.

Exemple
Le dernier livre de M. Machin se nomme La vie selon Linux et sortira le 31 février 20XX.
Code
Le dernier livre de M. Machin se nomme <cite>La vie selon Linux</cite> et sortira le 31 février 20XX.

<optgroup>

Tout le monde connait la balise option afin de créer une liste déroulante pour les formulaires par exemple. Mais avec la balise optgroup il est possible de trier les options d'une liste afin de donner une meilleur lisibilité à l'utilisateur.

Exemple
Code
<select>
  <optgroup label="Fruits">
    <option>Banane</option>
    <option>Fraise</option>
  </optgroup>
  <optgroup label="Légumes">
    <option>Carotte</option>
    <option>Haricot</option>
  </optgroup>
</select>

<acronym>

Une balise pas souvent utilisé et pourtant très pratique pour expliquer un groupe de mot sous forme d'info bulle. Par contre, il est important de noter que la petite info-bulle a tendance à disparaître au bout d'un certain temps, et n'est donc pas vraiment pratique si l'explication est longue.

Exemple
Ce site est un Wiki sur le thème de Linux
Code
Ce site est un Wiki sur le thème de <acronym title="Système d'exploitation libre et gratuit">Linux</acronym>

<address>

Rien qu'avec le nom de cette balise on peut imaginer son action. Pourtant, elle ne fait rien de spécial à part mettre en italique son contenu. Mais du coup à quoi elle sert ? Tout simplement à définir des zones comme étant des adresses et au final pouvoir facile jouer sur le style grâce à un style CSS.

Exemple
M. Antoine Machin 15 rue des tulipes 67000 Strasbourg
Code
<address>M. Antoine Machin 15 rue des tulipes 67000 Strasbourg</address>

<ins> et <del>

Voilà deux balises bien pratique pour mettre en évidence une correction dans un texte. La balise <del> permet de barrer le texte afin de montrer sa suppression, alors que <ins> va mettre en valeur la correction en appliquant un soulignement.

Exemple
Mettre le document dans le répertoire Document Guide et fermer la fenêtre.
Code
Mettre le document dans le répertoire <del>Document</del> <ins>Guide</ins> et fermer la fenêtre.

<label>

La balise label est souvent oubliée, pourtant elle est très pratique dans les formulaires. Elle permet en fait de définir un label pour un champ de formulaire par exemple, et l'utilisateur pourra cliquer sur le texte pour intéragir avec l'objet. Par exemple, quand on met un texte devant une case à cocher, cliquer sur le texte ne cochera pas la case, alors qu'en utilisant simplement la balise label, cela fonctionnera. Un exemple concret en dessous, si vous cliquez sur le texte Oui, la case va se cocher et se décocher, alors qu'avec le texte Non cela ne marchera pas.

Exemple
Non
Code
<label for="oui">Oui</label><input id="oui" type="checkbox"> Non <input id="non" type="checkbox">

<fieldset>

Une balise un peu plus connue, mais pas courante pour autant, elle permet de regrouper du code HTML dans un cadre générer automatiquement. Encore une fois, la balise en elle même n'est pas époustouflante mais avec une bonne dose de style CSS cela peut donner quelque chose de bien.

Exemple
Habitez-vous en appartement ? Yes No
Code
<form>
  <fieldset>
    <legend>Habitez-vous en appartement ?</legend>
    Yes <input name="oui" value="oui" type="radio">
    No <input name="non" value="non" type="radio">
  </fieldset>
</form>

<abbr>

Cette balise permet de créer des abréviations. Elle est relativement similaire à la balise acronym vu plus haut. Elle va en fait afficher une petit info bulle pour informer l'utilisateur sur l'abréviation. Encore une balise qui peut devenir interessante avec un peu de style CSS.

Exemple
Il habite av. Jean Jaurès
Code
Il habite <abbr title="Avenue">av.</abbr> Jean Jaurès

rel

Il ne s'agit pas ici d'une balise mais d'un attribut d'une balise. Et en fait, le point intéressant, c'est que l'attribut rel est possible pour toutes les balises HTML. Cela permet d'intéragir sur des élements avec le JavaScript surtout avec l'arrivée de L'AJAX sur nos sites Web.

<wbr>

Pour finir, une balise bien curieuse qui a un effet pas evident à cerner. Elle permet en fait de dire au navigateur que si il a besoin de faire un saut de ligne dans un texte, il sera préférable de le faire à l'endroit où est placée cette balise. L'exemple n'est pas vraiment concluant mais bon…

Exemple
Les sauts de ligne sont mieux en fin de phrase.Ensuite, on peut faire une autre phrase.
Code
Les sauts de ligne sont mieux en fin de phrase.<wbr>Ensuite, on peut faire une autre phrase.
10_balises_html_rarement_utilisees_qui_valent_le_coup.txt · Dernière modification: 14/10/2010 10:41 (modification externe)