The best HTML element to represent and show sections or standalone content to the user is the
section HTML element tag.
section HTML element tag can be written like this,
<!-- 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:
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.
sectionHTML element tags are considered as generic HTML element tag.
- It is better to add
h6tags) inside every
sectionHTML 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 hidden
headingtag inside the
sectiontag 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
p, etc. but still requires a separate standalone area.
See the above code live in JSBin.
That's all 😃!