Markup that you define should be self-explanatory. In fact, markup is self explanatory, use it such a manner that you don’t confuse its meaning. A simple example: The <h1> tag denotes a heading of level 1. In most sites, this tag is the name of the site, or in cases where the site has an image header, it’s the prominent byline. At least, it should be. Substituting <div id=”title”>Content</div> for <h1> is perfectly valid markup, but it is semantically much worse off because, the tag <h1>, by its definition stands for a heading. <div> tags, when used are ambigous, and a browser which is not CSS-enabled might not render it to satisfaction. Since the purpose of going to the extent of validating our pages is to make markup accessible to everyone, the latter practice defeats our purpose. Some rules to abide by: Navigation links are lists of links, so use the semantically rich tags <ul> and <li> to wrap your links, don’t use spans or divs (and for your viewer’s sake, don’t use tables.)

There is a distinction between using markup for a purpose, and using markup for stylistic gains. Since the holy grail of web developers (the complete separation of content, markup and presentation) is not at hand yet, it is left to the intelligent web developer to decide where to draw the line. For an example, on this site, the sidebar employs <h3> and <li> to separate links, but those elements have CSS inline rules binded to them. This means that they render quite differently than a normal heading of level 3, or a list element. Arguably, this could cause confusion among the users since this site behaves a little differently than they are used to for such elements. But I think it is a fair tradeoff. People who do have capable CSS-enabled browsers rarely need to delve into the code, but people who don’t have get a neat unordered list. I have my style specifications, my poorer viewers have their content. Everyone is happy.

The moral of the story? Semantic means something which has a meaning. Always assign tags to elements so that the tags tend to describe the properties that you want to relate to that element, and try to avoid generic tags like <div> or <span> wherever possible.