41Mag - Balise <address> HTML5 – Coordonnées du propriétaire / auteur

Balise <address> HTML5 – Coordonnées du propriétaire / auteur

Exemple de balise <address> HTML5

1
2
3
4
<address>Le 41Mag
<a href="mailto:adresse@emeple.fr">Contact</a>
 Adresse: silicon valley bien sur !
 Tel: +33 6 00 00 00 00</address>
Résultat, le navigateur affichera :
Le 41Mag
Contact
Adresse: silicon valley bien sur !
Tel: +33 6 00 00 00 00

Définition et usage

La balise <address> définit les informations de l’auteur ou du propriétaire d’un document.

La balise <address> permet de mettre en évidence des adresses, coordonnées et URL. Elles sont généralement affichées dans un paragraphe spécifique et en italique (mise en page modifiable en CSS). La représentation peut varier en fonction du navigateur.

Si l’élément <address> est à l’intérieur de l’élément <body>, il représente les informations de contact pour le document.

Si l’élément <address> est dans un élément <article>, alors il représente les coordonnées de l’auteur / propriétaire de cet article. Habituellement l’élément <address> est ajoutée en en-tête ou bas d’une page Web.

Astuce : Utilisez La balise <address> en l’incluant, avec d’autres informations, dans un élément <footer>.

Attention à bien respecter la sémantique

La balise <address> n’est pas conçu pour les adresses postales. Prenons un exemple concret pour mieux comprendre :

Imaginez vous à la tête d’un site web ou d’un blog de cuisine. Vous souhaitez écrire un article sur les éclairs au chocolat, et dans celui-ci, vous indiquez l’adresse d’une boulangerie réalisant les meilleurs éclairs de toute votre ville. Il ne faudra pas l’écrire de la façon suivante :

1
2
3
4
5
6
<!-- Cette sémantique est incorrecte  -->
<address>
 Boulangerie Michel<br />
 42, rue du Faubourg<br />
 13000, Marseille
</address>

Vous ne comprenez pas pourquoi ce code est incorrect ? Tout simplement car l’élément <address> n’est pas conçu pour mettre en valeur les adresses postales. A moins que cette adresse soit une information pertinente concernant l’auteur ou le propriétaire du document.

Pour reprendre notre exemple, l’adresse de cette boulangerie n’as aucun rapport avec vous ou votre site. L’utilisation de la balise <address> n’est donc pas justifier dans cette exemple, alors, la sémantique est incorrect.

Évolution par rapport au HTML 4.01

La modification principale viens de l’élément <article> qui n’était pas présent dans le HTML 4.01. Désormais cet élément s’applique aussi bien a un document entier qu’à une partie de celui-ci.

Attribut standard :

La balise <address> prend en charge tous les attributs standard en HTML5 .

> Liste complète des attributs

Attribut d’évènement :

La balise <address> prend également en charge tous les attributs d’événement HTML5.

> Liste complète des événements

Les balises principales de formatage du texte en HTML5

<abbr>Définit une abréviation
<blockquote>Définit une citation
<code>Définit un morceau de code informatique
<dfn>Définit un terme à définir
<em>Définit un texte mis en valeur et en italique
<kbd>Définit une entrée du clavier
<mark>Définit un texte marqué, mis en évidence
<q>Définit une courte citation
<strong>Définit un texte important et en gras. Il est préférable d’utiliser cette balise plutôt que l’élément <b>
<var>Définit une variable

Mais aussi …

<b>Définit un text en gras. Il est préférable d’utiliser la balise <strong>
<bdi>Isole une partie de texte qui peut être mis dans une direction différente du reste
<bdo>Définit la direction du texte
<cite>Définit le titre d’une oeuvre
<del>Définit un texte qui a été supprimé
<i>Définit un texte d’une voix alternative
<ins>Définit un texte qui a été inséré dans un document
<meter>Définit une mesure scalaire dans une plage connue (une jauge)
<pre>Définit un texte préformaté
<s>Définit un texte qui n’est plus correct
<small>Définit un texte plus petit, donc moins important
<sub>Définit un texte en indice
<sup>Définit un texte en exposant
<time>Définit une date, un horaire
<u>Définit un texte qui doit être de style différent du texte normal

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.