How to Use the Section Element in HTML

If you’re familiar with the HTML section element, then you understand just how instrumental it is to organize your document successfully. We know that some HTML elements only tell browsers how the elements should look, while others inform the browser of their appearance and their functionality. We call the latter semantic HTML, and that’s where the HTML section element comes into the equation. 

In this post, we’ll cover everything you need to know about HTML section tags. You’ll get an answer to the question, What is a section in HTML? We’ll also discover how it differs from other container elements, how you can use it, and how to successfully hide it. 

• What is a section in HTML?

• How to Use the HTML Section Element

• How to Hide a Section in HTML

What is a section in HTML?

In HyperText Markup Language (HTML), ‘section’ is a semantic element that enables you to create standalone sections on a web page. These sections should be made up of related content, such as contact information, 

However, use your discretion before implementing the HTML section element. If there isn’t a more specific element available to represent the related content, then HTML section tags are a great add. But if you can get more specific, you should. For example, you wouldn’t use the section element to group navigational links together — you’d use the nav element instead. But it would be appropriate to use the section element to divide up a one-page website or a lengthy terms and conditions agreement.

To better understand when to use the section element, let’s compare it to another semantic element: The article.

What is the difference between article and section in HTML5?

First, let’s start with the similarities between the article and section elements. They’re both semantic elements in HTML5, which means they convey the meaning of the elements they contain. This allows search engines, assistive tech, browsers, and even other developers to comprehend the different portions of a web page. 

Now, for the differences. There are situations where it would make sense to use the article element over section — and vice versa. You should use an article when you’re looking to represent a unit of content on a web page that could exist on its own or get reused. For instance, a blog or forum post, magazine or newspaper article, should be marked up using the article element.

On the other hand, section would be appropriate to represent — you guessed it — a section of a document related to the same theme. However, the hallmark difference is that with this element, the section isn’t independently distributable or reusable. Examples of content that should e marked up with HTML section tags include the introduction, news items, and contact information on a homepage. 

Now let’s take a closer look at the difference between a section and another container element in HTML: The div.

What is the difference between div and section in HTML5?

Time to introduce another element to the mix: Div. First up, their similarities. We use both the div and section elements to divide a web page into sections. However, div differs from section because it’s a semantically neutral element. (Section, as you know, is not.) 

But what exactly does that mean in practice? It comes down ot this: div doesn’t describe the content it contains. While other elements like the article, nav, header, and footer clearly describe the content they contain and are known as semantic elements, div does not. A section element is also considered a semantic element because it represents a section of a document that is related to the same general concept.  

Since a div has no semantic meaning, it is called a generic container element and should only be used to group elements together for styling or presentational purposes. Otherwise, you should use a section, or another semantic element, to explain what that part of the page is about to search engines, browsers, assistive technologies, and other developers. This will make your code more accessible and easier to maintain.

How to Use the HTML Section Element

To use sections in HTML, wrap the related elements you want to group together in section tags. Most sections should contain a heading. Let’s look at a few common examples below.

Homepage Example

In the example below, the body of the HTML doc is split into two sections. Each contains a heading and paragraph.

See the Pen The Section element example by Christina Perricone (@hubspot) on CodePen.

Article Example with Nested Sections

In the example below, an article element contains three nested sections. Each section contains a heading and paragraph.

See the Pen by Christina Perricone (@hubspot) on CodePen.

How to Hide a Section in HTML

Rather than permanently delete a section on your site, you might be interested in hiding it. That way, if you change your mind, you don’t have to recreate it from scratch.

There are two options for hiding a section (or any element) in HTML. If you’d like the page to be displayed as if the section element is not there, then use the display property and set it to “none.” Here’s an example:

See the Pen by Christina Perricone (@hubspot) on CodePen.

If you’d like to hide the section but have it take up the same space in the layout, then use the visibility property and set it to “hidden.” Here’s an example:

See the Pen by Christina Perricone (@hubspot) on CodePen.

Sectioning Your HTML

You can use the HTML section element to divide up a web page into standalone sections of related content. Using the section element over a generic container element like div can help make your code more accessible and understandable to search engines, browsers, assistive technologies, and other developers. Now that you know how to use it, begin implementing the HTML section tags today. 

Editor's note: This post was originally published in September 2021 and has been updated for comprehensiveness.