The section element is an HTML5 content sectioning element used to define a generic section of a document or application. It denotes a thematic grouping of content, with a heading. The <section> element helps to break down content so that each concept, idea, or topic is isolated.
Thematic Grouping of Content
The purpose of the <section> element is to group together content that is thematically related. It means the content within a <section> should share a common subject or purpose. Examples of appropriate uses for <section> elements include:
- Individual sections of a tabbed interface
- Segments of an “About” page (e.g., company history, mission statement, team)
- Different parts of a lengthy “terms of service” page
- Various sections of an online news site (e.g., sports, world affairs, economics)
- Chapters in a document
- Thematic groupings of blog posts
It’s critical to understand that <section> is not planned as a generic container for styling or scripting purposes. If you need a semantically meaningless container for styling, the <div> element should still be used.
The Rule for Using <section> with a Natural Heading:
A guideline for using the <section> element is its content should be identified with a heading element (<h1> to <h6>) as a child of the <section>. The specification clarifies that a <section> element is suitable only if its contents would be listed clearly in the document’s outline. The headings (h1-h6) within each <section> contribute to this document outline.
This doesn’t mean a <section> must always have a heading, as the condition states the heading is “typically” present. However, providing a heading makes the structure of your document clearer and more meaningful for assistive skills and search engines.
Section element in html5 example
Basic <section> with a heading
The <section> groups the latest news articles, and the <h1> element provides a clear heading for this section. Each individual news item is further marked up as an <article> because it represents an independent piece of content.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<section>
<h1>Latest News</h1>
<article>
<h2>Article Title One</h2>
<p>Content of article one...</p>
</article>
<article>
<h2>Article Title Two</h2>
<p>Content of article two...</p>
</article>
</section>
</body>
</html>Latest News
Article Title One
Content of article one…
Article Title Two
Content of article two…
<section> within another <section>
Here, the outer <section> is about “Sports,” and it contains two nested <section> elements for “Football” and “Basketball,” each with its own heading. This demonstrates how <section> elements can be nested to represent a hierarchical structure of content.
<section id="sports">
<h1>Sports</h1>
<section id="football">
<h2>Football</h2>
<article>
<h3>Local Team Wins</h3>
<p>Details about the football match...</p>
</article>
</section>
<section id="basketball">
<h2>Basketball</h2>
<article>
<h3>Championship Game Results</h3>
<p>Details about the basketball game...</p>
</article>
</section>
</section>
Sports
Football
Local Team Wins
Details about the football match…
Basketball
Championship Game Results
Details about the basketball game…
<section> with an optional <footer>
This example shows a <section> for contact information, including a heading and a <footer> with additional related information.
<section>
<h2>Contact Us</h2>
<p>If you have any questions, please feel free to contact us using the form below.</p>
<!-- Contact form elements here -->
<footer>
<p>Our office hours are Monday to Friday, 9 AM to 5 PM.</p>
</footer>
</section>
Contact Us
If you have any questions, please feel free to contact us using the form below.
Incorrect Use Example
The <section> element is being used as a generic container, similar to a <div>, just to apply a CSS class for styling. This is not the planned semantic use of <section>. A <div> would be more suitable here.
<!-- Incorrect: Using <section> solely for styling -->
<section class="container">
<p>This is some text.</p>
<button>Click Me</button>
</section>
This is some text.
By using the <section> element correctly, with a focus on thematic grouping and typically including a heading, you contribute to a more semantically rich and well-structured HTML document. This improves accessibility, SEO, and the overall maintainability of your web pages. Remember to consider if a more specific semantic element like <article>, <aside>, or <nav> might be more appropriate before using <section>.
HTML5 Topics