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.

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.

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.

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

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.

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.

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.

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.

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.

<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>

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.

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

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.

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…

Les sauts de ligne sont mieux en fin de phrase.<wbr>Ensuite, on peut faire une autre phrase.