{"id":132,"date":"2008-11-28T15:40:06","date_gmt":"2008-11-28T14:40:06","guid":{"rendered":"http:\/\/www.setfiremedia.com\/blog\/?p=132"},"modified":"2008-11-28T15:46:15","modified_gmt":"2008-11-28T14:46:15","slug":"a-simple-guide-to-web-standards","status":"publish","type":"post","link":"https:\/\/www.setfiremedia.com\/blog\/a-simple-guide-to-web-standards","title":{"rendered":"A Simple Guide To Web Standards"},"content":{"rendered":"

\"\"<\/p>\n

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.<\/p>\n

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:<\/p>\n

<\/p>\n

1. Make sure you use the correct doctype<\/h3>\n

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<\/a>.<\/p>\n

2. Validate your markup<\/h3>\n

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<\/a> and insert your website’s url, or install something like the webdeveloper<\/a> toolbar, which will allow you to send the page to the validator from a right click.<\/p>\n

3. Markup for sense, not style<\/h3>\n

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.<\/p>\n

4. Use divs for marking out sections of documents.<\/h3>\n

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<\/a>).<\/p>\n

5. Separate, separate, separate.<\/h3>\n

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<\/a> instead.<\/p>\n

6. Use class and id tags meaningfully.<\/h3>\n

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.<\/p>\n

7. Use each id tag once, use class tags many times.<\/h3>\n

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.<\/p>\n

8. Use tables for tabulated data<\/h3>\n

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.<\/p>\n

9. Visit these websites:<\/h3>\n

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:<\/p>\n