-->

HTML5 page structure best practices for website

HTML image

HTML5 is a new version of HTML introduced in the year 2014 and according to research carried out, we were made to understand that search engines values, understood and preferred HTML5 than the normal HTML thus ranking websites rendered in HTML5 structure higher above websites written in old HTML.

Also learn how to optimize your blog articles for SEO using h1, h2, h3

Although rendering of blogs in HTML5 structure is not the only thing that will boost your post to the first page of search engines but it is part of the most important factors you need to complete at your end to enable search engines understood your pages to enhance SEO (search engine optimization).  

Well i know, many most especially those that are new to coding will be confused about this topic HTML5 structure, but i will urge us all to be calm, it not that hard as you think. I will start by listing out HTML5 structure tags, follow by How to check website structure type before HTML5 page structure best practice for website.

HTML5 structure tags

<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>
<mark>
<figure>
<figcaption>

Side note: before uttering your blog source codes it is good to know if they is a need for it, because most new templates are now constructed with HTML5 structure tags. meaning; if yours is constructed with HTML5 then they is no need to apply this or better still change your blog template to recently released ones.

How to check website structure type

It very easy to know if your site is constructed with HTML5 or not, all you have to do is add view-source: to the front of any website you want's to check. Example view-source:https://kenlegit.com and click send. after sending, scroll down and check if the above HTML5 structure tags is present in the codes.
Note this is for phone users and if you are using desktop visit the site and right click on any place on the site you want to check then select "view source" from the menu, so after it displays the codes scroll down and check if any of the above HTML5 structure tags is present.

Also read: how to submit your website sitemap to Google

HTML5 page structure best practices for website

<!DOCTYPE html> 

<html lang="en">

 <head> </head> 

<body> 

<header> <nav> navigation elements here </nav> </header> 

<main> 

<article> 

<header> 

<h1>main heading of the document</h1> <h2>sub heading of the document</h2> 

</header>

 <section> 

<aside>related content here</aside> 

 </section>

 <figure> 

<img src="/picture.svg" alt="alternate text" class="test"> 

<figcaption>about the image here</figcaption> </figure> 

 <section>your article goes here</section> 

</article> 

</main> 

 <aside> 

<section> sidebar here </section>

 </aside> 

<footer> <section> footer detailes, credits, copyright, contact info. </section> 

</footer> 

</body> 

</html>

 

Thanks for reading.. please don't hesitate to drop your comment about places you don't understand and i will appreciate if you can help us share!!

Post a Comment

0 Comments