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.

Attributes

Specific attributes

Recommended attributes

role="[ARIA role]" provides additional semantic information about the section’s purpose for assistive technologies.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<main>
  <section>
    <h2>About the IndieWeb</h2>
    <p>The IndieWeb is a people-focused alternative to the corporate web...</p>
  </section>
  
  <section role="complementary">
    <h2>Related Resources</h2>
    <ul>
      <li><a href="https://indieweb.org/">IndieWeb.org</a></li>
      <li><a href="https://webmention.net/">Webmention.net</a></li>
    </ul>
  </section>
  
  <section>
    <h2>Getting Started</h2>
    <p>Building your personal website is the first step...</p>
  </section>
</main>