I'm currently on parental leave till September 1st. Until then, I will not be available to read comments, e-mails, tweets and Facebook messages.

If you are interested in my writings, please subscribe to my RSS feed and follow me on Twitter.

What are Web Standards? A comprehensive explanation of what is comprised in the term

This article is also available in Brazilian-Portuguese and in Spanish.

The term Web Standards is featured prominently all over the web, in meetings with customers and amongst web developers in general. However, the problem is that people have different views on what it actually means and encompasses.

Therefore, I will try to explain my views on it and what most people actually mean when they refer to Web Standards.

There aren’t any Web Standards, only Recommendations

First, what you should know is that there doesn’t exist any actual Web Standards when it comes to many technologies. There are indeed standardizing organs, such as ISO standards and Ecma, but when most people say Web Standards they refer to the work of W3C.

The difference is that W3C doesn’t actually set standards, but instead recommendations. In their own words:

A W3C Recommendation is a specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations.

What people mean with Web Standards

Foremost, Web Standards are used in reference to developing HTML/XHTML, although it is recommended to know that the work of W3C consist of many other Technical Reports and Publications. Usually, what the term Web Standards consists of are these areas:

To some people, it means all of the above, and to others, just one of them. What is important to know, though, is that all three are crucial for developing a genuinely good web site.

Valid HTML/XHTML code

Let’s take it from the top: the number one thing people want when they ask for Web Standards is that the code in the web site should validate. For most people, this only means the HTML/XHTML code, but there are also tools to validate your CSS code. Basically, what validating your HTML/XHTML code means is that the code you have in your web page should be according to the definitions given by the doctype you have chosen for your document.

It is important to choose your doctype wisely, since it will affect how the HTML/XHTML code will be interpreted and what layout mode will be activated in different web browsers. By having valid code, you don’t have to rely on different web browser’s varying error-handling mechanisms, but instead it is meant to be rendered the same by all.

By validating your code, you are very well likely to find errors and attend to a number of layout problems you never thought would be related to the actual HTML/XHTML code. It will make it easier to identify potential errors, lead to faster web development and building a better ground for maintenance.

Read more about why you should validate your code

Tools for validating your code

There are a number of online validation tools as well as add-ons to different web browsers. Here are the most popular ones:

Read more about doctypes

Semantically correct code

Something that is often overlooked is the meaning of semantically correct code. The idea is that each element in a web page should have an element that matches its meaning and conveys its value and purpose. The basic explanation of this is to use proper elements depending on the context.

Code examples

This code is semantically poor


<div class="page-heading">Title of the page</div>
<div class="text-paragraph">
    Some text explaining what this web
    site is about, which is really a
    complete paragraph of text
</div>

<a class="menu-item" href="/item-1">Menu item 1</a>
<a class="menu-item" href="/item-2">Menu item 2</a>
<a class="menu-item" href="/item-3">Menu item 3</a>

This code is semantically rich


<h1>Title of the page</h1>
<p>
    Some text explaining what this web
    site is about, which is really a
    complete paragraph of text
</p>

<ul class="menu">
    <li><a href="/item-1">Menu item 1</a></li>
    <li><a href="/item-2">Menu item 2</a></li>
    <li><a href="/item-3">Menu item 3</a></li>
</ul>

The guidelines and recommendations for good semantic code are pretty easy to follow. Just use heading elements (<h1> – <h6>) for different types of headings, paragraph elements (<p>) for paragraphs of texts, and lists (<ul>, <ol> etc) for any kind of listing you might have, and so on.

This will help you to more easily find certain parts in a web page and it will dramatically decrease load time with less code, and at the same time strongly improve maintenance aspects of your web site. And, not to forget, it will help you with SEO, because semantic code will help Google and other search engines to properly understand and index every bit of your code, for maximum results.

Important to note is that proper semantics should never be confused with how it is being rendered. Elements will most definitely be rendered differently depending on the visiting web browser, but that is not the fault of the semantics; just differing web browser implementations. The solution to this is not to alter good semantic code, but instead accomplish a unified presentation through CSS.

Read more about semantics

Separation of content (HTML/XHTML), presentation (CSS) and interaction (JavaScript)

There are a number of reasons why it is vital for you to separate your HTML/XHTML, CSS and JavaScript code. They have very different purposes, and the approach to how to use them should be thought-through.

Main reasons for separation

  • Performance: External files such as .css and .js will be cached in the end user’s web browser after the first load, hence dramatically decreasing load times and improving the experience.
  • Overview: You know where to look for and place code, each layer for its own purpose.
  • Reusability: You can easily reference code and re-use it across the entire web site.
  • Maintenance: You have all the code in one central location, applying all presentation and interaction code to all the web pages within a web site.

Read more about separation of HTML/XHTML, CSS and JavaScript

What about accessibility?

A very common misconception is that a lot of extra work will have to go into making a web site more accessible. The thing is, by ensuring you live up to the three categories mentioned in this article, you have come a very far way in making a web site accessible.

Valid code, especially with a strict doctype, will help you find content errors and non-existing alternate texts. Good semantic code will make it easier for any assistive device, or plainly just viewing the web page without CSS, much easier and understandable.

And, by separating interaction code (JavaScript) from the HTML/XHTML code, the web site will work without JavaScript if it is built on a solid ground. Then, naturally, you can progressively enhance the web site experience by adding a JavaScript layer, but a web site should never be fully dependent on it for the basic parts to work.

Read more about accessibility

Where to go from here

Below I’ve gathered a list of resources for learning more about following the Web Standards established above:

50 Comments/Reactions

Write a comment

Twitter reactions

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview