A Proper Web Standards Education: Part 2

By Chris Mills

Why web standards?

This is a question many people ask when they first start creating a web page. After all, one reason why web development has always been so accessible to a large number of people is that web browsers are a lot more forgiving when rendering web pages. In contrast to programming in say Java or C++, where syntax errors and suchlike will cause the code compiler to refuse to run your program at all, you can break all kinds of rules in HTML and CSS and still get something that looks ok on the web browser on your computer at home. So why bother imposing extra rules on yourself? The benefits are not immediately obvious, but believe me, you will start to appreciate them as you delve more and more into web development. I’ll summarise the main reasons in this section.

Semantics

Another related concept that is very important when creating web pages is semantics – this basically means making things self-describing, ie their appearance describes their function or purpose. This may not sound immediately that mind-blowingly useful, but think of it like this – how useful would a stop sign be if it said “go” on it? How useful is a light switch if it is painted to look like a fire alarm?

Transferring this logic on to the Web, how useful is a navigation menu if you can’t tell what information the links lead to, or even that there are links present at all? I think you get the point now. Semantics are very important in many ways on web pages, and web standards provide you with a perfect means to implement good semantics, as long as you use them properly.

Let’s look at a quick example. Say you want to put a title up on a web page, followed by a list of things to do on a day (Let’s not choose a work/school day). How would you structure this using HTML? It is best to choose elements that describe the function of the text, like so:

<h1>Things to do on Saturday</h1>
<ol>
  <li>1pm: Wake up! Have a quick bite to eat at nice cafe down the street.</li>
  <li>2.30pm: Meet more friends in town and go shopping.</li>
  <li>5.30pm: Grab something light to eat at home.</li>
  <li>7.00pm: Have a jam with friends, form a new band.</li>
  <li>8.00pm: Go to local venue and watch metal bands play.</li>
</ol>

Well, that’s my idea of a good time anyway. This code would render as follows:

Things to do on Saturday

  1. 1pm: Wake up! Have a quick bite to eat at nice cafe down the street.
  2. 2.30pm: Meet more friends in town and go shopping.
  3. 5.30pm: Grab something light to eat at home.
  4. 7.00pm: Have a jam with friends, form a new band.
  5. 8.00pm: Go to local venue and watch metal bands play.

(I’ve also used a list-style:none; CSS rule to get rid of the default 1, 2, 3, 4, bullets that appear on ordered lists – view the page source to check this out.)

This is a good way to do it because heading elements (<h1>-<h6>) are the one and only choice for headings/titles on pages, and an ordered list (<ol>) is the best choice for a list of items where the order of the list items (<li>) matters – it wouldn’t make sense to try to do these activities out of order! You’d use an unordered list (<ul>) in cases where the order doesn’t matter, for example a shopping list.

So why not just mark it up with any old element? You could get a very similar-looking page using the following:

<font size="5">Things to do on Saturday</font>
<br><br>
<font size="2">1pm: Wake up! Have a quick bite to eat at nice cafe down the street.</font>
<br><br>

<font size="2">2.30pm: Meet more friends in town and go shopping.</font>
<br><br>
<font size="2">5.30pm: Grab something light to eat at home.</font>
<br><br>
<font size="2">7.00pm: Have a jam with friends, form a new band.</font>

<br><br>
<font size="2">8.00pm: Go to local venue and watch metal bands play.</font>

(You could even use elements like <banana> and <weasel>if you wanted, and then style them how you want them to look using CSS.)

But this is really bad. In terms of what its function is, it isn’t a heading followed by a list – it is a large line of text followed by some smaller lines of text. And that’s how it will be seen by browsers parsing the code, by search engines (such as Google) looking to pull up content in search engine results and by screen readers (used by blind people to read the Web.) Plus it is larger in terms of file size, harder to style, and more time consuming to make changes to later on.

Ease of maintenance and flexibility

When you separate your structure (HTML) from your presentation (CSS) and behaviour (JavaScript) and use good semantics, you will make your code a lot easier to make changes to in the future. Writing clean HTML to mark up your content and using human-readable class names means that it is a lot easier to find the parts you want to alter later on (it is hard to style just the lists in your page when you have used <font> elements to mark up all your content – how do you point your CSS to just the lists?), and having your JavaScript and CSS nicely laid out with descriptive comments added means you will find it a lot easier to understand how it all works if you come back to a site after not touching it for six months (or if someone else has to maintain your code in the future).

Standards also mean a lot more flexibility. For example, if you are administrating a book review site, and you are using <font> elements to specify the colour of all the quotes on your pages, and you wanted to then change the colour of all those quotes, you’d need to painstakingly pick through every page of your site and change all those instances. That wouldn’t be too bad for 5 pages of reviews, but what about when your site gains popularity and you have 50 reviews, or 500 … or 5,000? If you instead structured all your quotes correctly using <blockquote> or <q> elements and controlled all the styling from an external CSS file using a simple rule along the lines of blockquote { color:red; }, all you’d need to do is change that style in one place, in one file, and it will alter all of the instances, on all pages.

