My case for standards-based web layouts
categories: css, front-end development, thoughts
Since 1999, the World Wide Web Consortium (W3C) -- a standards body that tells the world how the web should work -- has urged web sites to use semantic markup for content and cascading stylesheets (CSS) for layout, and to abandon code that combines information and presentation in non-semantic HTML table-based layouts. Semantic markup ...
- puts the most important information in a document at the beginning of the document;
- clearly marks headings, paragraphs, lists and other standard elements; and
- in general indicates what something is, not what it looks like.
It’s this separation of information from presentation that helps Google figure out what a page is about; that lets users make decisions about how they interact with content; that allows content to be reused in ways we didn’t think about when it was first created; that lets us change the look and feel of a whole site by editing a file or two; and that lets us take a site built for a PC-based browser and squeeze it onto an iPhone.
All those advantages aside, at the end of the day, just because the W3C says it should be so doesn’t make it so. Plenty of sites haven’t managed to let go of late-1900s practices, and for understandable reasons: There’s a non-trivial learning curve for designers and developers who grew up slicing and dicing layouts into HTML tables, and good semantic markup and CSS takes careful planning at the outset of a project. Combine those challenges with the fact that a dynamic site’s front-end code can be brutally intertwined with back-end processes, and it can be difficult for a company to justify transitioning away from a system that seems to be working just fine.
However, a few factors are tipping the balance in the W3C’s favor these days:
- Search engines like pages they can read, and semantic markup using HTML provides a language search engines can understand. Mark an element as a Level 1 Heading, and search engines will know it’s the most important heading on the page and use that information to figure out what your page is about. Simply using semantic markup can contribute greatly to a site’s search engine optimization.
- Accessibility has come to the forefront of the web development world with the certification of a class-action lawsuit against Target department stores. The suit says that Target has refused to take steps to make the site usable by people who are visually impaired. As a result of a ruling in the lawsuit, California may mandate that sites be accessible to the visually impaired. While sites that use table-based layouts aren’t inaccessible by definition, they are inherently more difficult to make accessible than sites that separate their information from their presentation.
- The Web 2.0 phenomenon relies on content that can be rearranged and reused with ease, and that rearranging and reuse is infinitely easier on sites that separate information from presentation. Web 2.0 technologies rearrange, reuse and repopulate elements on a page based on what the elements are, not on what they look like or where they are on the page. As users come to expect more interactivity and fewer page loads from their web experience, sites that separate their information from presentation will be in a better position to make use of Web 2.0 technologies.
- The mobile web has existed for several years now, but the iPhone is reshaping the mobile web landscape and blurring the line between PCs and portable devices. Though the iPhone can browse “normal” web sites, many content providers are offering sites that are HTML-based but customized for the shape and size of the iPhone’s screen. As more portable devices that can browse the “normal” web become available, sites that separate content from presentation will be uniquely positioned to offer mobile users a customized version of their existing pages without having to change the underlying code.
Further reading:
- POSH - Plain Old Semantic HTML on 456 Berea Street
- Why Tables for Layout is Stupid from Seybold 2003 (!)
- The W3C on CSS
- CSS Zen Garden, the site that leads many developers down the path to standards
- A List Apart offers excellent articles on standards-based web development
