HTML5 is officially around there since late 2014 and currently using in more than 80% of all websites. Have you ever thought why it is important to use in your website?
The answer is simple, it helps to improve your SEO. HTML5 usage semantic tags which helps search engines to understand your website structure better. So it has more than the canvas element which you may heard before, have used by many developers for development purposes. But here I will discuss how it can be helpful to get a higher ranking in search engine for you if you have a site already or planning to start one. Additionally, if you ever need additional help in your SEO projects you can always hire a freelance SEO developer from Toptal. Toptal is a marketplace for top SEO developers, engineers, programmers, coders, architects, and consultants.
Structural Element or Semantic Tags
Back in the day designers have only div element to create the structure of a HTML page and most of them followed same method to categorize each section of a page. The method was to add class names to divs similar to their features.
<div class=”header”>
<div class=”nav”>
<div class=”footer”>
So people in w3c noticed that and implemented few semantic tags in new HTML5 to help categorize each section of a page better for designers.
The header Element
The header element is used to represent an introductory section of the page or articles. It means you may have one or more header tags in a page. Mostly it can be used to wrap the content of top of the page, such as logo, navigation menu and other header content can be wrapped into this tag. Also you can use it multiple times in a page to define head of any article or self-contained content.
<body>
<header>
<div class=”logo”><img src=”images/logo.png” /></div>
<nav>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</nav>
</header>
……….
</body>
When using this element more than one time in a page for articles head, then you can use it to wrap heading tags <h1>, <h2>, <h3> and meta data regarding the article such as article posting date.
The nav Element
The nav element is used to wrap main navigation menu of a page, not the links in footer or sidebar area.
<nav role=”navigation”> <ul> <li><a href=”index.html”>Home</a></li> <li><a href=”about.html”>About</a></li> <li><a href=”contact.html”>Contact</a></li> </ul> </nav>
Note that here I have used the ARIA role=”navigation” attribute to make it significant to old browsers and programs like screen readers who don’t support the element.
The main Element
The main element should use to wrap the content which is unique to a specific page or document and should not include logo, footer, sidebar or any other content which is repeating itself in other pages of the site.
<main role="main"> <h1>Guitars</h1> <p>The greatest guitars ever built.</p> <article> <h2>Gibson SG</h2> <p>...</p> </article> <article> <h2>Fender Telecaster</h2> <p>...</p> </article> </main>
The section Element
The section element is can be used to wrap group of content. It is recommended to add heading tags within every section element. This element maps to the ARIA role=”region” and region is defined as:
A large perceivable section of a web page or document, that is important enough to be included in a page summary or table of contents.
<section> <h2>The main Element</h2> <p>...</p> </section> <section> <h2>The article Element</h2> <p>...</p> </section> <section> <h2>The section Element</h2> <p>...</p> </section>
The article Element
The article element is used to wrap a group of content which is self-contained and can be out of the context of the page. It is similar to section element, the only difference is that it should contain an independent content. We can use it to include things like news, articles, blog posts etc.
<article> <header> <h1>Article Title</h1> <p>Posted on 29th February 2016</p> </header> <p> ... </p> </article>
The aside Element
This element is used to represent the content which is related to the content of the whole page, but also it can stand out by its own if separated. It can include things like sidebars, Quotes or advertisements that relates to the content of the page.
<article> <header> <h1>Google Buys Nest</h1> <p>Posted at 11:34am 13th January 2014</p> </header> <p>...</p> <p>...</p> <aside> <h1>Google (GOOG)</h1> <p>Google was founded in 1998 by Larry Page and Sergey Brin. The company...</p> </aside> </article>
The footer Element
As the header element replaced div class=”header”, footer element is also doing the same by replacing div class=”footer”. This tag is used to wrap the closing content of the page or any section of the page. It is normally used for footer links, copyright information and social links.
<footer> Copyright Pradip Debnath 2016 </footer>
The address Element
By the name of this tag people consider that it can only be used for postal addresses. But It can actually be used to wrap up all types of contact information such as email address, website link.
<address> Contact <a href="mailto:itzpradip@gmail.com">Pradip Debnath</a> </address>
With this tag I have completed the discussion of sectioning elements or tags of HTML5. Also there are several other tags are available which are media elements such as video, audio tag and graphics element like canvas, svg tag.
Benefits in SEO
As you may have already understood by the tags which I have mentioned above, it will help understand a page similarly by both user and search engine crawlers. By doing few changes to the HTML codes of your existing website you can get a boost in your ranking in search engine.
Before divs are used to make the page, but div is a general purpose tag which doesn’t specify any section of the page. You can use CSS to design the page as per your choice to provide better user experience, but that will not make a better experience for search engines. Actually search engines scans HTML versions of the page and store it to their database to give the results to searches. So HTML markup is very important to get better rank on search results.
HTML5 gives a page proper segmentation by which search algorithms can identify the priority and importance of the content of the page. If you follow the rules and change the markup of your page according to HTML5 then definitely you’ll see a measurable boost in your search ranking.
