An Introduction to Web Standards

standards.jpg
Standards are simply
the rules of the road for the Web

I've recently come to the conclusion that a great number of Web developers either don't know about Web standards, or simply don't care. For those who aren't already aware of the standards I'll offer a brief introduction along with resources for additional information. For those who don't care, or who are anti-standards, I'll offer some examples as to why I feel they're important. For those of you already in the know, feel free to add your own advice, examples or pet peeves in the comments section.

The reason for Web Standards

According to the Web Standards Project Mission, "The World Wide Web Consortium (W3C), along with other groups and standards bodies, has established technologies for creating and interpreting web-based content. These technologies, which we call "web standards," are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web."

Think of these as the rules of the road. When you are driving a car in Ohio you know you have to drive on the right side of the road, stop at stop signs, not enter an intersection unless there is room for your vehicle on the other side, yield to pedestrians, etc. If you are driving in Hong Kong you know to drive on the left and follow the various rules relevant to that jurisdiction. Following these rules makes the driving experience more pleasant for everyone; whereas ignoring these rules will, at best, annoy other drivers and, at worst, cause a traffic related fatality.

In most cases, a non-standard Web site isn't likely to cause fatalities, but anything is in the realm of possibility. Errors in formatting can cause content to render incorrectly. Imagine if the word "Never" wasn't visible to users reading the sentence "Never pour gasoline on an open fire." A reader unfamiliar with the combustible nature of rising gasoline vapors could easily immolate himself. That's an extreme example, but whether your site is about fire prevention or your book club, you probably don't intend to misinform or confuse your readers.

Following Web standards lets you increase the odds* that your site will be properly rendered by most browsers and user agents and that your information will be more accessible to users and search engines.

* I say "increase the odds" rather than "guarantee" because there are still differences between the way browsers interpret the standards.

What are the Web Standards?

Different standards are available for different purposes, but for the most part standards will define the type of coding that you should use when creating a Web page or stylesheet, or the procedures or policies you should consider when creating the site. Thus if you are building a site in HTML using Cascading Style Sheets, and want to ensure your site is Section 508 compliant for accessibility, you might follow the standards for HTML 4.01, CSS 2, and Section 508.

