Which HTML element tag can be used to represent and show sections or standalone content to the user?

September 19, 2021 - 2 min read

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 every section 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 hidden heading tag inside the section 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 😃!

Feel free to share if you found this useful 😃.