From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Fsection.html | 118 ++++++++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 devdocs/html/element%2Fsection.html (limited to 'devdocs/html/element%2Fsection.html') diff --git a/devdocs/html/element%2Fsection.html b/devdocs/html/element%2Fsection.html new file mode 100644 index 00000000..428182f0 --- /dev/null +++ b/devdocs/html/element%2Fsection.html @@ -0,0 +1,118 @@ +

<section>: The Generic Section element

The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

As mentioned above, <section> is a generic sectioning element, and should only be used if there isn't a more specific element to represent it. As an example, a navigation menu should be wrapped in a <nav> element, but a list of search results or a map display and its controls don't have specific elements, and could be put inside a <section>.

Also consider these cases:

To reiterate, each <section> should be identified, typically by including a heading (h1 - h6 element) as a child of the <section> element, wherever possible. See below for examples of where you might see a <section> without a heading.

+
+

Examples

+ +

Simple usage example

+
+

Before

+

html

+
<div>
+  <h2>Heading</h2>
+  <p>Bunch of awesome content</p>
+</div>
+
+
Result
+
+ + +

After

+

html

+
<section>
+  <h2>Heading</h2>
+  <p>Bunch of awesome content</p>
+</section>
+
+
Result
+
+ + +
+
+

Using a section without a heading

+
+

Circumstances where you might see <section> used without a heading are typically found in web application/UI sections rather than in traditional document structures. In a document, it doesn't really make any sense to have a separate section of content without a heading to describe its contents. Such headings are useful for all readers, but particularly useful for users of assistive technologies like screen readers, and they are also good for SEO.

Consider however a secondary navigation mechanism. If the global navigation is already wrapped in a <nav> element, you could conceivably wrap a previous/next menu in a <section>:

+

html

+
<section>
+  <a href="#">Previous article</a>
+  <a href="#">Next article</a>
+</section>
+
+

Or what about some kind of button bar for controlling your app? This might not necessarily want a heading, but it is still a distinct section of the document:

+

html

+
<section>
+  <button class="reply">Reply</button>
+  <button class="reply-all">Reply to all</button>
+  <button class="fwd">Forward</button>
+  <button class="del">Delete</button>
+</section>
+
+

Result

+
+ + +

Depending on the content, including a heading could also be good for SEO, so it is an option to consider.

+
+

Technical summary

+
Content categories Flow content, Sectioning content, palpable content.
Permitted content +Flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content. Note that a <section> element must not be a descendant of an <address> element.
Implicit ARIA role region if the element has an accessible name, otherwise generic
Permitted ARIA roles alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel
DOM interface HTMLElement
+

Specifications

+
+ + +
Specification
HTML Standard
# the-section-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
section5124911.154.418411.14.21.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section +

+
-- cgit v1.2.3