Attending An Event Apart Boston and going through the W3C’s Mobile Web Best Practices course has me looking more closely at how I mark up data.
The main cord that was struck, most directly in Luke Wroblewski’s Mobile First! talk, but echoed by most every speaker in Boston, is to design from the mobile version of your site first. This theme occurs in the Mobile Web course as well.
(more…)
During the past year I’ve become interested in using web standards and semantic markup. The idea is to separate content from presentation. For example, I have followed a variety of holy wars over the use of <i> (italics) and <em> (emphasis) elements. Italics are presentations, emphasis describes the content. The <i> element has been depreciated in favor of <em>, but that leaves a few things hanging. For instance, how should I code a book or movie title?
I follow the convention that book titles should be italicized, eg. The Stars My Destination. But if <i> has been depreciated, that leaves <em>, which isn’t the correct choice — I’m not emphasizing the title, I just want to note that it is a book title. (more…)
During the past week there have been a number of posts about semantic markup (see: Andy Budd), specifically about the use of <i> and <b> (see: sidesh0w.com, Matthew Thomas, Luminosity, bestkungfu and cookiecrook).
Since I have recently been changing the way I code by paying more attention to semantics and using the best, cleanest CSS that I can, this has gotten me to thinking.
To sum up the various arguments, the bold and italic attributes shouldn’t be used (according to the Semantic Coders Guild) because they are purely presentational (ie: visual) and provide no meaning. Instead, they say that we should use the “semantically correct” <em> (emphasis, typically italics) and <strong> (strong, typically bold) elements. These elements are useful for things like screen readers for the visually impaired. They literally tell the reader to add emphasis when reading, just like you do when talking.
So how do we convey that via the visual media of the web? CSS allows us to style <em> and <strong> anyway we want to add visual emphasis.
So far so good.
But I began thinking. Is <strong> really a necessary element? It seems redundant and/or meaningless to me. The point of marking something out in bold/strong type is to add emphasis. So why not just use <em>? It would be just as easy, and I would argue just as semantically correct, to use something like <em class=”italic”> and <em class=”bold”> to change the visual nature of the element while still retaining the semantic emphasis. [Note: the classes mention would, of course, be properly styled in the style sheet with font-style: italic and font-weight: bold. Call the classes whatever you'd like.]
My thoughts snowballed from there to the ever-present <span> element. Does it ever serve any semantic purpose? I think the only time I use it is when I need a hook in order to visually style a section of text. (See the note in the previous paragraph.) So, if the Semantic Coders Guild is calling for the end of all non-semantic markup, what do we do with spans? I’m sure that somewhere, someone has managed to use a span in a semantic way, but I personally can’t think of any at the moment.
[For those of you who may be looking at the code for this site, don't bother telling me how bad it is. I already know that the code has problems. I haven't bothered to clean it up because I am working on a full redesign - or more correctly, an actual design. While I have been working with HTML for a few years, it is only recently that I have begun to understand and care about the code. At work I am constantly improving my coding habits, moving away form HTML tag soup to proper coding. It is so much easier to maintain. This will be reflected in my new site, whenever it gets done.]
[Oh, I made up the Semantic Coders Guild. If anyone was wondering.]
I’ve just tweaked the stylesheets for all of my pages — they all now utilizes the same sheets (layout, presentation and print). Also, all of the pages are now, more or less, complient XHTML 1.0 (transitional) and CSS2 (no more tables!).
And, while they all look great in Mozilla (I love this browser), I just checked IE 6.0 and it, for some reason is cutting off the blog at the hight of the right-hand box. ::Nevermind. It’s all better now::
If you are looking for information on using stylesheets, try A List Apart. And don’t forget to Upgrade Your Browser.
