Recently I have been thinking a lot about what “good” HTML (and/or XHTML) actually is. I have been surprised by noticing that a lot of people seems to be thinking that their HTML is good as long as they’ve passed the Markup Validation Service at W3C. Sometimes they also add “and if my site renders well in all browsers”.
I think that kind of statement is wrong!

Why is validation not enough?

If your website passes the validation check it means that the code you’ve written is valid. It does NOT mean that:

  • - your website is accessible
  • - your website renders well on all devices and browsers
  • - your website is optimized
  • - it doesn’t even mean that your code is well written (No it doesn’t!)

So let’s sort this out by asking what HTML actually is.
According to Wikipedia HTML “provides a means to describe the structure of text-based information in a document” I think that describes it pretty well.

Let’s take a look at the following code:

<div id="h-123">
<span class="span-b">
<span class="big-first-letter">M</span>y header
</span>
</div>

The code above is perfectly valid according to W3C’s Validation Service. But let’s be honest. Do you think this is good descriptive markup? Do you think this markup would be considered semantic? Is it optimized?

Instead consider this code:

<h1>My header</h1>

Much shorter and much much better.

So I think you get my point. But if validation isn’t enough how do you write good HTML? I don’t know any good application today that can actually give you a good answer to if your HTML is good or not. If you do please feel free to post a comment below.

A few tips to help you write that “good” HTML

So I’m not gonna give you a perfect easy-to-follow answer. But I’m going to give a few tips which help me when I write HTML.

  • – Think about what you are describing and not what it should look like. A header should not be a h1 just beacuse you want it to look big. In short: HTML is not about appearance!
  • – Write (ALL) your structure (i.e. HTML) before trying to achieve whatever design you have in mind. If you do that you will not add the wrong stuff to your code like unecessary classes (known as classitis) and it’ll also give you a good protection against divitis.
  • - If you tend to forget about the existence of certain elements have the HTML 4.01 / XHTML 1.0 Reference open while writing.
  • - Use attributes the right way. Like alt and title which people tend to mix up. (Alt is the caption and title is the description.) A list of attributes can be found here.
  • - If you know you have a problem and tend to use to many tags. Try to think less is more. Keep it clean! (And take another look at the header-example above.)
  • - After adding some style to your website go through the guidelines. Yea, I’ll admit it. I don’t do this myself that much. But every once in a while try to force yourself to at least skim through the guidelines. And if you like to say that you build truly accessible websites I consider knowing these rules to be a must.
  • - And as a last step. Validate.

Finally remember that if your HTML truly is “good” there will be no problem for nobody when it comes to interpret your code. That goes for both screenreaders and search engine spiders.

/Ida