For example, HTML standards specify using <p> to start a paragraph, <h1> for a primary header and <em> for emphasis. CSS standards specify things like color and position, so that a purple header could be defined in a stylesheet by: h1 {color:#571963}. Using a descriptive word or phrase in the alt tag of images conforms to accessibility standards (both 508 and WAI).

One of the most overlooked HTML standards seems to be the inclusion of the correct document type. For example, if you are building a site using XHTML 1.0 (as is true of many Case sites) you would include this document type:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This small piece of code tells browsers and user agents what version of HTML you are using, so they don't have to guess when rendering the site. This is like telling Babel Fish whether you want to translate a phrase from Dutch to English or from German to English. If you don't give it the right information you may not get the right result. I'm amazed by the number of sites don't include this basic information.

Another important standard for HTML 4.01 and XHTML 1.0 is the separation of format and presentation. <h3>Headline</h3> is an example of format, indicating that something is a header. Styling the <h3> with CSS, either in the document or in an external stylesheet, to be a certain size, color and font would be an example of presentation. In the old days of the Web this was done within the HTML using the now deprecated <font> tag. In the past one might have typed <h3><font color="33ff33" size="5">Headline<font></h3>. This not only filled up your page with a lot of extra code, but it also meant that if you decided later to make all of your <h3>'s a different color you would have to go and change all of the font codes one by one. When using a style sheet you can define how your <h3>'s will look in one place. To change the color you just make the one change in the stylesheet and you are ready to go.

Separation of format and presentation isn't a particularly new idea, but adoption has spread slowly. CSS 1 was first introduced in 1996 and the CSS 2 recommendation has been around since 1998. While many sites use CSS, it is still not uncommon to stumble upon current sites that are still using older codes such as <font>.

Why this has been on my mind

A few weeks ago a friend sent me a link to a pretty cool looking site for an online magazine. Alas the site wasn't standards compliant and therefore didn't work properly. This particular site was Flash-based with dimensions too big to fit my screen. The page had no scroll bars so I couldn't get to the menus to navigate through the site. I could see the whole site on my Mac, but not on my Dell, and I'm pretty sure I'm not the only one to have had that problem. Since I couldn't navigate the site, they might as well have posted a page that said "Do Not Enter. We don't care about your business." If they had built a compliant site they would have ensured greater accessibility to users and not had this problem.

I've found a number of other non-compliant sites while working to compile a list of local Web developers. Departments without Web staff often look to outsource their Web projects and turn to me for referrals. Thus I'm trying to put together a list of local (to support the regional economy) developers who I can trust to build compliant sites that follow the Case design scheme, maintain a logical navigational structure and support the goals of the client. This has not been an easy task.

The problem is that almost anyone can learn to build a Web site, but only a few can do it well. There are a lot of firms out there, but the quality of work varies dramatically, and only a handful build standards compliant sites. Sites with major compliance errors don't end up on my list. This isn't just because I'm persnickety. If a site fails validation because of a few stray &'s or they've forgotten to close a few <p>'s I'm not worried. Such errors are easily corrected and don't disturb the overall functionality of the site. But if a site uses <font> tags, doesn't include a doctype, leaves alt tags blank on all of their images, etc., then I will conclude that its designers are not professional and will not be able to offer the client the advice or service necessary to implement a successful site.

Conclusion and Disclaimer

If you've ever built a Web site, you've followed at least a few of the standards. The site wouldn't work if you hadn't. For example if you left out the <body> tag your page wouldn't render. Since we're all following some of the standards anyway, I would just encourage everyone to learn and apply more of them. As you become more familiar with them you'll find that your sites become both easier to use and easier to build. To learn more about Web standards visit The Web Standards Project and the resources below.

Standards compliance is an ongoing goal of mine, but I'm only human. Not every site I've built is standards compliant, and the errors become more egregious the older the pages may be. Since I readily acknowledge this you don't need to go hunt them down, they are out there, and I know it!

Web Standards Resources
Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

17 Comments »
  1. Thanks for this post. It's important to remember that just because they're called standards doesn't mean that there's a whole lot of standardization in them, yet. Articles like these help with that.

    Comment by Web standards — August 28, 2007 @7:34 pm

  2. Certainly the standards are set to establish a uniformity across the globe.If there were no standards then the internet would have been a mess to work with.We all love things that follow certain standards and are well organized.

    Comment by David — August 30, 2007 @7:11 am

  3. I think that using standards is actually easier than not using them. Sure there might be a slight learning curve at first, but you begin to develop your own conventions for using standards and it soon becomes second nature. There are reasons why standards exist, so going against the grain just doesn't make much sense.

    Comment by DerekBeau — September 5, 2007 @11:49 am

  4. Many thanks for this post. It's useful to remember point to point because the W3C validation is must important for only web sites.

    Comment by Michele Web — September 7, 2007 @12:13 pm

  5. I completely agree that there are no excuses for ignoring standards. And no real professional would ignore the basic requirements for doing a good job. Using standards can help us in the future, by limiting the number of “adjustments” made for each and every browser. You cant do everything right, but there is a good point in trying doing some stuff. And about the accessability - a person ignoring it should be living inside a closed room with no connection to the real world.

    It is frustrating to see so many “web designers” ignoring standards. I think we need to do a better job of spreading the message and convincing these people that standards compliant design methods are worth learning. There are millions of people selling web design who don’t even seem to know what professionalism means, and standards are just a small part of that.

    Validation isn’t an end result or a final deliverable; it’s an ongoing process that continues long after a site launches. If we don’t put the proper tools and commitment in place, our work will start looking like a late ‘90s throwback, and if we don’t provide guidance and education on validation, the polished, perfect pages we produced will be of little use.

    Comment by Search engine optimization expert — September 10, 2007 @3:29 am

  6. This is one of the reason that could drive away your potential customers.

    Comment by web designing - seo services — September 23, 2007 @9:33 am

  7. Nice post! It's important for beginers like me :) thanks

    Comment by e-business blog — September 24, 2007 @2:26 am

  8. Great post, very comprehensive. Will return on a regular basis to read this blog.

    Comment by Marc Klein - Webdesign — November 7, 2007 @10:57 am

  9. Thanks for this great informative article, from my experience, every reputable web designer should follow web standards for compliance, usuability, acessibility and even SEO, not all web designers follow this, but their customers should ask questions before commissioning them on their projects. I have also found that joining organisations like W3C are expensive, and is geared towards coporate organisations. Websites designed without standards in mind, can normally be detected, particularly when accessing across different platforms and browser version. Clean, organised, detailed web design is always obvious when a page is accessed.

    Comment by CV & Resume Expert — November 28, 2007 @6:58 am

  10. Hi Heidi, Again a nice article. I’m a webmaster/problogger myself and I love reading your articles, they are really valuable (and entertaining). I’ll be hanging around here a lot. Gr. Vincent The World of Office Tips and Tricks.

    Comment by Vincent @ Office Tips and Tricks — January 13, 2008 @8:42 am

  11. It's incomprehensible to me that a designer would not follow Web standards, especially when we aren't talking about someone's little hobby page, but what apparently was intended to be a regular destination for readers.

    Comment by Roger B — January 17, 2008 @2:21 pm

  12. What's the point of designing something no one is ever going to be able to fully use? It seems like common sense that if you are going to put the effort into building it, that you would follow accepted protocols to ensure maximum compatibility.

    Comment by Sully — January 18, 2008 @12:12 am

  13. It is frustrating to see so many “web designers” ignoring standards. I think we need to do a better job of spreading the message and convincing these people that standards compliant design methods are worth learning. There are millions of people selling web design who don’t even seem to know what professionalism means, and standards are just a small part of that

    Comment by Yamalar — April 27, 2008 @3:20 am

  14. It would seem that ignoring standards won't do you any favors with google anyway. If a site is pretty, but totally illegible to google you're going to be spending a lot of cash on marketing and adwords or will have a site with no visitors.

    Comment by Alan B — May 12, 2008 @6:57 am

  15. [...] just that easy—unless, like me, you care about adhering to Web standards. In that case, it requires a few more steps, but don't worry, they're not that complicated. YouTube [...]

    Pingback by » Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0 | Web Development Blog: Heidi Adams Cool — June 8, 2009 @11:56 pm

  16. [...] Both the semantic and non-semantic page samples used in this post were produced using valid W3C standards compliant XHTML and CSS. One is clearly better formed than the other, but both also break in Internet [...]

    Pingback by » Making sense of semantic HTML: an introduction for clients and new Web designers | Web Development Blog: Heidi Adams Cool — August 11, 2009 @11:58 am

  17. [...] your old site was built in W3C standards compliant HTML using semantic mark-up. If so it will make it far easier to re-use any of the old content you [...]

    Pingback by 8 things to consider when redesigning your Web site—let’s start with WHY? | Web Development Blog — May 27, 2010 @3:51 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL