Utilko logo Utilko
structure

<section>

A thematic grouping of content that typically has a heading and belongs in a document outline. Use it when the content is a distinct chunk of a larger whole; use <article> instead if it stands alone.

<section><h2>Pricing</h2>...</section>

Common attributes

Attribute Purpose
aria-labelledby Links the section to its heading id
aria-label Names the section without a visible heading
id Deep-link anchor
class Styling hook

Examples

<section aria-labelledby="pricing"><h2 id="pricing">Pricing</h2>...</section>

Section with an accessible name

<section id="features"><h2>Features</h2>...</section>

Anchorable page section

<section><h2>Reviews</h2><article>...</article><article>...</article></section>

Grouping several articles under one theme

Gotcha

A

should have a heading (or aria-label) — a bare wrapper with no name should be a
. It is not a generic styling box.

Related tags

<article>
Self-contained content that could be distributed independently — a blog post, news story, forum reply, or product card. Use it when the content would make sense syndicated or on its own page.
<div>
Generic block-level container with no inherent semantic meaning, used to group content for styling or scripting. Reach for it only when no semantic element (section, article, nav, header) fits the content.
<main>
Contains the dominant content of the document's <body> — the content unique to this page, excluding site-wide headers, nav, sidebars, and footers. Use exactly one visible <main> per page.
<span>
Generic inline container with no semantic meaning, used to style or script a run of text or inline content. Use it when semantic inline elements like <em>, <strong>, or <code> don't fit.
<header>
Represents introductory content or a group of navigational aids for its nearest sectioning ancestor. Use it at the top of the page, or inside an <article> or <section> for that block's heading area.

← All HTML tags · CSS selectors · HTML entities