UI components · Text
Heading
Also called: Title, Headline, Section title, h1–h6
The title text (h1–h6) above a page or a block of content. It's bigger and bolder than body text, says what the block below is about, and together they form the page's outline.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstClean up the heading levels on this page. Use a single h1 for the page title (28px, weight 600, line height 1.3), h2 for each content block's title (20px, 600), and h3 for subsections inside a block (16px, 600). Don't skip levels. Put 8–12px between a heading and the content below it, and 32px between it and the block above. Keep each heading to one line of about 8 words max, and move any explanation into a paragraph below it. Put all the styles in CSS, and don't fake headings with bold divs or spans.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Heading is what you need.
Use Heading when
- The page title and the titles of each content block, so users can scan the page structure at a glance
- Long articles and docs organized into chapters that need a table of contents or anchor navigation
- When search engines and screen readers need to understand the page's topic and hierarchy correctly
Pick something else when
Just making one sentence stand out. Bold text or an accent color is enough, so don't use a heading tag.
Long explanations. Those belong in a paragraph, and the heading only states the point.
Use insteadParagraphText on buttons, links, and tags. They have their own components and aren't headings.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Faking a heading with a bold, enlarged div. It looks like one, but screen readers and search engines can't see the hierarchy.
- 02
Picking tags by font size, like several h1s on one page or jumping from h2 straight to h4
- 03
Writing headings as two- or three-line sentences, so scanning doesn't pick up the point
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A single short line of text that uses an h1–h6 tag to show its level. Often comes with a gray subtitle line, or a "View all" link on the right.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A heading is the name of a piece of content. The big title at the top of the page, the small title above each block, and the title inside a card all count. HTML uses six levels of tags, h1 to h6, to show hierarchy: h1 is the page's topic, h2 marks the major blocks, and h3 marks subsections inside a block. Browsers, search engines, and screen readers all read the page structure from these levels, so it's not enough for the text to look big. You have to use the right tag.
How it differs from a Page Header: a page header is a whole area that holds the title plus a breadcrumb, description, and buttons. The heading is just that one line of text. How it differs from a Paragraph: a heading is short, so a quick scan tells you what the block covers. Explanations and details go in the body text.
Use only one h1 per page and go down the levels in order. Don't skip levels to get a font size (like jumping from h2 straight to h4). If you want a certain size, change the style, not the tag. Keep headings to one line, about 8 words or fewer. Put less space between a heading and the content below it than between the heading and the content above, so it's obvious which block it belongs to.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-heading- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
h1h2h3h4h5h6[role="heading"].ant-typography:is(h1, h2, h3, h4, h5).arco-typography:is(h1, h2, h3, h4, h5, h6)[class*="MuiTypography-h"].n-h[data-slot="card-title"].card-title.modal-title
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
headingtitleheadlinesection-titlesection-heading
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
HeadingTitleHeadlineSectionTitleCardTitle
- Semantic tags and roles
A weak signal. It only counts together with other cues.
<h1><h2><h3><h4><h5><h6>role=heading
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026