Why you should start using HTML5 on your Site?

by • On Jan 26, 13 0:15am • 3841 Views

Whether you are a Blogger or simply a passionate web designer, you must have heard about HTML5 by now. This is latest revision of the popular HTML (Hyper Text Markup Language) standard proposed by World Wide Web Consortium popularly known as W3C. Regardless all the rumors out there regarding the implementation of HTML5, many well-known browsers started supporting HTML5 technologies and newly added elements.

Microsoft has started supporting HTML5 technologies with their Internet Explorer 9 web browser. On the other hand Google’s popular Chrome and Mozilla’s Firefox web browser also supports this new markup language. Apple’s Safari or even Opera also supports HTML5 elements.
HTML5 Elements BrowserOn HTML5 the new DOCTYPE declaration is also being implemented which is lot easier to remember. Older standards like HTML 4.01 and XHTML 1.0 used rather complicated DOCTYPE type. Let’s take a look at the DOCTYPE code in various HTML standards.
HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5

<!DOCTYPE html>

Now, what do you think about the HTML5 DOCTYPE tag? Well, that’s not all. On HTML5, we also got quite a few new tags like <header> <article> <aside> <audio> <canvas> <video> etc. You can find whole bunch of new tags which has been introduced in HTML5 from W3School’s HTML5 tag list page and the possible usage of them. Even though some these tags doesn’t render any visible elements on web page but it gives web browser and search engines whole bunch of information that they can use to identify elements within a page. Let me give you an example.

If you are to design a two column based web site, the simple code could be something like the snippet given below. Yes ofcourse you can add CSS codes to design anyway you want but this is pretty much the layout that you may have in your mind.

<!DOCTYPE html>
<html>
<head>
   <title>Title of Your Site</title>
</head>
<body>
   <div id="header">
     <h1>Site header</h1>
   </div>

   <div id="content">
     <h2>Title of the Article</h2>
     <p>Your content.</p>
   </div>

   <div id="sidebar">
     Your Sidebar Content
   </div>

   <div id="footer">
     Footer Content
   </div>

</body>
</html>

But let me tell you something. Neither the web browser or the search engine understands which is your page’s “header” section or which one is “sidebar”. Even though we are using unique “IDs” to identify those “DIV” elements but web browser or search engine has got no clue that those are actually our sidebar or header section. All it understands is that an “ID” has been assigned to “DIV” items to style them using CSS codes. This is exactly where HTML5 differs from traditional HTML codes. Let’s take a look at the HTML5 version of the same layout design.

<!DOCTYPE html>
<html>
<head>
   <title>Title of Your Site</title>
</head>
<body>
   <header>
   <div id="header">
     <h1>Site header</h1>
   </div>
   </header>

   <section>
   <div id="content">
     <article>
      <header>
        <h2>Title of the Article</h2>
      </header>
        <p>Your content.</p>
     </article>
   </div>
   </section>

   <aside>
   <div id="sidebar">
     Your Sidebar Content
   </div>
   </aside>

   <footer>
   <div id="footer">
     Footer Content
   </div>
   </footer>

</body>
</html>

As you can see from the snippet code above, we added extra few tags like <header> <section> <aside> and <footer> tag which are HTML5 tag and it explicitly reveals the various portion of our design. The browser won’t render any visual appearance of those tags but search engines would definitely understand the various element that we are using on our design.

Now the question is, Does HTML5 semantic tags really has any effect on Google search result? There are huge debate on this issue. Back in 2010 Google’s employee John Mueller wrote on a thread that,

While this will not result in an advantage for your content in our search results, it generally wouldn’t be disadvantageous either.

Now in 2013, things has changed quite a lot and over the last three years HTML5 has gained huge popularity. In fact, Google also started using HTML5 on their very own pages including Google Search and YouTube. So, without any doubt you can be sure that at some point these semantic tag would matter. It is not a question of whether they would use it or not rather when they will use it.

HTML5 Microdata
If not the best then probably one of the best features of HTML5 is the addition of Microdata markup. This feature allows users to add few attributes on the content which helps search engines or web crawlers to gather more information about the content that it is about to be indexed. Itemscope, itemtype and itemprop are the newly introduced markups that provide valuable Microdata regarding the page itself. You can use these markups within <head></head> or <body></body> tag. Which one to use? It is entirely up to you because either way is ok.

However, if you want to use within <head> tag you should specify the type of your content within the DOCTYPE tag. Let’s take a look at the example given below for a blog post.

<!DOCTYPE html itemscope itemtype="http://schema.org/BlogPosting">
<html>
<head>
<meta itemprop="author" content="Name of the Author">
<meta itemprop="name" content="Title of your Post">
<meta itemprop="description" content="Description of your post">
<meta itemprop="image" content="http://www.yourblog.com/post/image.jpg">
<meta itemprop="datePublished" content="YYYY-MM-DD">
</head>

But if you want to use the same markups within the <body> tag, you can follow the following format.

<body>
<article itemscope itemtype="http://schema.org/BlogPosting">
   <h2 itemprop="name">Title of your Post</h2>
     <span itemprop="author">Name of the Author</span>
     <span itemprop="datePublished" content="YYYY-MM-DD">
     <img itemprop="image" src="http://www.yourblog.com/post/image.jpg">
     <div itemprop="description">Description of your post</div>
</article>
</body>

No matter how you do it, it should be ok and of course you can always use the Google’s Rich Snippet testing tool to check your pages once you are done with adding them. This tool should be able to extract all the micro data from your page regardless.

A full list of supported data type format can be found from the Schema.org site. Take a look at the site and use the data type that fits your need.

Search giant Google itself also recommends users to apply Microdata markups on their sites pages. Let’s take a look at the video.

Bottom line
Now, these are just some of the benefits that you can get by simply converting your pages from HTML or XHTML to HTML5 and simply applying Microdata markups. There are lot more features of HTML5 that we can talk about. Like simple <video> <canvas> <nav> tags etc. and the list goes on an on. These features are not only eye opening for bloggers or web designers rather it is a comprehensive way to organize data on a web page and making the web search experience more pleasing and informative.

Still there are debates and confusions over many HTML5 related issues out there but it is the beginning of new web era and “must know” topic for every single blogger of today and tomorrow. We just need to wait and see how it changes and evolves as the time passes by.

You can follow us on Twitter, add on your Google+ circle or Like our Facebook page to get the latest news, updates and reviews.

advertisement

Comments