HTML elements semantics

2007-10-11

A small guide on how to use some html tags that are poorly understood and many times misused

I see that these days many websites misuse some of the html tags. Of course, you can use the tags however you please, but sometimes they are used beyond their purpose.

What is wrong with this picture if by using css you can make your page look like you planned ?. The bad part is accessibility. Some limited browsers (console mode browser,phone browsers, etc) or search engines or some other xml reading application, or even people with disabilities (who can use custom css to display your page) can display your page in a different way than was intended. This can hurt your audience and even your search engine ranking.

So the solution is to make sure you use the proper tags when coding, here is a list of some html tag usage

DIV, this is the "building tag" of your page, view it as a container that holds other tags, use it only to separate big sections of your site and to represent a "block" (section). Don't use it for example to display a list of items by applying float
UL and OL there is sometimes a mix of these two, UL represents unordered list this means it's elements don't have a relation with each other.OL (ordered list) on the other hand it is exactly the opposite. It states that it's elements have a relation between them, they are order by a hierarchy or relationship. So, first determine if your list's elements have a relationship between them (your list represents some ranking or top) or not and choose the appropriate list type.
Use paragraphs to delimit text sections, don't use them to your page layout, paragraphs are for text
Don't use <br> because you add extra tags to your page without any gain, use paragraphs, and set margins from CSS
Use tables for tabular data, don't use them to create your page layout
Don't use divs, spans, etc to display tabular data, use tables, this is "table" purpose