5 tips for following Web standards

It’s already the sixth from where I am, but the CSS Naked Day practice is interesting and something I would have done if I had found out about it earlier. Basically, it’s to promote Web standards, using correct/proper semantics in your markup, and making sure that even without your clothes—I mean, your design—your website is still, well, readable.

I remember hearing about this last year, but it slipped my mind that it would happen again this year. I shall remember next year! Especially since I’ve been increasingly (over the past year or two) moving more and more towards the separation of content and design and making sure I follow current Web standards. I feel that everyone should! Standards are there to make sure we all understand each other; what’s the use if we don’t follow them to the best of our ability?

Here are five tips to start you off on the journey towards following Web standards:

  1. Use Chris Pederick’s Web Developer Extension. Believe me, it helps a lot. You find out a lot of detail about the styles you’re using, about how your markup elements overlap, plus other nifty functions such as resizing your window (liquid layout love ♥) and removing CSS to see your website naked ;) (Internet Explorer users, you might want to check out Internet Explorer Developer Toolbar. It’s in beta 3 already, and can run with IE6.)
  2. Use standard XHTML tags over DIVs. This is something I’m continually moving into steadily, but already I’m seeing the reasons why it’s better to say <h1>My nice title</h1> than <div class="title">My nice title</div>. Yes, I used to write my code that way because hey, you work with an element that’s devoid of styles, and that’s easier. (DIVs just have the display: block style.) But what happens when there are no styles whatsoever? Everything then becomes the same. There’s no distinction between your headings and your text.
  3. As a follow-up on the above, reset all your elements’ margins and padding to zero. This makes for tighter control over your design, as all XHTML elements come with their own preset margins and paddings. This reset can be done by adding the following on the top of your stylesheet:
    * { margin: 0px; padding: 0px; }
  4. Validate your markup. Yes, this is important. This is important because valid markup really makes cross-browser compatibility easier. Yes, Internet Explorer will always try to do things its way, but valid markup means you’re following set standards. There are four types of markup standards you can follow: HTML 4.01, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.0 Frameset. For an explanation on these, you can look at W3C’s HTML and XHTML FAQ.
  5. Learn, learn, and continue learning. The Web is a constantly changing thing, and new techniques and ways of doing things emerge quickly. Try to keep abreast of these changes, and weigh the pros and cons of implementing these changes; after all, we need to make sure that a complete switch won’t alienate readers/visitors.

Good luck on the journey, may you find it as enjoyable as I did. ♥

Comments are closed. :( You can bother me at @angelamaria if you need to tell me something!

«