HTML Tip: Think semantics

As said in Best Practices for Building Web Applications, one of the things to have in mind when developing Web Applications (or any simple HTML website) is to Think on Semantics. Let's see how this can boost our websites and raise them to the top.

Think on Semantics

HTML is for content and semantics, so, when a browser sends an HTML request, it expects to receive content. The browser does not know what information to display, so you must educate it. HTML has tags for everything needed to learn and speak the "browser language": <p> for paragraphs, <a> for links, <ol> and <ul> for lists, <span> and <div> for custom blocks, and so on... So, semantics is to make the tags meaning to match the content inside them.

Better seeing it with an example:

<div>
  <a>One Link</a><br/>
  <a>Another Link</a><br/>
  <a>One More Link</a><br/>
</div>

Has no semantics on it because a <div> is quite generic. This can be upgraded into semantical form as a link list with the following markup:

<ul>
  <li><a>One Link</a></li>
  <li><a>Another Link</a></li>
  <li><a>One More Link</a></li>
</ul>

Not too different from the previous one, is it? Well, not for the browser, of course.

Advantages

1. The browser knows how to display an unordered list. You don't have to put those ugly <br> nor special classes and CSS to have a list rendered as it's expected.
2. Best accesibility. Imagine a special browser that allows sight-impaired people to hear the text inside the <li>'s one at a time, or to skip the entire list. For this app, the former is only a bunch of text with links on it.
3. No bloat. As you don't need those little <br/> buddies, no code bloat is added to your HTML and it remains as it should be. Only content and related tags.
4. Nice to Bots. This may seem rather stupid, but when a bot enters your site, it only sees pure HTML. You want Google Bot to be able to read and understand your text, doesn't you?