Semantically incorrect

If you are creating (X)HTML code, you always have to make sure that you use the right elements to specify the meaning of certain parts of the text. After that you can use stylesheets to determine how these parts will look. This is what they call the semantics of the text.

A lot of web designers abuse tags to accomplish a certain look. If they want a bigger text, they use the <h2> element, while the text is not a header at all, if they want to indent a text, they use <blockquote>, even though they are not quoting. I won’t go into detail why this is a bad thing, there are plenty of resources explaining this better than I could. But a lot of designers like me who try to do it correctly still make some mistakes. Today I realised that my pages have two semantically errors:

For my navigation lists, I use—as many other sites—unordered lists ( <ul><li>XXX</li></ul>). But my navigation links do have an order! My archive links are ordered chronological, so the correct thing would be to use the ordered list (<ol><li>XXX</li></ol>) instead.

By default, an ordered list is shown with numbers in front of each item, but it is very easy to remove them, just as I removed the bullets from my unordered navigation lists. I have seen many sites doing this wrong, and most examples of you will find on internet also use unordered lists.

Another thing I thought about today is that when I display trackbacks (comments on another site about my text) I am quoting another site. Therefore, I should be using the <blockquote> element (or <q>). I have looked around at other sites, but nowhere have I found trackbacks marked up as quotes.

You might think that these are minor issues, but since I am rewriting my templates anyway, I better do it right, not?

Jeroen Sangers @jeroensangers