A section element groups a meaningful part of a web page. Use <section> at the start and </section> at the end when a heading and its related content belong together—something you would want to see in the page outline. section 12.2.1
A section with a heading and paragraphs
A section commonly contains a heading plus one or more paragraphs. For example: <section> <h2>Section heading</h2> <p>First paragraph.</p> <p>Second paragraph.</p> </section> The heading names the topic; the paragraphs provide its content. section 6.4 section 12.2.1
On a home page, use one section for each subtopic. A section can include the subtopic title, a short description, and a link to the related page. Place these sections in the main element, which holds the page’s unique content. section 7.3.2 section 7.4.3
To add another section without writing it from scratch:
- Copy everything from an existing opening <section> tag through its matching closing </section> tag. section 6.4
- Paste the copy where the new content should appear, such as inside <main>. section 7.4.3
- Change the heading, text, and link while leaving the surrounding tags intact. section 7.4.3
For a longer article, begin with introductory paragraphs under the article title, then add sections with h3 headings and one or more paragraphs. You can also type a fresh <section> and </section> pair, put the cursor between the tags, and fill it in. section 12.2.4 section 12.3
<section>
<h2>Section heading</h2>
<p>
First paragraph
</p>
<p>
Second paragraph
</p>
<p>
Third paragraph
</p>
</section>
This compact example shows the basic pattern: one section wraps its heading and three separate paragraphs. section 6.4
