The best HTML element to represent and show sections or standalone content to the user is the section HTML element tag.
The section HTML element tag can be written like this,
<!DOCTYPE html>
<!-- Usage of the 'section' HTML element tag -->
<html>
<body>
<!-- 'section' HTML element tag -->
<section>
<h3>This is a heading</h3>
<p>Hello World! This is a small paragraph.</p>
</section>
</body>
</html>
Important points to note:
- The
sectionHTML element tag is used to add a particular section and standalone content of text or content in a website. - It should be used as a last resort if any other HTML element tags other than the
sectionHTML element tag cannot satisfy the needs of the content. - The
sectionHTML element tags are considered as generic HTML element tag. - It is better to add
headingtags (h1-h6tags) inside everysectionHTML element tags to distinguish them from one another. It is recommended for the semantic flow of the document. - You could also have
sectiontags without heading tags in some cases where a general heading may not be required like to hold a bunch of action buttons or links for a specific content but still regarded as a separate section. It is always recommended to add a CSS hiddenheadingtag inside thesectiontag to make it accessible to people who are using assistive technologies like screen readers, etc.
Some common use cases for the section HTML element tags are to hold:
- Standalone content
- Contents or text which cannot be satisfied with other HTML element tags like the
article,aside,p, etc. but still requires a separate standalone area.
See the above code live in JSBin.
That's all 😃!