{"id":188,"date":"2010-06-04T01:24:33","date_gmt":"2010-06-03T23:24:33","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=188"},"modified":"2015-01-18T17:58:47","modified_gmt":"2015-01-18T16:58:47","slug":"html5-definition-element-dl","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/html5-definition-element-dl","title":{"rendered":"HTML5, d\u00e9finition de l’\u00e9l\u00e9ment DL"},"content":{"rendered":"

Du nouveau sur le HTML5 avec la d\u00e9finition de l’\u00e9l\u00e9ment <dl><\/code>.
\nCet \u00e9l\u00e9ment d\u00e9j\u00e0 existant dans HTML4 comme une \u00ab\u00a0liste de d\u00e9finition\u00a0\u00bb a \u00e9t\u00e9 l\u00e9g\u00e8rement revu pour HTML5.
\nSouvent utilis\u00e9e de mani\u00e8re non-s\u00e9mantique par les concepteurs Web et peu connue en HTML4, la liste de d\u00e9finition demandaient \u00e0 ce qu’il y ai une forte relation entre son terme (<dt><\/code>) et sa d\u00e9finition (<dd><\/code>).
\nVoyons voir ce qu’il en devient.<\/p>\n

Ce qui change et ce qui ne change pas<\/h2>\n

On passe de la \u00ab\u00a0liste de d\u00e9finition\u00a0\u00bb (Definition List<\/em>) \u00e0 la \u00ab\u00a0liste de description\u00a0\u00bb (Description List<\/em>).
\nIl s’agit certainement ici de rendre plus populaire un type de liste tr\u00e8s peu ou tr\u00e8s mal utilis\u00e9 en modifiant son sens premier.
\nVoici ce que dit la sp\u00e9cification \u00e0 ce sujet :<\/p>\n

L’\u00e9l\u00e9ment <dl><\/code> repr\u00e9sente une liste associative constitu\u00e9e de z\u00e9ro \u00e0 plusieurs groupes nom-valeur (une liste de description). Chaque groupe doit \u00eatre constitu\u00e9 d’un ou plusieurs noms (\u00e9l\u00e9ment <dt><\/code>) suivis par une ou plusieurs descriptions (\u00e9l\u00e9ment <dd><\/code>). Dans un unique <dl><\/code> il peut ne pas y avoir qu’un unique nom associ\u00e9 \u00e0 une ou plusieurs descriptions.<\/p><\/blockquote>\n

On y retrouve nos \u00e9l\u00e9ments coupl\u00e9s\u00a0<dt><\/code> et <dd><\/code>, deux composants de notre liste de d\u00e9finition<\/del> description. (il y a des habitudes \u00e0 perdre !)<\/p>\n

Un \u00e9l\u00e9ment fait son apparition pour venir compl\u00e9ter le nom (\u00e9l\u00e9ment <dt>), il s’agit de : <dfn><\/code><\/p>\n

Exemples d’utilisation<\/h2>\n

Glossaire<\/h3>\n

Il se rapproche de notre ancienne liste de d\u00e9finition en proposant une d\u00e9finition pr\u00e9cise d’un mot. C’est ici que notre nouvel \u00e9l\u00e9ment va prendre son sens.<\/p>\n

<aside>\r\n  <h2>Glossaire<\/h2>\r\n  <dl>\r\n      <dt><dfn>RSS<\/dfn><\/dt>\r\n        <dd>Un format XML servant \u00e0 r\u00e9unir les informations souvent mises \u00e0 jour d'un site Internet.<\/dd>\r\n      <dt><dfn>Weblog<\/dfn><\/dt>\r\n        <dd>Contraction des termes \"web\" et \"log\", un weblog est un site souvent mis \u00e0 jour, \u00e0 l'image d'un journal<\/dd>\r\n  <\/dl>\r\n<\/aside><\/code><\/pre>\n
<dfn><\/code> sert donc pr\u00e9cis\u00e9ment \u00e0 cerner le mot d\u00e9fini ensuite gr\u00e2ce \u00e0 l’\u00e9m\u00e9nent <dd><\/code><\/p>\n
Meta-donn\u00e9es<\/h3>\n
En fin d’article par exemple, ou en page Mentions L\u00e9gales d’un site Internet, il peut \u00eatre int\u00e9ressant de fournir des informations list\u00e9es m\u00e9thodiquement.<\/p>\n
<dl>\r\n  <dt>R\u00e9dacteurs :<\/dt>\r\n    <dd>David<\/dd>\r\n    <dd>Fanny<\/dd>\r\n  <dt>Webmasters :<\/dt>\r\n    <dd>Sylvain<\/dd>\r\n  <dt>H\u00e9bergeur :<\/dt>\r\n    <dd>H.I.F.<\/dd>\r\n<\/dl><\/code><\/pre>\n
Nous profitons donc ici d’un seul nom servant de titre \u00e0 une liste de description qui la suit imm\u00e9diatement. Nous savons rapidement ici que Fanny et David (les deux <dd><\/code>) sont des r\u00e9dacteurs (leur <dt><\/code> commun).<\/p>\n
Plusieurs noms pour une seule description<\/h3>\n
Le dernier cas repr\u00e9sente une situation que vous rencontrerez probablement assez rarement, mais puisque la sp\u00e9cification le pr\u00e9voit, autant l’aborder. Il s’agit d’une combinaison nomS<\/strong>-description.<\/p>\n
<dl>\r\n  <dt><dfn>Apple<\/dfn><\/dt>\r\n  <dt><dfn>Microsoft<\/dfn><\/dt>\r\n  <dd>Prestataires de quelques services informatiques\r\nsans trop de valeur ajout\u00e9e.<\/dd>\r\n<\/dl><\/code><\/pre>\n
Ici Apple et Microsoft sont r\u00e9unis (\u00e7a change hein !) sous la m\u00eame d\u00e9finition. Nous avons donc deux termes pour une d\u00e9finition commune.
\nL’inverse est aussi possible, puisqu’un terme pourrait facilement avoir deux d\u00e9finitions ou plus. Je parle bien ici de d\u00e9finition, puisque nous avons vu pr\u00e9c\u00e9demment que pour une liste de description c’est d\u00e9j\u00e0 possible.<\/p>\n
Au final…<\/h2>\n
La liste de description ne change donc pas beaucoup de sa grande soeur propos\u00e9e pour HTML4. Celle-ci a cependant \u00e9t\u00e9 revue dans ses valeurs s\u00e9mantiques et devrait permettre une utilisation plus populaire.<\/p>\n
N’h\u00e9sitez pas \u00e0 renforcer la valeur s\u00e9mantique d’une liste de description en la pla\u00e7ant convenablement dans l’\u00e9l\u00e9ment <details><\/code> , ou en fonction de sa valeur, dans un \u00e9l\u00e9ment <aside><\/code>.<\/p>\n
Source :
\nhttp:\/\/html5doctor.com\/the-dl-element\/<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Du nouveau sur le HTML5 avec la d\u00e9finition de l’\u00e9l\u00e9ment <dl>. Cet \u00e9l\u00e9ment d\u00e9j\u00e0 existant dans HTML4 comme une \u00ab\u00a0liste de d\u00e9finition\u00a0\u00bb a \u00e9t\u00e9 l\u00e9g\u00e8rement revu pour HTML5.<\/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":[70,73,74,71,72,69,16],"coauthors":[597],"class_list":["post-188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-technologique","tag-balise","tag-dd","tag-dfn","tag-dl","tag-dt","tag-element","tag-html5"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=188"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/188\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/202"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=188"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}