Benefits of semantic HTML

Semantic HTML is not just the latest fad on the web nor another way to show that your web site and your coding style is trendy. On the contrary, semantic HTML is the only way to get consistent results across web sites and environments. As web developers, we're all accustomed to run several projects simultaneously. The point is that without a consistent, semantic way of naming and using our HTML elements, we'll always end up with having several web sites that feature inconsistent and incompatible element nomenclatures. What does this mean? Simply put, we can't globally change our site styles across our web sites, not to say that it's hard to remember the structure of each site we're working on. Let's see some examples.

For example, we can use the same element nomenclature on the header section:

<div id="branding">
 <h1>Site Name</h1>
 <p id="tagline">...</p>
</div>

If we use this structure (or a similar one) on all our projects, we're actually sure that we're dealing with the same element sequence so that switching to another site or project is relatively simple.

Another example is the following:

<div id="site-info">
  <!--Copyright notice-->
  <address>Your web agency info</address>
</div>

The address element is used to mark up the relevant information about the author of the page, so it's simply perfect to insert the relevant information (web site, contact link etc.) about you (the web developer) or your web agency.

In a nutshell, semantic HTML allows you to get cross-site consistency and increase the efficiency of your daily work.

Leave a Reply

Note: Only a member of this blog may post a comment.