Semantics

I have sinned. I confess. I’ve had the div-itis.
But now I’m cured (I hope)!

What is semantics about then? Basically, it’s about using the correct elements for the corresponding purpose.
This means using H1 to H6 elements for headings, P elements for paragraphs of text, UL/OL combined with LI elements for all kinds of lists and so on.
What you should not do is using DIV or SPAN elements for it all and then just style it up in your CSS file.

For example, this is not semantically correct:

<div class="heading">Title</div>
<div class="text-paragraph">
	Some text in <span class="bold">a paragraph</span>...
</div>
<div class="list-container">
	<div class="list-item">Item one</div>
	<div class="list-item">Item two</div>
	<div class="list-item">Item three</div>
</div>

As opposed to this, that is semantically correct:

<h1>Title</h1>
<p>
	Some text in <strong>a paragraph</strong>...
</p>
<ul>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ul>

Some normal objections are a) “What’s the gain” and b) “But H1 elements don’t look good/have different margins in different web browsers”.
The answers:

a) The code will be easier to read when you can instantly see what the purpose of each element is. Another important factor is that for web browsers that don’t support CSS, it will still be readable, for instance, in PDAs, cell phones etc.

This leads to the point of being able to say that the web site will work in any web browser, instead of saying that the users have to have IE 5.0+, Firefox and so on.
Of course, this point only applies when the web site doesn’t require that kind of support for scripting and similar. Generally, what it’s all about is a question of accessibility. It should be possible to read and see the contents of web site, even if one’s web browser doesn’t support CSS.

b) That doesn’t matter at all. I’m not preaching that you have to/should use the default look of those elements. The display and layout of elements should be taken care of in CSS, not in HTML (at all). The HTML should only be about structure and data. A brilliant example of this is the css Zen Garden, where all the different designs use the same HTML file, and only apply different CSS to it.

Of course, no one can explain it as good as Molly.
Another good piece is Semantics, HTML, XHTML, and Structure by Shirley.

PS. I promise not to disclose any information about my visitors. But I just have to tell you this one thing: there is life out there! My blog has had a visitor from NASA. They put people on the moon, I write about developing web sites… Same, same. 😉 DS.

Posted in Developing |

Leave a Reply

Your email address will not be published. Required fields are marked *