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
section
HTML 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
section
HTML element tag cannot satisfy the needs of the content. - The
section
HTML element tags are considered as generic HTML element tag. - It is better to add
heading
tags (h1
-h6
tags) inside everysection
HTML element tags to distinguish them from one another. It is recommended for the semantic flow of the document. - You could also have
section
tags 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 hiddenheading
tag inside thesection
tag 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 😃!