There has been a major movement in the adoption of web standards over the past 5 years: semantic coding. I had it explained to me many times when I was in college, but it seemed a bit tiresome and boring at the time and nobody was really enforcing it, not in the workplace and not in school. Now, many years later, the topic has resurfaced again due to new search engine guidelines. It also just makes plain sense.

Semantic Code Examples

1. <h1> tags are for headings and not just for ginormous text. They represent an important element on the page. It’s heads up for what’s coming next in the copy – <h1>Semantic Coding<h1>

2. <ul> tag is actually for an unordered list. Use this to describe what kind of list you are about to write.

3. The <li> tag should be used for your lists. You can always style out the bullet image, but use this correctly. I have seen the lines of copy simply broken by hundreds of <br /> tags which should only be used when all else fails for a list.

4. Finally, <FONT> tags are like so yesterday – especially capitalized. Don’t use them.

Semantic markup is not only meaningful to developers, but also to the internet world at large. HTML is defines the presentation of data whereas HTML written semantically suggests what the data is actually about.. Google, Yahoo, Live and others will look at your headlines and think, “oh yeah, that is a true h1 headline…it is important”. Speech browsers will see that something is wrapped in an em tag and will dutifully emphasize it.

Other Uses

• As you can see from the example above, semantic code is shorter and downloads faster.
• Semantic code makes site updates easier because you can apply design styles to headings across an entire site instead of on a per page basis.
• Semantic code is easier for people to understand so if a new web designer picks up the code they can learn it much faster.
• Because semantic code does not contain inline css styles it is possible to change the look and feel of your site without recoding all of the HTML.
• Once again, because design is held separately from your content, semantic code allows anybody to add or edit pages without having to have a good eye for design. You simply describe the content and the cascading style sheet defines what that content looks like.