{"id":792,"date":"2008-12-11T12:54:21","date_gmt":"2008-12-11T11:54:21","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=792"},"modified":"2009-04-14T07:15:35","modified_gmt":"2009-04-14T06:15:35","slug":"episode-three-mark-it-up","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2008\/12\/11\/episode-three-mark-it-up\/","title":{"rendered":"Episode Three: Mark it up!"},"content":{"rendered":"
\n

This is the third part of the series, \u201cEnvironmental friendly CSS<\/a>\u201d<\/p>\n<\/div>\n

In the previous episodes we\u2019ve created a creative\/technical brief<\/a> and then mocked-up design<\/a> in Photoshop. The next step in a process is creating solid XHTML markup. Let’s open it up with a question:<\/p>\n

How to markup category cloud?<\/h2>\n

There are two simple approaches that usually comes to mind at first: a paragraph and an unordered list.<\/p>\n

If we use paragraph with links, we wouldn’t probably miss it in terms of the default presentation across the range of User Agents. The thing is \u2014 if one is marking-up a \u2018cloud\u2019, it’s natural that all the links are inline, one after another.<\/p>\n

\u2014 Let me think about it! Yea, I will just set text-alignment: center<\/code> to that paragraph and I’m done. Great!<\/p><\/blockquote>\n

<\/p>\n

<\/p>\n
<div id=\"category-cloud\">\r\n\t<h4>Most popular joke types and categories<\/h4>\r\n\t<p>\r\n\t\t<a href=\"#\">Political jokes<\/a>\r\n\t\t<a href=\"#\">Professional humor<\/a>\r\n\t\t<a href=\"#\">Mathematical jokes<\/a>\r\n\t\t<a href=\"#\">Ethnic jokes<\/a>\r\n\t\t<a href=\"#\">British tell jokes<\/a>\r\n\t\t<a href=\"#\">Self-deprecating humor<\/a>\r\n\t\t<a href=\"#\">Blonde jokes<\/a>\r\n\t\t<a href=\"#\">Redneck jokes<\/a>\r\n\t<\/p>\r\n<\/div><\/pre>\n
<\/code><\/div>\n
Not great!<\/strong> The above code is wrong. The \u2018cloud\u2019 is a visual cue, not the structural element. The category cloud is \u2014 in its essence \u2014 a list of categories, so the more suitable XHTML element would be unordered list.<\/p>\n
It’s not a cloud, it’s a list<\/h2>\n
Cloud as typography or XHTML element doesn’t exist. Tag or category cloud is a visual representation  of the list<\/strong> of categories. So let’s try semantically correct markup \u2014 an unordered list.<\/p>\n
<\/p>\n
<div id=\"categories\">\r\n\t<h4>Most popular joke types and categories<\/h4>\r\n\t<ul>\r\n\t\t<li><a href=\"#\">Political jokes<\/a><\/li>\r\n\t\t<li><a href=\"#\">Professional humor<\/a><\/li>\r\n\t\t<li><a href=\"#\">Mathematical jokes<\/a><\/li>\r\n\t\t<li><a href=\"#\">Ethnic jokes<\/a><\/li>\r\n\t\t<li><a href=\"#\">British tell jokes<\/a><\/li>\r\n\t\t<li><a href=\"#\">Self-deprecating humor<\/a><\/li>\r\n\t\t<li><a href=\"#\">Blonde jokes<\/a><\/li>\r\n\t\t<li><a href=\"#\">Redneck jokes<\/a><\/li>\r\n\t<\/ul>\r\n<\/div><\/pre>\n
<\/code><\/div>\n
Some novice CSS developers in the past argued that they were having troubles with list-items in tag clouds. In the last article (coming up next week) we will explain it throughout. But, it’s very important to learn how to shift from visual\/CSS mindset to semantic\/contextual XHTML mindset<\/strong>.<\/p>\n
A little practice will get you there<\/h2>\n
When deciding on the XHTML structure for any given element, try to ignore the design at first<\/strong>. You will easily modify markup later if you find no other way to accomplish layout only with CSS.<\/p>\n
Instead, dive-in under the surface and check the bare-naked content and context to decide what markup should do the job.<\/p>\n
If creating XHTML snippets is a second nature to you, please share how do you<\/em> fight your thoughts about how it’s going to look<\/strong> when choosing appropriate markup?<\/p>\n","protected":false},"excerpt":{"rendered":"
This is the third part of the series, \u201cEnvironmental friendly CSS\u201d In the previous episodes we\u2019ve created a creative\/technical brief and then mocked-up design in Photoshop. The next step in a process is creating solid XHTML markup. Let’s open it up with a question: How to markup category cloud? There are two simple approaches that […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,18],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/792"}],"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=792"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/792\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=792"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}