Here’s another example – a lot of sites still use HTML tables to lay out pages into various numbers of columns, or rows. If you for example had a two-column layout consisting of a main content column and a navigation menu column (you’ll see loads of these on the Web), laid out using two table cells, and you wanted to change the position of the navigation menu from the right of the screen to the left, you’d need to mess about changing the position of the content in the HTML. If you were creating the same layout, but using CSS to float the columns beside one another, all you would need to do to make the change is reverse the float values in the CSS – a much simpler change.

Accessibility and cross-browser compatibility

In general, using standards and best practices makes it easier for people with disabilities to access your content – let’s look at a few examples:

  • Marking up content properly using proper semantics – heading structures and paragraphs – make it far easier to navigate your content quickly when using a screen reader to read content out (blind people use these a lot.)
  • Some people suffering from mobility impairments cannot use their hands very well, or at all, so have problems using a mouse. They therefore need to use the keyboard to navigate web pages, using the tab key to move between links or form elements, or access keys, or features such as Opera’s spatial navigation.
  • People who cannot see obviously will not be able to access words inside images, so just don’t do this! If you do wish to use images to convey useful information (eg pie charts or graphs), make sure the image has meaningful alternatives available via the alt or longdesc attributes.

Disabled people represent a significant web audience, and it is wrong to ignore them – how would you feel about being denied access to the web because of the language you speak, or because of the colour of your hair? I know this last example is a bit trivial, but it still serves to illustrate the point. As well as being the right thing to do, it also provides businesses with access to an extra market that they could not reach before. Check out Accessible design makes money for some more details about accessibility business benefits.

IT’S ALSO THE LAW. Well, it’s a bit more complicated than that, but many countries now have acts/motions passed into their law to prohibit web sites that offer a service to the general public (or members/employees, etc.) from being inaccessible to people with disabilities. It is discrimination, pure and simple. And there have been a few high-profile lawsuits against companies and other entities because of inaccessible web sites. If the “get more users” carrot doesn’t make the business donkey run faster (I paid Bruce Lawson a fiver for this metaphor), then the “avoid getting your ass sued off” carrot will…

See Olympic failure for some details about the Sydney Olympics accessibility legal case, and Update on the Target accessibility lawsuit for some details about the lawsuit against American store chain target for having an inaccessible web site.

And accessibility doesn’t end with disabled people using the web. It also describes people using many different desktop browsers to browse the Web, and alternative devices such as mobile phones, televisions and games consoles. These browsers all expect web standards, and if the code they are given is nice web standards code, then they have a higher chance of rendering your code consistently and correctly (some browsers still have bugs and other quirks which may cause problems). If you don’t bother to use good valid code, browsers have to kind of guess what you intended and fill in the blanks, and because they don’t generally guess correctly or do it consistently, you will get errors and unexpected behaviour.

In some parts of the world, more people use mobile phones to access the Web than desktop computers, because of cost or lifestyle choices. Using web standards means that your web sites are more likely to work on these different devices. This is not only because of pure standards support, but also because good use of standards, image optimisation, etc. can mean less processing required and smaller downloads, which means a better user experience, and less cost for those paying for downloads by the kilobyte, which is still common in some places.

Ease of debugging

If you don’t follow best practices, and don’t write good code (eg don’t close and nest HTML elements properly), you are making web browsers work harder to render your sites. This is because when a browser comes across broken code, it attempts to second guess what you were intending, and fills in the gaps for you. But browsers don’t do this consistently, and you will get unexpected behavior when trying to traverse the DOM, leading to further problems with your site (“traversing the DOM” is done when elements are selected, for example when a CSS style is applied to an element). Following the HTML standard properly (applying a doctype to your HTML pages, and then validating your HTML against the rules defined in the doctype using the W3C validator) means your code will work more consistently across browsers; validation is a powerful debugging tool.

Search engine rankings

Using standards and semantics effectively makes your pages more likely to appear higher in search results from search engines such as Google, Yahoo!, etc. This is because these engines rank the importance of search terms by their appearence in heading elements, meta elements, and the frequency by which they appear. If your page is seen as being a more relevant resource concerning these search terms, then it will appear higher in search rankings; if you use no heading elements, then your “titles” will not be seen as important by search engines. Thinking carefully about what terms use on your pages will logically make your pages appear higher in more relevant searches!

A few of your are probably wondering why browsers still support outdated features such as <font> elements when they are generally considered bad practice? Well, a lot of people are still using these outdated methods, and a lot of web sites still feature them. To stop supporting them now would break a lot of existing web sites! All we can do is start doing it right from now on, in the hope of seeing these outdated methods phase out gradually.

Chris Mills

A Proper Web Standards Education: Part 2

He is a self-confessed web geek and English language geek, having worked in various geek education roles for the last 8 or 9 years. Outside of work, Chris is a heavy metal warrior, playing really fast drums for many bands, including the mighty Conquest of Steel. He lives in grimy Oldham with his lovely girlfriend Kirsty, son Gabriel, baby daughter Elva, and 3 Macs. Feel free to contact him about Opera, or anything else mentioned in this article at the following e-mail address: cmills [at] opera [dot] com.

Chris Mills works for Opera (the Viking web browser vendor), splitting his time between evangelising Opera's software and web standards, and heading up Opera's developer education activities. This last part includes speaking at conferences, publishing regular web design and development articles on dev.opera.com, and being the creator of the Opera Web Standards Curriculum.