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 (
). 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?

8 thoughts on “Semantically incorrect”

  1. Well, I actually looked it up in the specification and there it says to use ol when order is emphasized. So I understand you can use ul as long as order is not that important.

  2. One disadvantage of using <ol> instead of <ul> is that users visiting with non-css-enabled browsers or mobile devices see meaningless 1,2,3,etc. numbers in front of every list item; which looks kinda weird (or maybe it doesn’t?).

  3. Oops forgot about the tags. How stupid can I be, my own blog does the same. I meant:
    Lists that are … ordered should be marked up as <ol>.
    And unordered list-items are not <p>s.

  4. You make a good point here! Lists that are chronologically, alphabetically or otherwise ordered should indeed be marked up as . I should start doing the same.
    But I think you go too far saying that truly unordered lists have items that are unrelated and thus can be replaced with . First of all list-items are not paragraphs. And not having an order does not mean they are unrelated.

  5. I rarely see lists that are truely unordered. Archive lists are ordered chronologically, menu tabs have some kind of logical order (home first), even random thoughts are usually ordered chronologically. That is the reason for my statement that <ol> should be used by default. Truely unordered lists are very rare.

  6. Well, I think that your original example of the list of archive links is a good case for a ordered-list. For a lot of other link lists, it could probably be argued either way, and would really be up to the site author whether he or she thought that a particular list should be ordered or unordered…
    It’s definitely something to think about, though!
    I think I might post some more thoughts about this on my own blog later, if I have time.

  7. Even though something has become a defacto standard doesn�t mean it is the right thing to do (remember tables for layout?). Just because many sites use <ul>, doen’t mean that this is the right tag to use. In most menu’s the first item is ‘home’, isn�t it? So in fact menu’s are ordered lists, then why would you want to code it as something else? I admit that the difference between the two list types is very thin, mostly because there is no software I know of that re-orders list items (and probably will never be used by the big public due to legacy problems), but since both elements can be presented in exactly the same way, I’d rather use the right one. I see no reason to use <ul>.
    Semantically, a list contains data that should be ordered to be understood correctly. This is what <ol> is for. You could even argue that an unordered list is nothing more than a sequence of blocks, since the list items have no relation to each other. If look at it this way, unordered lists can easily be replaced by the ‘normal’ <p>, since that is how they are used at the moment.

  8. It’s been noted in a few places that it’s really become more-or-less a defacto standard that ‘ul’ is really just an ordered list with bullets instead of numbers. There’s never been an HTML renderer that I know of that will actually re-order the list items. So, in practice, it seems to be an ordered list 🙂
    On the subject of trackbacks, the excerpt probably should be a ‘blockquote’ or ‘q’. But shouldn’t the source (author/site) information also be marked up with ‘cite’? We do that in WordPress.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.