{"id":779,"date":"2010-12-08T08:25:07","date_gmt":"2010-12-08T07:25:07","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=779"},"modified":"2015-01-18T16:42:46","modified_gmt":"2015-01-18T15:42:46","slug":"lelement-abbr-les-specifications-html5","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/lelement-abbr-les-specifications-html5","title":{"rendered":"L’\u00e9l\u00e9ment <abbr>, les sp\u00e9cifications HTML5"},"content":{"rendered":"

L’\u00e9l\u00e9ment <abbr><\/code> n’est pas nouveau en HTML<\/abbr>5. Cet \u00e9l\u00e9ment n’a pas non plus \u00e9t\u00e9 red\u00e9fini. Les sp\u00e9cifications HTM<\/abbr>L5 ont cependant retir\u00e9 l’\u00e9l\u00e9ment <acronym><\/code>, \u00e9l\u00e9ment plut\u00f4t tr\u00e8s utilis\u00e9 dans les pages web en HTML<\/abbr>4. De mani\u00e8re assez simple, en HTML<\/abbr>5 il faudra remplacer l’utilisation de l’\u00e9l\u00e9ment<acronym><\/code>, par l’\u00e9l\u00e9ment <abbr><\/code>.<\/p>\n

Ce que la sp\u00e9c.<\/abbr><\/a> dit<\/h2>\n

L’\u00e9l\u00e9ment abbr<\/code> repr\u00e9sente un acronyme ou une abr\u00e9viation…<\/p><\/blockquote>\n

Plut\u00f4t simple comme d\u00e9finition, non ?<\/p>\n

Comment l’utiliser<\/h2>\n

<abbr><\/code> est un \u00e9l\u00e9ment en-ligne (inline<\/em>), nous pouvons donc l’utiliser ainsi :<\/p>\n

<p><abbr title=\"HyperText Markup Language\">HTML<\/abbr> est la meilleure chose pour baliser…<\/p><\/code><\/pre>\n
Comme il s’agit d’un \u00e9l\u00e9ment inline<\/em>, <abbr><\/code> peut \u00eatre utilis\u00e9 dans un autre \u00e9l\u00e9ment en ligne comme <strong><\/code> ou <a><\/code>:<\/p>\n
<p>Le <a href=\"http:\/\/w3.org\"><abbr title=\"World Wide Web Consortium\">W3C<\/abbr><\/a> devrait embaucher Alsacr\u00e9ations.<\/p><\/code><\/pre>\n
Il faut garder \u00e0 l’esprit que les abr\u00e9viations ne sont pas toujours des groupes de lettres majuscules (s\u00e9par\u00e9es ou non d’un point). Vous pouvez aussi utiliser <abbr><\/code> pour d\u00e9limiter un diminutif. Par exemple:<\/p>\n
<h1> <abbr title=\"Alsacr\u00e9ations\">Alsa'<\/abbr> <abbr title=\"Incorporated\">Inc.<\/abbr><\/h1><\/code><\/pre>\n
L’attribut title<\/code> cr\u00e9e une infobulle pour l’utilisateur lorsqu’il survole l’\u00e9l\u00e9ment <abbr><\/code> en question.<\/p>\n
\"\"La ligne de soulignement en pointill\u00e9s est visible par d\u00e9faut sur Firefox et Opera, mais IE<\/abbr>8, Safari, et Chrome ont besoin d’une ligne de CSS<\/abbr> suppl\u00e9mentaire :<\/p>\n
abbr {\r\n   border-bottom: 1px dotted black;\r\n}<\/code><\/pre>\n
Quand utiliser l’attribut title<\/code> ?<\/h3>\n
Un \u00e9l\u00e9ment <abbr><\/code> n’a pas n\u00e9cessairement besoin<\/em> d’un attribut title<\/code>, mais il n’y a aucune contrindication \u00e0 l’inclure (\u00e7a ne mange pas de pain !). Cela d\u00e9pend du contenu du document et de son lecteur, ainsi que de la fr\u00e9quence de r\u00e9p\u00e9tition de l’abr\u00e9viation dans le document. Ainsi, lorsque vous \u00eates s\u00fbr que le visiteur lit pour la premi\u00e8re fois une abr\u00e9viation, il convient de placer un attribut title<\/code> \u00e0 l’\u00e9l\u00e9ment <abbr><\/code>. Les fois d’apr\u00e8s, il n’est plus n\u00e9cessaire de le pr\u00e9ciser, mais il convient de continuer \u00e0 utiliser l’\u00e9l\u00e9ment <abbr><\/code>.<\/p>\n
Dans ce site par exemple, j’encadre souvent (le plus souvent possible… en tout cas) les abr\u00e9viations HTML<\/abbr>, CSS<\/abbr>, and IE<\/abbr> dans une balise <abbr><\/code> ,  mais je ne r\u00e9p\u00e8te pas syst\u00e9matiquement l’attribut title<\/code>car vous \u00eates cens\u00e9s d\u00e9j\u00e0 conna\u00eetre leur signification. Il m’arrive cependant de faire des piqures de rappel en milieu de document, ou quand j’ai le sentiment que le lecteur peut l\u00e2cher… <\/p>\n
Pour des sites ciblant des visiteurs vari\u00e9s, comme pour le secteur public, il conviendra d’utiliser l’attribut title<\/code> afin de \u00ab\u00a0d\u00e9finir\u00a0\u00bb rapidement les acronymes et abr\u00e9viations familiers pour certains, compl\u00e8tement inconnus pour d’autres.<\/p>\n
Ainsi, si vous incluez l’attribut title<\/code> lors de la premi\u00e8re apparition d’un abr\u00e9viation, il est g\u00e9n\u00e9ralement admis dans la pratique d’omettre cet attribut pour une nouvelle occurrence de la m\u00eame abr\u00e9viation.<\/p>\n
Les sp\u00e9c.<\/abbr> donnent un exemple d’utilisation de <abbr title=\"...\"><\/code> si l’abr\u00e9viation est au pluriel. Si le pluriel est \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment <abbr><\/code>, ce pluriel peut \u00eatre inclus dans l’attribut title<\/code>.<\/p>\n
<p>Que suis-je suppos\u00e9 faire de tous ces <abbr title=\"compact discs\">CDs<\/abbr> des Beatles maintenant que je les ai rachet\u00e9 sur iTunes ? <\/p><\/code><\/pre>\n
Acronyme et abbr\u00e9viation : quelle diff\u00e9rence ?<\/h2>\n
Bien que tr\u00e8s<\/strong> similaires, il y a une l\u00e9g\u00e8re diff\u00e9rence entre un acronyme<\/em> et une abr\u00e9viation<\/em>. Un acronyme est un ensemble de lettre formant un nouveau mot, comme la NATO<\/abbr> ou la NASA<\/abbr>, quant \u00e0 une abr\u00e9viation, comme BBC<\/abbr>, il n’en est rien, vous devrez prononcer les lettres s\u00e9par\u00e9ment.<\/p>\n
Et donc ? Pourquoi l’un plut\u00f4t que l’autre ?<\/h2>\n
Bien qu’il y ait une subtile diff\u00e9rence entre les deux, la raison de l’existence des deux \u00e9l\u00e9ments n’a rien \u00e0 voir avec cette subtilit\u00e9. La d\u00e9finition dans HTML<\/abbr>4 de ces deux \u00e9l\u00e9ments provient de la guerre des navigateurs<\/strong> ! Il y a plus de 10 ans, Netscape a cr\u00e9\u00e9  l’\u00e9l\u00e9ment <abbr><\/code> alors que Microsoft a cr\u00e9\u00e9 l’\u00e9l\u00e9ment <acronym><\/code>. Le W3C<\/abbr>ne pouvait (ou ne voulait) pas favoriser l’un plut\u00f4t que l’autre, ils sont donc rest\u00e9s utilisables dans HTML<\/abbr>4 (mais plus en HTML<\/abbr>5).<\/p>\n
Un petit plus dans la pratique<\/h2>\n
Petit ajout \u00e0 la version originale de l’article, et apr\u00e8s visite du blog sur iPhone :
\nLors de la d\u00e9finition d’un terme qui n’est pas habituel au contexte du site, il conviendrait d’\u00eatre le plus explicite possible et de composer son contenu de la sorte :<\/p>\n
<p>Nous avons derni\u00e8rement beaucoup entendu parler de la Conf\u00e9d\u00e9ration fran\u00e7aise d\u00e9mocratique du travail (<abbr title=\"Conf\u00e9d\u00e9ration fran\u00e7aise d\u00e9mocratique du travail\">CFDT<\/abbr>), mais pourquoi ? <\/p><\/code><\/pre>\n
Le terme, nom, ou expression est visible dans son ensemble, puis entre parenth\u00e8ses avec l’acronyme ou l’abr\u00e9viation correspondant agr\u00e9ment\u00e9 de l’\u00e9l\u00e9ment <abbr><\/code> et de ton attribut title<\/code>.
\nUne technique qui ne me semble pas trop fournie visuellement, mais qui regorge d’informations pour diff\u00e9rents supports (mobiles, lecteurs d’\u00e9cran, visiteurs).<\/p>\n
Merci pour votre lecture.<\/p>\n
Traduction et adaptation de l’article : http:\/\/html5doctor.com\/the-abbr-element\/<\/a><\/p>\n
Liens utiles :
\n– La sp\u00e9cifiation W3C<\/a>
\n– Article de Nicolas Hoffmann sur le sujet (2004)<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
L’\u00e9l\u00e9ment <abbr> n’est pas nouveau en HTML5. Cet \u00e9l\u00e9ment n’a pas non plus \u00e9t\u00e9 red\u00e9fini. Les sp\u00e9cifications HTML5 ont cependant retir\u00e9 l’\u00e9l\u00e9ment <acronym>, \u00e9l\u00e9ment plut\u00f4t tr\u00e8s utilis\u00e9 dans les pages web en HTML4. De mani\u00e8re assez simple<\/p>\n","protected":false},"author":4,"featured_media":202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[12],"tags":[252,253,16,251,268],"coauthors":[597],"class_list":["post-779","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-technologique","tag-abbr","tag-acronym","tag-html5","tag-specification","tag-w3c"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t