<section> Tag in HTML
FREE
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.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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]
Turn Learning into Career Growth
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.
Related Tags
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more