Section Tags in HTML-Part 2
This post explains the meaning of section tags in HTML with a real life example and this is an extension of my previous post on section elements.
What is a section tag
I have already explained in brief about the section elements in my previous post and in this post, I would be providing you a better and clearer example, to understand the usage of section tags.
A section tag is used to divide and distribute different sections and subsections of a content into different parts to make it easier for the user to read through the content of the document. Each section has it’s own piece of content contained in a heading and paragraph or paragraphs and if there are several sections, every one of the sections will contain separate piece of information, indepndent of each other. Let us understand this with the below example where you have two sections and each section has it’s wn header and paragraph as shown below in the code block.
Example of a content with sections
What Coding Language to Learn First
Introduction
Read this guide to understand what coding language should you learn first based on certain criteria.
Criteria
You need to consider several criteria while choosing your first programming language, based on your learning purpose and goals. Are you learning it as a hobby, or do you want to become a front end web designer or a backend developer or a full-stack developer, or a software engineer , and so on.
Code for using section tag
<h1>What Coding Language to Learn First</h1>
<section>
<h2>Introduction</h2>
<p>
Read this guide to understand what coding language should you learn first based on certain criteria.
</p>
</section>
<section>
<h2>Criteria</h2>
<p>
You need to consider several criteria while choosing your first programming language, based on your learning purpose and goals. Are you learning it as a hobby, or do you want to become a front end web designer or a backend developer or a full-stack developer, or a software engineer , and so on.
</p>
</section>
Conclusion
Now, you have learnt the meaning of a section tag in html and also the importance of using a section tag in html documents. It allows sectioning off or dividing different independent piece of information stand out separately with it’s own header and paragraphs and the reader will know while navigating the document , what each section is about , rendering a smooth readability and hence it is a very important semantic tag in html documents. It is represensted by <section> for open section tag and </section> for a closed section tag. In the above example, we have two sections where the introduction has a piece of some content and is separated from the other section that takes care of the content for the criteria of the content. I hope, it is clear from the above example and also the code block above. The source code to the above code example is here.
Read more posts in web development for beginners:
