Scaler
Academy
Data Science
Neovarsity
New
Skill Test
CoursesFree Masterclass
Search for Articles, Topics
<section> Tag in HTML

<section> Tag in HTML

By Aditya Saxena
3 mins read
Last updated: 30 Jun 2022
149 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

HyperText Markup Language (HTML) is a programming language used to create user interface (U.I.) structure in web applications, mobile applications, desktop applications, documents, etc.

The <section> tag is a structural element in HTML. It is used for grouping together elements that are related to each other. Every section tag typically includes several heading elements and elements presenting related content.

Syntax Of Section Tag

Following is the syntax for using the HTML section tag :

  • <section> is the opening section tag.
  • HTML is the content that lies within the section. It could be HTML in general, any other HTML element, plain text, or even nested section tags!
  • </section> is the closing section tag.

Attributes

Section tag in HTML supports both global attributes as well as event attributes.

How to use <section> tag in HTML

  • The section tag in HTML is a generic sectioning element. It should be used only if there is no more specific element to represent it. For instance, a navigation menu could be wrapped in an HTML nav tag. But a map display and its controls or a list of search results do not have specific elements. Thus they may be wrapped within a section element.

  • If the content inside a section tag represents an atomic unit of content that makes sense syndicated as a standalone piece such as a post of or comment on a blog, the article tag would suit better.

  • If the content within a section tag represents information that is not directly a part of the main content but is useful, tangential, and works alongside the main content (such as author info, related links, etc.), use the aside element.

  • If the content inside a section tag represents the main content region of a document, it's wise to use the main tag.

  • If the section element is being used only as a styling wrapper, it should be replaced with a div tag.

  • A conventional rule is that a section should conceptually appear in a document's outline.

  • Every section tag instance must be identified by including a heading (h1 - h6) as a child of the section element, whenever possible.

Examples

Example 1: Simple Usage

Output [IMAGE 1 Add scaler topics Logo] [IMAGE 1 FINISH]

Example 2: Nested Section Tags

Output [IMAGE 2 Add scaler topics Logo] [IMAGE 2 FINISH]

Example 3: Section Tag Usage without Heading

Output [IMAGE 3 ADD SCALER TOPICS LOGO] [IMAGE 3 FINISH]

Browser Support

  • Google Chrome: 6.0 and above.
  • Internet Explorer: 9.0 and above.
  • Mozilla : 4.0 and above.
  • Opera : 11.1 and above.
  • Safari :: 5.0 and above.

Conclusion

  • The section tag is a structural element in HTML that is used for grouping together elements that are related to each other.
  • HTML section element supports both global and event attributes.