XTHML, CSS and Web Standards for dummies

Or in other words, getting rid of tables for layout.

Although the web standards movement is not new, the majority of web designers and developers have yet to embrace these approaches, perhaps because they are unaware or because changing from old established methods might be considered too daunting and time consuming. So here is a what, why and how guide to getting started with this rapidly growing approach to producing quality web documents.

What are Web standards, CSS and XHTML?

Web standards are a set of guidelines to producing web documents that emphasise:

  • validity of code so that your code conforms to the appropriately outlined specification (W3C compliance), and does not require the browser to guess what you’re trying to do,
  • accessibility, so as to be inclusive to the widest possible audience, including those with impairments and disabilities and users of different devices,
  • semantic correctness so that your code makes sense and individual elements have their own meaning that can be understood by machines (search engines, assistive devices, applications) as well as people.
  • separation of content and structure from presentation leaving your markup clean and semantically meaningful, making it quicker to make future presentational changes and reducing total file sizes and download times.

Some authorities in this area are the W3C and WAI. Essentially, the idea is to create one set of code that works for everyone, independent of browsers and platforms, disability and device.

CSS: Most would be familiar with CSS already. A stylesheet is commonly used to set out font sizes and colours in a document. What we’re talking about here though is doing everything presentational in a CSS file, leaving your markup to be purely structure and content, and semantically correct. By semantically correct we mean, when something is a heading, you have the appropriate h1, h2, etc, element (read: tag), if it’s a list of items, be they text, links, buttons or whatever then that should be in li elements within a ul or ol and if (and only if) it’s tabular data, then put it in a table element. So, CSS takes care of your layout.

XHTML is the successor to HTML 4.0. It is quite similar and if you know HTML, adapting to XHTML is a breeze. The differences in XHTML are that it is less forgiving and has a strong emphasis on well formed code, with all elements closed correctly (including empty elements like br, hr, img). Many legacy elements and attributes that were deprecated in HTML 4 are now removed from XHTML 1.0. Many authoring packages, including Dreamweaver, are well capable of producing valid XHTML.

But why?

The ideals:

  • Because the web is for everyone, regardless of impairment, technology, device.
  • Because it is more correct, the code makes sense and is easier to update.
  • To achieve greater separation of presentation and content (and behaviour). One document has your content, another has your presentational rules.

In the real world:

  • File size and loading times are greatly reduced. Converting from tables and spacer based markup to standards-based can typically save at least a third of your bandwidth costs and commonly over 50%. For a large site with a high volume of traffic, this means short-term measurable savings on bandwidth costs.
  • Production hours in the long-term are reduced significantly as colours, branding and even layout changes can be executed in a matter of minutes or hours, rather than days or weeks. Having only one set of code to deliver to all platforms also has obvious time saving benefits when it’s time to update or redesign. These benefits mean it is much less of an investment when it comes to updating look and feel, leading to a more dynamic web presence and greater ROI.
  • Greater assurance of future-proofing your site. Your site obeys established rules (W3C standards), so if they work in browsers now, they should continue to work in the browsers and devices of the future.
  • You won’t get sued for discrimination when visually impaired or otherwise handicapped users are unable to access your site. Seriously.
    See SOCOG sued for $20K over Sydney Olympics site, and in recent news, Priceline.com and Ramada.com fined $40K and $37.5K respectively for examples.

The list goes on, but those are the main factors that stand out, in my opinion.

How?

So, now that you’re convinced that this is where you want to be going, how do you get there? Well besides slowly and with much difficulty, here are some steps:

  • Declare your DOCTYPE in your document. The Doctype (document type declaration) identifies what kind of document it is and allows you to use a validator to check your code. A valid doctype is a must when coding XHTML to prevent some browsers from switching over to quirks mode, which renders differently for compatibility with older (bad) code. Anyway, a much more authoritive article by Zeldman can be found over at A list apart: Fix your site with the right doctype!. Incidentally, this blog uses XHTML 1.0 Transitional. For work, I code to XHTML1.0 Strict. There is also XHTML 1.1 but it’s implementation in browsers is sketchy and incomplete, so to do anything remotely complicated in XHTML 1.1 is virtually impossible.
  • Learn to code. Semantically. People so often don’t want to learn what their markup means, and are happy for a piece of software to take care of it. This doesn’t really cut it professionally. This doesn’t have to mean hand-coding in a plain text editor. I personally still use Dreamweaver’s code view to produce my code, but you want to make sure your app is putting in the exact code you want it to. Semantic coding involves understanding the purpose of each element in your design, structurally rather than visually. Code your page, then validate it.
  • Use CSS for all presentation. Learn CSS. Strip out the presentational markup from your code, all those attributes that determine what colour the text and background is, what size elements are and how they are spaced out. Anything not to do with the content and logical structure goes into your CSS file(s). As a progression, rather than taking an all or nothing approach, I suggest separating content and layout incrementally such that all your fonts, spacing, colours and background images are determined by the CSS, whilst keeping your columns or design grid determined by tables. Once you’re confident with all the techniques that come with that, take the next step and lose the layout tables altogether and dive into positioning and floating.
  • Use Mozilla. I absolutely recommend Mozilla Firefox with the included developer tools (the DOM inspector is phenomenal) along with the Web Developer Toolbar to annihilate all those tricky issues in your CSS. Mozilla browsers are highly standards compliant. It makes good sense to build and test for Mozilla. You are quickly going to find myriad flaws in Internet Explorer’s implementation of CSS, so get it working in Moz first then fix in IE. Or test in both as you go.

So that’s a basic primer to the what, why and how of web standards. The web is a wonderful place, and although I’ve read the odd book or two on this, I’ve learnt pretty much everything from well written and helpful articles on the web. Here’s hoping this one has helped too. Either way, here are some excellent links:

3 comments

  1. Great article! I’m going to get my bosses to read this so that I may never have to deal with a 5px spacer again!

  2. Great to be informed on where the future of websites is going. With a novice like me when it comes to website design, it’s good to know there’s many sites and advice such as yours to help us out there. I have so much to learn about coding! I just hope it’s not too hard.

  3. great … css rocks… and I was wondering why my HTML editor is doing this now <br / >????