Semantic Code: The Concept and Practices

What the Heck is Semantic Code?

“Semantic Code” – sounds familiar right? The buzz word among web development community. Even if you are not related to web development; I know so many SEO experts who are aware of optimized HTML coding structure. Semantic Code is nothing new. It’s the same old concept of writing good codes and concentrate on content structure. Making the content structured not only with css style but also within codes itself.

In an Example We can easily make a sentence Bold, Big and with different color using css, so that it looks like a Header within a placeholder. So a possible coding style can be like this:

<div class=”head”>
  This is a header of this section!
</div>

This is absolutely a bad practice. Lets say if you have 2 more sub headers, what might be the worst scenario?

<div class=”head”>
    This is a Main Header
<div class=”subhead”>
    This is the subheader
    <p>A paragraph</p>
</div>
<div class=”subhead”>
This is another subheader
<p>Another paragraph</p>
</div>
</div>

I have seen codes written like this too. What’s wrong with this coding style? Sure it will work if you are fine with CSS and give them a good look. All you need is to get the class of each container and give necessary styling elements, browser will be happy to show the website as you want to! But is that should be the way of doing this?

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.

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?