Beyond the Separation of HTML

December 02, 2008

Most of you know about the concepts behind the Web Standards movement. You separate everything and in return it makes your life easier. Of course that’s an oversimplification of the process, but unless I hear otherwise I’m going to leave it to those who have already put in place the foundations of the movement. What I wanted to mention is the almost micro-formatting of semantic HTML, which I haven’t seen directly mentioned before. (Though I’m sure it must have been.)

Obviously we have some important things like <em> and <strong> that should take care of your typical content formatting necessities. Those are entirely appropriate if you use them as intended, to indicate bolded and emphasized text.

In my opinion that’s where the HTML modification should end. What do I mean? If you had a list of navigational links that you wanted to be bolded you should not use <strong>, instead you should target those links from your CSS by something like either

#navigation li a

or

#header ul li a

Otherwise, if you choose to change the look of your navigation you will have to return to every page or template and change your HTML.

My real gripe is not that I’ve seen that exact thing happening, but rather the evolution of that thought process. If there is an established order for our content it’s important to stay with that. What happens if we ever want to redo the styling or even provide that content for another medium that may not be using the same CSS? Here are some practical examples of what I’m talking about.

Break Tags

Let’s say that for whatever reason your paragraphs have a width of 450 pixels but your text hangs down onto the next line by one word leaving a “widow”. Now, being a professional designer and knowing that you should hate widows — in this sense of the word — there would be a temptation to add a break tag before the second to last word in order to push a second word down onto the last line.

But what would happen if you were displaying it on a mobile device where you had defined a different pixel width for paragraphs? It might force an even odder break like so:

The thing to do in this case would be to place a non-breaking space before the last word of the paragraph. What that would do instead is force the second to last word down, but it would also allow you to keep your styling on multiple implementations of the CSS. Structurally we haven’t changed anything, except the type of space between the last two words. Hopefully though you are using a quality CMS that can use something like the Widon’t plugin by Shaun Inman.

List Orders

For our next example, let’s say you have a list that is supposed to sit on the right side of your page. You could float the list to the right with float: right, however, that would then probably flip the order of the links into reverse. The temptation there would be to place the links in reverse order, but that would then give you more work for any alternate style sheets that may not be able to handle the float: right for whatever reason. It would also show up in reverse order for text-based web browsers and potentially screen readers.

If you think about it, it just doesn’t make sense from a logical perspective. Especially if you needed to put the list on the left side of the screen later on, you would have to go back and modify every page of the site, or every template that follows that pattern. If you had made any special classifications to your CSS you would then have to make them work as well. All of that, though it would seem to be minor adjustments, really add up.

So…

In short, make your life easier and don’t modify your HTML. It gives you a more flexible platform from which to make updates across your site. It also assists in delivering the same content to multiple platforms at the same time. With the growing market in mobile devices and the potentially diverse usage of HTML that’s definitely a good thing.

Share on Twitter | Share on Facebook | Bookmark on Delicious |