Lets have a look at the following coding style

<div class=”content” role=”main”>

<h1>This is the Title</h1>

<h2>This is the first Header</h2>

<p>A paragraph</p>

<h2>Another Sub Heading</h2>

<p>This is another Paragraph</p>

</div>

Why Semantic?

Less codes, well formatted and most important of all meaningful markup. Your Browsers will render your site properly, also Search Engines will get the idea of which to mark as important content! There are lot’s of other area we can cover on it’s benefits and trade offs. Lets go through them step by step.

Better loading time

Clean coding structure helps browsers to load your site faster. Just image if you can somehow reduce the DOM elements for your HTML it means you are reducing the size of codes too! Let’s take a note from Yahoo Developer Network on Semantic Code..

“ Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there’s a better and more semantically correct way to do your markup”

Yahoo Developers Network
We can see the benefits of well coded HTML right from IamWD blog. Though we have changed the old layout and adopted a responsive UI; we are calling more request than before on .js and .css files. I can remember it took near about 6 seconds to load the whole website before. But it came down to 1.45 sec(avg) with our semantic coding approach. You can get an idea on performance result for semantic coding style held by Dyn.

More Accessible:

Giving your HTML appropriate markups increases accessibility. If you can manage to generalize the process you will find out the site is rendering well on any browsers. When you try to make layout on a certain web page; <div> or <span> is our friend. Sure we have to use it to give a structural view. Does it have any meaning? But if we use <header> for the heading of the page, <aside> for sidebar container, <footer> for footer section of the web page, <nav> for navigation and relatively p for paragraph, h1-h6 for titles and sub titles; then it looks more understanding.

We tried to run an experiment with IamWD website on WAVE, to see how the website is performing in terms of accessibility. After the test we get the result as expected. The website is well outlined in h1 and h2 tags. Hense, it has few unsolved issues. You will see down on the bottom of the screenshot below; it has outlined sidebar headers. Someone can argue (Even I will be arguing) that sidebars can be given less priority comparing to the main contents. In that such case sidebar can be nested within a main parent tags followed by sub tags as separate instances. Then we could easily define another h2 tag and define all the sidebar sections starting with h3. When we will be doing prototyping of the website these macro level decisions becoming more concentrated. While you are doing structural design process or laying out the website; we must ensure what will be the outlining of a web page?

Semantic code always gives an extra benefits to screen readers. Semantic coded website are well accessible and gives structured view on text-only browsers without any problem. Even our ancient mobiles can access that!

SEO Friendly:

The way semantic markup is used throughout a site, including h1, h2, and h3 tags, helps us to understand the priorities of a site’s content. Which tags are relatively more important for Search Engines? h1-h6,Anchor Texts,<strong>,<p> are the general HTML tags we always use. How about new HTML5 tags? They sounds more understandable, aren’t they? We know which placeholder is holding what. Like I said before using right tags in right place help search engine robots to understand the importance of a site contents. Apart from keyword analysis; content structure is the most influential for search engine ranking.

Microformats, Resource Description Framework – in – atributes (FDFa)  or Microformats were proposed in different events on past and still it’s a growing practices. Google are using all three forms of structured metadata to find the semantic content within webpages mentioned above.

Let’s have a look how Google is using meta tags to get semantic values within a page? rel=”canonical”  – acts as a hint for duplicate contents. rel=”next” or rel=”prev” to indicate relation between paginated links. rel=”author” – Authorship of you website. Your social profile will be shown along with your site search result.

By using schema attributes along with properties within your site layout you are telling your search engine the specific type of your content. It is not only valid for SEO. Many smart devices now supports these tag to render the site device compatible.

More information on Semantic Code practices

Here are few resources where you will get more detailed information on Semantic Code. Microformatique – a blog on microformats. Please also do follow Part1 and Part2 on that page. Specification on HTML microdata mechanism can be found on W3C. Dont forget to follow Google Webmaster CEntral Blog. They keep posting about any new attribute changes for their SE mechanism. I will be writing more about the schema and microformat uses in upcoming post. Till then let me know how you are taking semantic approaches? What types of conflicts or suggestion you are finding out? I will be waiting for your comments. If you like this post then dont forget to bookmark this page on social media. We also have a new Facebook fan page. Hope we will see you there.