Section Elements in HTML
A guide to understand what are sections and how to use sections in a HTML page.
Introduction
Section elements are very crucial to any website page as they help in determining their respective layouts and design in order to have a good reading experience and an aesthetic appeal as well. Section elements are used to group together similar content in a html web page or document as explained in the paragraphs below. Section elements in a html page lends a semantic appeal to the page or document as explained below and demonstrated by the code block that is used for sectioning different parts of a similar content together while giving a rich user experience.
Section Elements
We depict Section element by writing <section></section> whereby the open and closed Section tags would enclose the different sections accordingly. For example, let us consider a web page document about a particular topic with respective details written within each of the sections in the page. The page would contain sections such as introduction section, description section and conclusion section etc.
Example of a Section Element
In the below code block, we observe code where we have divided sections of content to do with Lorem Ipsum , whereby in the first paragraph we have written an introduction following content on introduction of the same within the first section and in the second section we have explained how to generate the lorem ipsum text and in the last section we have written conclusion. This is how section elements help us to write similar content together divided by different sections to explain the different parts of the content on all about Lorem Ipsum text in this example.
<section>
<h2>Introduction to Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section>
<h2>How to generate Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section>
<h2>Conclusion</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>Conclusion
In the above code block, we used lorem ipsum text inside the written content, as it is only meant to explain the section elements usage inside the code block. We learnt all about section elements in html and how to use it efficiently in our html web page or document. Usage of section elements are essential to group together similar content parts in the same document or page in a semantic way such that the reader or user has a rich user experience while navigating through the web page or document without the need to get confused and cut through the noise of web content more efficiently and smoothly.