Right now, A List Apart is asking its readers what they love or hate about the web. I just sent off mine, but I thought I'd put it here so it doesn't go to waste if they don't include it in their next issue:

What do I love about the web? Anybody can have a voice. It just takes one person with something to say to make a huge difference. The whole world is having a discussion at a round table. Everybody is an expert. Education, social status, location, race, gender, etcetera are completely irrelevant. All that matters are thoughts and ideas.

Not merely an ideological utopian vision, we are already living this reality. Blogs are not simply a new trend in marketing and journalism, but the beginning of a fundamental shift in the way the world interacts. We, the people, run the world. We are growing less reliant on government and big business to get things done and are doing things ourselves. Together, we can do anything, and nobody can stop us.

If you want to submit yours, they say:

Update: Indeed, mine was included. I even got to have little AJAX and DOM sweethearts beside mine :)

Why do web standards matter? It's easy to say that web developers who ignore standards are unprofessional, but it's not so easy to explain why.

(If you haven't yet, read my last post to see what I mean by 'web standards'.)

Web standards are fun, cool, exciting. Right? This might be reason enough to use them on your own web sites, but you won't be able to convince your clients to use them just because they're cool (that is, unless your clients really wants to impress their web developer friends).

What do your clients care about? Visitors, of course. The people actually using the web site. If they don't notice a difference, what's the point, really? Sure, your visitors might judge your web site with the W3C Validator, but face it, only other web developers are ever going to view source. On this web site, my visitors ARE web developers. But what about the 300 billion other web sites?

Now, hold on a sec, I didn't just say we should go back to designing with nested tables and invisible GIFs! I'm just saying we need to focus on the goal here: benefiting our visitors. So how do web standards benefit our visitors?

1. Faster web pages.

   The site will download faster because the HTML will be smaller. If there is a single external CSS file for the entire web site, visitors can download it once and cache it, making the whole site download faster. Also, browsers can draw borders and background colours using CSS a lot faster than downloading border and background images.

2. Usable by more visitors.

   If you've separated design from content, users without CSS can still get the content and use the website. If you've separated the site's behaviour from the content, users without JavaScript will still be able to use the site without a problem. If you addressed accessibility, you allow visitors with disabilities to access the site. The last thing we want to do is turn visitors away just because of how they choose to surf the web.

3. Search Engine Optimization.

   How can people benefit from your web site if they can't even find it? (That is, unless your web site doesn't benefit them at all, in which case web standards aren't going to make any difference.) The search engines don't award points for design. All the extra tags and attributes will just distract away from the content. Using text instead of images and using semantic HTML (especially h1 tags) lets the search engines better index the content and interpret the structure, and this will help the page rank higher in search results.

These should be reasons enough to stick with web standards when creating web sites, and certainly enough to convince sceptical clients that web standards are the best choice. Next, I'll list some ways using web standards benefit web designers and developers.

Update: When I say 'web standards', I really mean 'Best Practices'. Read more here.

I'd like to talk about web standards in the future, but I realised I need to first define what it is I'm talking about. So, this is what I mean by using 'web standards':

1. Make sure your HTML and CSS validate.

   The point is simple: if you're using a standard format, use it correctly. However, just because your page is valid doesn't mean it's perfect. For this, the W3C's HTML Validator and CSS Validator are your best friends.

2. Separate the design from the content.

   Use CSS to describe how things should look (fonts, colours, widths and heights, borders, etc.) Also, take as many images as you can out of the HTML. Don't use images to display text. Ideally, put all the CSS in an external file, but it's up to you how you organise your code. Just be aware of the tradeoffs.

3. Separate behaviour from the content.

   Don't use event attributes (onLoad, onMouseOver, etc.) Ideally, put the JavaScript in an external file. Like with CSS, this isn't so important and is up to you. However, it is important that your web site works without JavaScript, if possible. Again, just do your best.

4. Use HTML the way it was intended.

   By this I'm talking about using HTML semantically. Don't use tables unless you're showing spreadsheet data. Use h1-h6 tags for the headers on your page. Use blockquote only when you're quoting, not for the indentation. Just try to use the full range of HTML tags when appropriate. Sometimes you simply need to use divs and spans, but avoid catching Divitis.

5. Make your site accessible.

   Accessibility is a very important standard, in some places it's actually the law. If you've already taken care of the last four points, chances are your site is already very accessible. Grab an accessibility checklist, and take look at your web site through the eyes and ears of all potential visitors. What does the site sound like with a screen reader? What happens when you increase the font size? Are you using any terminology without giving definitions? This is a big topic, but it often gets forgotten.

This is what I mean by 'web standards'. These are all just guidelines, and there are obvious exceptions to every rule. Next, I'll go into the benefits of following these rules.

Update: I've chosen to go with the term 'Best Practices' to describe what I've discussed here, of which 'web standards' are only a subset. Read my discussion here.

Continuing my discussion of microformats, let's take a look at the hCard. The hCard microformat is a way of identifying contact information in HTML. People can use tools to look into the HTML and extract this information as a vCard. vCard is a standard for an electronic business card. There are a number of values you'd expect (name, phone number, organisation, etc.). hCard takes these labels and uses them as class names around data in HTML.

Here are the more common values you can use in hCard (for the complete list, see the wiki:

• fn (family name)
• nickname
• url
• email
• tel (telephone)
• adr (address)
• org (organization)
• etc...

Every hCard starts inside a block that has class="vcard". So, a very simple hCard might look like this:

<div class="vcard">
   <span class="fn">Jesse Skinner</span>
   <a class="url" href="http://www.thefutureoftheweb.com">http://www.thefutureoftheweb.com/</a>
</div>

Some of these types have subproperties. For example, the 'tel' value contains 'type' and 'value'. This way you can specify separate home and business phone numbers. The 'adr' type has a lot of subproperties (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value). An address might look something like this:

<div class="vcard">
   <div class="fn">Jesse Skinner</div>
   <div class="adr">
      <span class="locality">Berlin</span>,
      <span class="country-name">Germany</span>
   </div>
</div>

The class names don't have to mean anything within your page. However, you can always take advantage of them to style your contact information. You could also style them in your browser's User Style Sheet, so that you can find them while you surf the web.

The hCard standard is very flexible. It doesn't matter which tags you put the classes on. It certainly doesn't have to be in nested div tags. You could just mark up your contact information any way you like, and then wrap the data in span tags to tie the data together. For example, it can be within regular text in a paragraph:

<p class="vcard">
  My name is <span class="fn">Jesse Skinner</span>.
  I live in <span class="adr"><span class="locality">Berlin</span>,
  <span class="country-name">Germany</span></span>.
  I work for <span class="org">Strato AG</span>.
  I have a web development blog at
  <a class="url" href="http://www.thefutureoftheweb.com/">http://www.thefutureoftheweb.com/</a>.
</p>

There's lots of tools already, and more on the way. If you don't want to install a browser plugin, or if you want to give all visitors to your site a way to download your hCard as a vCard, X2V is a service that does just this. Just link to:

For example, click here to download a vCard of this simple hCard:

My name is Jesse Skinner. I live in Berlin, Germany. I work for Strato AG. I have a web development blog at http://www.thefutureoftheweb.com/.

hCard, like other microformats, is wonderfully simple yet incredibly powerful. You can begin using it right away with very little work, without waiting for the standard to be widely used. As more people start looking for hCards (and your contact information), your web site will already make things easier for them.

Jonathan Snook just posted a nice example of why you should stick with what's predictable. When designing, there's a lot of temptation to go against the grain, to do something a little different than everybody else does it. Except, it makes your interface less predictable. And predictability is key for user friendliness. Whether it's underlines on hyperlinks, or simple navigation titles, you'll usually end up winning more points for usability than you ever will for creativity.