Introduction
Hi Folks, This is not an introductory blog, to know about semantic elements in detail you should refer to Part 1.
As we have already understood semantic elements. Now we are going to see frequently used semantic elements that you need to know.
Here is the List:-
<header>
<nav>
<main>
<section>
<article>
<aside>
<figure>
<figcaption>
<time>
<footer>
Let's understand the meaning of each tag:-
1.<Header>
<header> is used for displaying the introductory part of the content. It contains <heading> tags, logo, and images.
<header>
<h1>Heading</h1>
<img src="img.jpg" alt="">
</header>
-------------------------------Part 2------------------------------------------------
<article>
<header>
<h2>Heading 2</h2>
<p>This is paragraph</p>
</header>
<p> </p>
</article>
As we can see, I used <header> inside <article> tag for making the introduction of the article but point to remember that it is mostly used in creating the top of websites.
2 <nav>
<nav> is generally used for displaying the set of navigation links on the website.
<nav>
<ul>
<li><a href="www.hashnode.com"></a>Hashnode</li>
<li><a href="www.google.com"></a>google</li>
<li><a href="www.meta.com"></a>meta</li>
</ul>
</nav>
3. <main>
<Main> tag is used to display the main content of the website or we could say the center part of the website.
4.<section> and <article>
Many times people get confused between <section> and <article> tag. They just don't know where to use what? <section> and <article> tag used interchangeably.
As <Section> is used to display the particular section of the website. It contains chapters, an introduction, articles etc.
A <article> tag contains independent, self-contained content like a blog post, product card, item information, forum post etc.
<section>
<h2></h2>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
</section>
----------------------------------Part 2------------------------------------
<article>
<section class="sec1">
<h2></h2>
<img src="" alt="">
</section>
<section class="sec2">
<p></p>
<p></p>
</section>
</article>
As we can see I have used <section> and <article> interchangeably.
In part 1, I made a section that contains multiple articles and in part2 I made an <article> which has 2 parts that I divided in <section> tag. Rather to use <div> using a <section> and <article> is a great choice.
5.<aside>
It is generally used to display content that is not directly related to the main content. it is used to make a sidebar of the webpage.
6.<figure> and <figcaption>
<figure> tag contains self-contained content like image, image caption, image information etc.
<figcaption> is used to write the caption of the image.
<figure>
<img src="" alt="">
<figcaption>Sunset at beach !!</figcaption>
</figure>
7.<time>
As the name suggests, it is used to display the time.
8.<footer>
It is used to make the last part of the webpage.
It contains copyright information, contact information, related links, owner information etc.
Let's see the typical Html structure using semantic elements.
<header>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
<main>
<section class="section1">
<article class="article1"></article>
<article class="article2"></article>
<article class="article3"></article>
</section>
<section class="section2">
<article class="article4"></article>
<article class="article5"></article>
</section>
</main>
<aside>
<h2></h2>
<p></p>
</aside>
<footer>
</footer>
As we can see, It is more readable compared to non-semantic elements.
Reference: https://www.w3schools.com/html/
Conclusion:
As I believe, to be a good developer we should more focus on practicality, not on theory. so go and get your hands dirty on it, try all the tags on your own.
Thank you so much for reading it completely, If you liked it do like, comment, share and follow for more content. Comment for any feedback.