{"id":924,"date":"2009-06-05T08:00:16","date_gmt":"2009-06-05T07:00:16","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=924"},"modified":"2010-04-12T02:00:11","modified_gmt":"2010-04-12T01:00:11","slug":"definition-list-for-article-comments-or-im-dialogue","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2009\/06\/05\/definition-list-for-article-comments-or-im-dialogue\/","title":{"rendered":"Definition list for article comments or IM dialogue"},"content":{"rendered":"

HTML5 is the<\/em> buzzword this season. Leading people in the industry are using appropriate class names for what will hopefully once become fully supported structural elements. Fully supported = fully supported by browsers.<\/p>\n

In getting ready for HTML5 instead of element header<\/code>:<\/p>\n

<header>Site Name<\/header><\/code><\/pre>\n
you\u2019d write<\/p>\n
<div class=\"header\">Site Name<\/div><\/code><\/pre>\n
For the inclined readers, here\u2019s the HTML5 working draft<\/a>. Quick overview of the element list will help you catch the train.<\/p>\n
Definition lists, rediscovered<\/h2>\n
Definition list is a personal favorite HTML pattern for marking-up 2 or more related content elements. I found it especially useful when nested in list-items on search results pages and various tag\/category listings. This raised a lots of controversy in the past and is still raising today, but I won\u2019t go down that route now. Here\u2019s just a quick example, just in case you don\u2019t have a clue what I\u2019m talking about: <\/p>\n
<\/p>\n
<ul>\r\n    <li><dl>\r\n        <dt>Title<\/dt>\r\n        <dd class=\"thumbnail\"><img src=\"image.jpg\" alt=\"\" \/><\/dd>\r\n        <dd class=\"abstract\">Lorem ipsum dolor sit amet...<\/dd>\r\n    <\/dl><\/li>\r\n<\/ul><\/pre>\n
<\/code><\/p>\n
The all new rediscovered use of definition lists is with comments or dialogs<\/a>, for instance Twitter conversation. It has always been it\u2019s intended for this, but now with the dawn of HTML5 (or launch-break for many) it regains the popularity.<\/p>\n
HTML4 specs<\/a> say:<\/cite><\/p>\n
Another application of DL<\/code>, for example, is for marking up dialogues, with each DT<\/code> naming a speaker, and each DD<\/code> containing his or her words.<\/p><\/blockquote>\n
And here it is:<\/p>\n
<\/p>\n
<dl class=\"dialog\">\r\n    <dt>\r\n        <a href=\"http:\/\/twitter.com\/designer\">\r\n            <img src=\"designer.jpg\" alt=\"\" \/> @designer\r\n        <\/a>\r\n    <\/dt>\r\n    <dd>Oh, it looks beautiful with shortcuts.<\/dd>\r\n    \r\n    <dt>\r\n        <a href=\"http:\/\/twitter.com\/projectmanager\">\r\n            <img src=\"projectmanager.jpg\" alt=\"\" \/> @projectmanager\r\n        <\/a>\r\n    <\/dt>\r\n    <dd>What? But we have full sentences over there!<\/dd>  \r\n    \r\n    <dt>\r\n        <a href=\"http:\/\/twitter.com\/designer\">\r\n            <img src=\"designer.jpg\" alt=\"\" \/> @designer\r\n        <\/a>\r\n    <\/dt>\r\n    <dd>Huh?... but it breaks my grid?!\r\n        F*ckin user generated content.<\/dd>\r\n    \r\n    <dt>\r\n        <a href=\"http:\/\/twitter.com\/projectmanager\">\r\n            <img src=\"projectmanager.jpg\" alt=\"\" \/> @projectmanager\r\n        <\/a>\r\n    <\/dt>\r\n    <dd>Another solution is: we don\u2019t let users post anything.<\/dd>\r\n    \r\n    <dt>\r\n        <a href=\"http:\/\/twitter.com\/designer\">\r\n            <img src=\"designer.jpg\" alt=\"\" \/> @designer\r\n        <\/a>\r\n    <\/dt>\r\n    <dd>No, we can\u2019t do that neither.\r\n        How about we ask\r\n            <a href=\"http:\/\/twitter.com\/programmer\">@programmer<\/a>\r\n            to shorten strings?<\/dd>\r\n    \r\n    <dt>\r\n        <a href=\"http:\/\/twitter.com\/projectmanager\">\r\n            <img src=\"projectmanager.jpg\" alt=\"\" \/> @projectmanager\r\n        <\/a>\r\n    <\/dt>\r\n    <dd>Clever idea! Go ask him!<\/dd>\r\n    \r\n    <dt>\r\n        <a href=\"http:\/\/twitter.com\/designer\">\r\n            <img src=\"designer.jpg\" alt=\"\" \/> @designer\r\n        <\/a>\r\n    <\/dt>\r\n    <dd>I came with the idea, <em>you<\/em> ask him!<\/dd>\r\n    \r\n    <dt>\r\n        <a href=\"http:\/\/twitter.com\/projectmanager\">\r\n            <img src=\"projectmanager.jpg\" alt=\"\" \/> @projectmanager\r\n        <\/a>\r\n    <\/dt>\r\n    <dd>On second thought, I\u2019ll tell\r\n        <a href=\"http:\/\/twitter.com\/cssdeveloper\">@cssdeveloper<\/a>\r\n        to think of something.<\/dd>\r\n    \r\n    <dt>\r\n        <a href=\"http:\/\/twitter.com\/designer\">\r\n            <img src=\"designer.jpg\" alt=\"\" \/> @designer\r\n        <\/a>\r\n    <\/dt>\r\n    <dd>See? Problem solved!<\/dd>\r\n<\/dl><\/pre>\n
<\/code><\/p>\n
Is this making any sense? Or should we just stick with ordered\/unordered lists and cite<\/code> + blockquote<\/code> pairs?<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML5 is the buzzword this season. Leading people in the industry are using appropriate class names for what will hopefully once become fully supported structural elements. Fully supported = fully supported by browsers. In getting ready for HTML5 instead of element header: <header>Site Name<\/header> you\u2019d write <div class=”header”>Site Name<\/div> For the inclined readers, here\u2019s the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,17],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/924"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=924"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/924\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=924"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}