A Simple Guide To Web Standards

I must be a masochist or something. How do I know this? Because not only have I chosen to follow web standards, but I took it upon myself to become the advocate for web standards here at Setfire Media.

Having spent some time looking at standards, it occurred to me that one of the hardest aspects of the subject was just getting some basic overview of the whole thing. With that in mind, I present here the Setfire Media Simple Guide to Standards:

1. Make sure you use the correct doctype

There are few different flavours your can use, but your best bet would be either xhtml 1.0 transitional (you can use tables for layout) or xhtml 1.0 strict (tables for data only, thanks). However, it should be said that if you’re serious about developing to standards, you might be better off going for a strict doctype, as trying to keep a strict doctype valid will help you learn standards better Find the doctypes here.

2. Validate your markup

Assuming you’ve chosen the correct doctype, you’ll want to make sure your document validates. It’s probably best to do this regularly throughout the dev process. It’s a good way to familiarise yourself with standards, and a validating page should be a bit easier to debug when you hit problems with your css. Go direct to the validator page and insert your website’s url, or install something like the webdeveloper toolbar, which will allow you to send the page to the validator from a right click.

3. Markup for sense, not style

Jeffery Zeldman’s phrase, not mine, but I picked it out as it sums up much of what standards are about – that is trying to keep your markup free of presentational elements, and using tags to describe the content of the document, not it’s visual format. It’s worth repeating this as your mantra when you’re putting together a fresh piece of markup.

4. Use divs for marking out sections of documents.

As people got used to not using table tags for layout, divs became a popular tool instead. However it often transpires that too many divs are used, and in the wrong way. Divs are for splitting your content into meaningful chunks, and shouldn’t really be used for anything else(although sometimes people do).

5. Separate, separate, separate.

That’s once for content, once for style and once for behavior. Make sure you keep them apart, it’ll make your life easier, and separation is important if you want to optimise the loading time of your pages. The essence of this is, don’t use inline css, or inline javascript in your markup. You should also refrain from inserting inline css with javascript – try to aim for unobtrusive javascript instead.

6. Use class and id tags meaningfully.

These tags are a great way to add meaning to the document, as there’s only so much you can do with the html/xhtml tags. But make sure you use them effectively. Try to avoid here are presentational related tags like class=”top left” or plain incomprehensible acronyms like id=”nlp_id_32″. Use natural language that describes the content of the tags where possible. E.g. class=”illustration” or id=”main_content”. You and other devs who have to deal with your code will find it a lot easier to interpret these names when editing the content at a later date, and they’re less likely to go out of date if layout changes.

7. Use each id tag once, use class tags many times.

Id tags are supposed to be for unique elements on the page, for example the main navigation. Class tags are repeated, ideally for elements that share common properties.

8. Use tables for tabulated data

These days one of the biggest misconceptions around standards seems to be that you can’t use tables at all in standards markup. This isn’t true, you just need to use them for their intended purpose, i.e. tabulated data. In fact, you can even use them for layout if you want, as long as you’re using a transitional doctype. But don’t for the love of god use nested tables. And really, you shouldn’t need to use tables for layout at all, if you know what you’re doing.

9. Visit these websites:

If you need to learn more about standards, how to develop to them, or keep track of new developments, then you’ll find the following sites very useful:

That’s all for now

Well, there we go. Hopefully that’s going to help you get started on the road to standards-friendly markup, and reduced any associated stress and anxiety. I also hope that it goes some way to demonstrating that the basics of standards are not too hard to grasp(I mean, if I can do it, anyone can).

5 comments ↓

#1 Si on 11.28.08 at 10:00 pm

Nice overview there. Everything you wrote I am familiar with and have used myself but it’s always good read someone else expressing it differently.

I think sometimes people think standards are made for some arbitrary reason – ‘just to have a standard’ – I don’t know much about the politics of it all, and that may in fact be true but adhering to Web Standards makes your code cleaner, easier to maintain and just all round a lite nicer. Whether that’s the true purpose of these standards or just a side effect is irrelevant as far as I’m concerned.

#2 Best Virtual Advertising » Blog Archive » A Simple Guide To Web Standards | The Matchbox on 11.29.08 at 6:52 pm

[…] unknown wrote an interesting post today onA Simple Guide To Web Standards | The MatchboxHere’s a quick excerptGo direct to the validator page and insert your website’s url, or install something like the webdeveloper toolbar, which will allow you to send the page to the validator from a right click. … […]

#3 Sam Sutton on 12.01.08 at 10:44 am

As far as I understand it, the theory of standards is to create a common base we can all work from, developers and browser makers alike, and so hopefully eliminating a lot of work that we have to do to get our various products working together as we want them too. I’ve seen some good criticism of web standards recently, but I think most web developers would say that with the latest crop of browsers its definitely become easier(if not trivial) to create designs that are cross-browser compatible, and from my observations, this is certainly in part due to the efforts of the standards community.

#4 Boris the SEO on 01.18.09 at 7:20 am

This is a very well crafted and useful post. It is good old basic common sense, or at least to me. Thanks for the great post. First Time here. I will be back!

#5 Ric Roberts on 02.12.09 at 9:50 pm

Sam, this is a great summary. Thanks.

I agree with Si – following the standards as you describe actually adds quality, readability and maintainability to your code, as opposed to just following standards for standards’ sake. If only MS paid attention to them for IE (8 versions and they still can’t get it right!).

Leave a Comment