5 balises HTML peu utilisées

Davantage pour leur sémantique que pour leur pouvoir en SEO, il est intéressant et pratique d’utiliser les balises HTML suivantes. Elles permettent de donner du sens au contenu d’un site, ou plutôt à son code.

1. <abbr> et <acronym> pour les sigles et acronymes

La différence entre une abréviation (ex: CDI) et un acronyme (ex: UNESCO) est que ce dernier se prononce comme un mot “normal”. Quoiqu’il en soit, en HTML, les deux s’utilisent de la même façon :

HTML

<abbr title="Contrat à Durée Indéterminée">CDI</abbr>
<acronym title="United Nations Educational, Scientific and Cultural Organization">UNESCO</acronym>

Résultat

CDI
UNESCO

2. <address> pour… les adresses

Cette balise parle d’elle-même. Il faut juste faire attention à l’orthographe anglaise qui rajoute un “d” et enlève un “e” par rapport à la version française.

HTML

<address>bbxdesign<br />
23 rue des Feuilles de Style<br />
75000 Paris</address>

Résultat

3. <colgroup> pour styler un tableau colonne par colonne

Vous avez un tableau. Vous voulez styler une ligne sur deux. Facile : un class=”alt” sur un <tr> sur deux. Puis en fait, vous voulez styler la première colonne. Là, vous mettez une classe sur chaque <td> de la colonne. Fastidieux si l’on a des centaines de lignes pour un tableau!

La solution : <colgroup>. Avec cette balise, on peut identifier chaque colonne d’un tableau, sans rajouter de classe sur les <td>.

HTML

<table>
<caption>bbxtable</caption>
<colgroup>
<col id="nom" />
<col id="date" />
<col id="heure" />
</colgroup>
<thead>
<tr>
<th>Nom</th>
<th>Date</th>
<th>Heure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jean-Pierre</td>
<td>Lundi 3 août</td>
<td>19h00</td>
</tr>
<tr>
<td>Patrick</td>
<td>Mercredi 5 août</td>
<td>10h00</td>
</tr>
</tbody>
</table>

CSS

table{ border-collapse:collapse; text-align:left;}
td{ padding:5px;}
col#nom{ background:#eee;}

Résultat

4.<q> pour les citations courtes

Pour les citations, il y a déjà <blockquote> (citations longues) et <cite> (citations courtes). Quel avantage pour <q> alors ? En l’occurence, c’est le navigateur qui rajoute les guillemets avant et après la citation. Il est possible en CSS de changer ces guillemets. Pratique pour gérer l’apparence des guillemets en un seul endroit, sans toucher au contenu.

HTML

<q>L'avenir appartient à ceux qui ont le veto.</q>

CSS

q{ quotes: "«" "»";}

Résultat

L’avenir appartient à ceux qui ont le veto.

5. <wbr> pour un retour à la ligne dans les mots sans espace

wbr, ça veut dire “word break”. En fait, ça dit au navigateur qu’il peut rajouter un retour à la ligne si il veut. Souvent, les mots sans espace dans un tableau ou un textarea, rajoutent une barre horizontale peu pratique (c’est le cas avec les url longues, qui ne peuvent être tronquées). On peut donc contourner le problème avec la balise <wbr>.

HTML

texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>texte<wbr/>

Résultat

textetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetextetexte

*Sources : instantfundas, SEOmoz, Monday by noon