HTML <section> Tag
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
article, section {border:8px solid #F9EECF;padding:3px;margin:3px;}
</style>
</head>
<body>
<article>
<header>
<h2>Article Heading</h2>
<p>Sub heading.</p>
</header>
<section>
<h3>Section 1</h3>
<p>Section 1 content...</p>
</section>
<section>
<h3>Section 2</h3>
<p>Section 2 content...</p>
</section>
</article>
</body>
</html>
The above example demonstrates usage of the <section>
element.
The <section>
element represents a generic section of a document or application.
The <section>
element is a thematic grouping of content. The theme of each <section>
should be identified using one of the six levels of heading (i.e. <h1>
- <h6>
)
There could be one or more sections on a web page. For example, a homepage could have a section for introducing the company, another section for news items, and another section for contact information.
Also, a section can be nested within an <article>
element. There's no rule against this. In fact, the <section>
element can appear anywhere flow content is expected — which is the same as most elements that appear within the body of the document.