By Jonathan Griffin. Editor, SEO Consultant, & Developer.
· 2 min read
<section> tag represents a generic section of a document or application and should include a thematic grouping of related content.
<!DOCTYPE html> <html> <head> <title>HTML Title Element goes here.</title> </head> <body> <h1>Displayed Page Title</h1> <p>The main content of your page goes here.</p> <section> <h2>Heading</h2> <p>More content</p> </section> <section> <h2>Heading</h2> <p>More content</p> </section> </body> </html>
- Both the opening and closing tag are required.
<section>should be identified, usually by including a
<h6>element as a child. That being said, it would not necessarily make sense for all application or UI sections to have a heading.
- If the content is a complete, or self-contained, composition it is recommended to use the
- If the content is used to hold indirectly-related but separate content to the document’s main content, such as sidebars, pull-quotes, and call-out boxes, consider using an
<section>element is not a general container element. If the container is needed just for styling purposes then a
<div>should be used.
<section>elements should only be used if the contents would be listed explicitly in the document’s outline.
The Section element only supports the Global Attributes.
- Assistive technology such as screen readers may announce a hint to users as to the type of content contained in the
<section>element if an
aria-labelis specified. For example:
<section aria-label="Red apples."> <h2>Red Apples</h2> <p>These red apples are delicious....</p> </section> <section aria-label="Green apples."> <h2>Green Apples</h2> <p>These green apples are a little sour, but can be nice if eaten with....</p> </section>
|Android Webview||Chrome Android||Firefox Android||Opera Android||iOS Safari||Samsung Internet|