Good day everyone! this is Part2 of sematic tag tutorials for beginners, before moving on we would like you to go through the Part1 of this tutorial for better understanding. In this Part 2 of our semantic tags tutorials we are going to show how to use & define your related, navigation and main contents using <aside>, <nav> and <main> semantic tags.
<aside> : aside semantic tags in HTML5 is used to define contents that are not part of your article or page but are still related to them. Mostly all designers think of aside as an element to design the sidebar which is not the perfect way to use <aside> but still you can use it for sidebar. The best example for the use of <aside> is to provide article, post or page's author information as it is no part of the article or post but still is related to it. You can notice in the left side of this page which you are viewing right now contains the information of the author of this blog which is something not a part of this post but still is related to it providing you with the information bout the author, this is where you can use the <aside>. Look at the example below :
<nav> : From the name itself we guess that you have guessed this tag's use. The <nav> tag is a very simple tag of HTML5 which is used to define any type of navigations on your web page.
The use is very simple just enclose your entire navigation markup tat you previously created inside your <nav> and you are done. Anyone looking at your markup even a naive can make out that it is your navigation. If a naive can make out then why not the smart search engines. Look at the example below:
<main> : The <main> is used to define the main part of your web page. It can contain any number of contents which we will make the main part of your page. Unlike other tags the <main> tag can be used only once in a document with contents representing the main items, this can even be your articles part contained inside your <main> tag. Look at the example below :
Click here to view the demo example. You can also download it by clicking the below link:
Download
We hope you liked this post if you did make sure you share it with your social networks.
<aside> : aside semantic tags in HTML5 is used to define contents that are not part of your article or page but are still related to them. Mostly all designers think of aside as an element to design the sidebar which is not the perfect way to use <aside> but still you can use it for sidebar. The best example for the use of <aside> is to provide article, post or page's author information as it is no part of the article or post but still is related to it. You can notice in the left side of this page which you are viewing right now contains the information of the author of this blog which is something not a part of this post but still is related to it providing you with the information bout the author, this is where you can use the <aside>. Look at the example below :
<body>
<aside>
<h3>About Me</h3>
<p>I am a designer based in San Francisco</p>
</aside>
</body>
<nav> : From the name itself we guess that you have guessed this tag's use. The <nav> tag is a very simple tag of HTML5 which is used to define any type of navigations on your web page.
The use is very simple just enclose your entire navigation markup tat you previously created inside your <nav> and you are done. Anyone looking at your markup even a naive can make out that it is your navigation. If a naive can make out then why not the smart search engines. Look at the example below:
<body>
<nav>
<ul>
<li><a href="www.google.com">Google</a></li>
<li><a href="www.yahoo.com">Yahoo</a></li>
<li><a href="www.msn.com"></a>MSN</li>
</ul>
</nav>
</body>
<main> : The <main> is used to define the main part of your web page. It can contain any number of contents which we will make the main part of your page. Unlike other tags the <main> tag can be used only once in a document with contents representing the main items, this can even be your articles part contained inside your <main> tag. Look at the example below :
<body>
<main>
<article>
<h1>Introduction to semantic tags</h1>
<span>Sematic tags are
used to define content in HTML5</span>
</article>
</main>
</body>
Click here to view the demo example. You can also download it by clicking the below link:
Download
We hope you liked this post if you did make sure you share it with your social networks.
Happy Designing !
