Semantic Markup: When your message is more important than your header gradient

Since its inception, the web has always been a communication tool, although for a long time many individuals and companies have only seen it as a marketing venue, much like a big, animated billboard. I'm going to discuss the need for and benefits of designing a website using standards-based, semantic markup, and its implications in today's computing environment. It's been a wild decade for those who have been involved in web development. At first, people treated the web as a magazine layout, needing identical end results in a wide range of software products. We all know the sad stories of spacer images, seemingly endless recursion of nested tables to achieve positioning, browser detection, and 47 occurrences of a font tag for one page of text, just so the webpage looks perfect. Most of the major browser conflicts have been resolved, and we have a somewhat level playing field for delivering content, with emphasis on bigger issues like interoperability and device-independence. It's high time we started worrying about delivering the message before formatting the look. More and more people access your information in more and more ways every day. You do want them to get your message, right? Additionally, everyone starts to worry about appropriating time and energy to search engine optimization (SEO) after making everything look right. What if I told you that 90% of your efforts could be avoided simply by actually following a few rules of thumb that you (should) already know?

Rule #1 - Listen to the Man

I'm talking about our buddy Timothy Berners-Lee, not the Haliburton executive staff. His original vision of the world wide web was a non-linear series of connections (links) between nodes (pages), made up of human-readable content for multimedia presentation spread across computers all over the planet. By human-readable we're referring to the source code of the document itself, not the presentation layer that a browser displays, although that is super important too! Throwing junk markup for presentation in your HTML is like throwing a spike strip on the Nascar track. The browser has a set of standards it follows for organizing the structure of your content, and your presentational markup is purposefully getting in its way. Multiply that by the dozens of devices you may receive requests from in any given day and whammo, the signal gets lost in the noise quite quickly. We've all heard it before, but Keep It Simple, Stupid. And don't even start about your latest Web2.0 mega-project. If no one but Firefox 1.5 users can use it, your viral bittorrent-based AJAX framework for social networking is no more useful than the empty stapler sitting next to me.

Rule #2 - Create a hierarchy with your markup

There is a reason that those six header tags exist! Consider the following: your friend is reading a newspaper article to you, but instead of telling you the headline says this or the image caption says that he tells you that the big sans-serif text says this and the smaller bold text says that. Not quite as helpful, is it? This articulation of communication is what semantic markup is all about. An explicit diagram of your information is delivered and understood by anyone or anything that happens to ask for it, instead of a mess which only a subsection of users with specific browsers can understand (which is admittedly the majority). Once you are projecting clear information, it becomes much more useful and flexible, whatever the viewer's needs.

Rule #3 - It's not what you can see, it's the browser

I'm going to go out on a limb and say that most web developers are not literally blind. That makes it easy to forget that not all components of the web have the same advantages. Screen readers, search bots, PDAs, and cell phone browsers all face obstacles that prevent them from correctly interpreting unneeded frill markup in your HTML. What if an image doesn't load properly, or a user has elected to turn image loading off? Does your layout depend on it loading to communicate some information? What about that table of price ranges for your service? How can a non-sighted person parse and retrieve the information he needs efficiently? What about your site navigation? Is there a failsafe in place for cases in which a user cannot or will not allow JavaScript to control the behavior of the menu? These are all very common themes when making an effort to ensure the successful delivery of information to all who want it. Rather than relying on hacks and workarounds to 'fix' specific issues, it is much more simple to start from the bottom and design around your information, not your presentation.

An Example

As proof of the weight of this issue I am going to point to a wonderful semantic retooling walkthrough from the folks over at ALA. It is an excellent, professional example and the effects of the process are dramatic when it is finished. If nothing else skim the how-to then read about the bandwidth savings and SEO... I think you may start reading from the beginning then! It is interesting to note that the Slashcode team did indeed incorporate the concepts outlined by Mr. Frommelt and Slashdot has started enjoying the benefits of semantic information design. Remember, every site will need individual care to come up with the best solution. There are volumes of literature to help you get into the groove of using standards-based, semantic markup. An excellent set of commentaries and tutorials can be found at A List Apart (ALA). Or, if you prefer reading paper you can get a dense chunk of ALA via Jeffrey Zeldman's book Designing with Web Standards. Once you've set up a site with semantic markup it makes the entire development process easier, from dynamic content to universal accessibility. But we'll get to all of that at a later date... Archived at my site