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:
- Valid HTML/XHTML code
- Semantically correct code
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:
- W3C Markup Validation Service
- W3C CSS Validation Service
- WDG HTML Validator
- Firefox HTML Validator add-on
- Internet Explorer Developer Toolbar
Read more about doctypes
- Fix Your Site With the Right DOCTYPE!
- Activating the Right Layout Mode Using the Doctype Declaration
- W3C’s Recommended list of DTDs
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.
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 (
<h6>) for different types of headings, paragraph elements (
<p>) for paragraphs of texts, and lists (
<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
Main reasons for separation
- Performance: External files such as
.jswill 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.
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.
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: