Select Page

HTML5 section element – How to use it

The <section> element was introduced in HTML5. It wraps an area of content or page that almost always requires a heading.

nanadwumor

May 27, 2023
section element - HTML5

Share this article


The  <section> element was introduced in HTML5. It wraps an area of content or page that almost always requires a heading.

An article element can have its content split into sections. Also, a section can contain some article elements. section should not be used as a general wrapper for styling purposes. The section element is similar to the div. However, the div is a semantically neutral element, whereas the section element is not.


Join other Subscribers on our YouTube channel and enjoy daily pogramming tutorials.


Syntax of <section> element

<section> outlines a document

A section should typically have a header element (H1 through H6) to describe the purpose of the section.

Recommended


Example of <section> in code

The <section> element creates items inside outline of the document. Because of this, a section should typically have a header element (H1 through H6) to describe the purpose of the section in a sentence or two. Thus, if you cannot come up with a title for the section, the div element will be more suitable than the section.

Output

example of section in code

Common usage of the <section> element

Some common usage of the section element include the following:

  • The individual portion of a tab switcher or content slider can be put into sections using the section element, especially if if an unordered list is not needed.
  • Any lengthy page such as Privacy Policy, Terms and Conditions page can be divided into parts using the section element.
  • The section element can divide the different sections of a one-page website or portfolio.
  • It can be used to divide a book into chapters or sections.

When is it recommended to use the section element?

  • The <section> element is similar to the <div> element so that means we can decide to use either the <div> or the <section> element. The question now is, when is it appropriate to use the <section> element? The <section> element is highly recommended to be used if the content of the element would be listed explicitly in the document’s outline. That is, you should be able to give a title to that portion of code you want to introduce the <section> element. The <section> element shouldn’t be thought of as any element you use to group a portion of your code that needs to be styled later in a CSS like the way the <div> element is used. It should however be used in the circumstance where the content it contains will be enumerated in your document’s outline. However, if an element is needed only for styling purposes, it is more appropriate to use the <div> element.
  • Besides, if you find it difficult to describe elements in the <section> in brief statement, then <div> should be used in its stead.

When is it recommended to use the section element?

The <section> element creates items inside outline of the document. Because of this, a section should typically have a header element (H1 through H6) to describe the purpose of the section in a sentence or two. Thus, if you cannot come up with a title for the section, the div element will be more suitable than the section.

Output

section element example- HTML5

We have also said earlier that if you find it difficult to describe elements in the <section> in brief statement, then <div> should be used in its stead. 

Program shows the use of <div> to group a bunch of code for styling.

A <div> element is preferred over a <section> here because the code is for styling purpose only and won’t be outlined in the document.

Output

section element - HTML5

Global Attributes

The <section> element supports the global attributes in HTML

Event Attributes

The <section> element supports the event attributes in HTML

Default CSS Settings

The default CSS setting in most browsers is as below:


Share this article


You May Also Like…

Block And Inline Level Tags in HTML

Block And Inline Level Tags in HTML

Block elements start on a new line and end with a carriage return. That's, immediately after ending on a horizontal...

Selecting a browser for HTML5 development

Selecting a browser for HTML5 development

Google's Chrome browser is simple to use and has the most up-to-date HTML5 features making it easier for developers....

Top 10 HTML5 formatting tags

Top 10 HTML5 formatting tags

HTML offers a range of elements for formatting text. HTML formatting tags include : <b> - Bold text...