Can an HTML page have more than one <h1>, and does placing an <h1> inside a <section> automatically demote it to a lower level?

## The promise that was never kept When HTML5 was being written, it introduced *sectioning content* — `<section>`, `<article>`, `<nav>`, `<aside>` — together with an **outline algorithm**. The idea was elegant: a heading's effective level would be derived from how deeply its sectioning ancestors nested. You could then write self-contained components that always used `<h1>` internally, drop them anywhere, and have the document outline come out correct automatically: ```html <h1>Blog</h1> <section> <h1>Post title</h1> <!-- intended to behave as level 2 --> <section> <h1>A subsection</h1> <!-- intended to behave as level 3 --> </section> </section> ``` That is a genuinely attractive model, and it is why the pattern keeps resurfacing in interviews and in component libraries. **It was never implemented.** Not by any browser, not by any screen reader, not by any of the heading-outline tooling that mattered. Every implementation did — and still does — the simple thing: the level is the digit in the tag name. In the snippet above, assistive technology announces three level-1 headings, so the user hears three page-level titles and no hierarchy at all. Because the spec text described behaviour nothing exhibited, the WHATWG eventually removed the outline algorithm from the HTML Living Standard. The current advice in the standard is the opposite of the original promise: use `h1`–`h6` to convey structure, and do not rely on sectioning nesting to establish rank. ## So what does <section> do to a heading? Nothing, as far as level is concerned. Sectioning elements still carry their own meaning and their own accessibility mapping, and a heading placed first inside one is conventionally read as that section's title. But the *rank* is entirely yours to state. If a section is a subsection of an `h2` above it, its title is an `h3` — whether that title lives inside a `<section>`, a `<div>`, or nothing at all. ## Is more than one h1 allowed? Valid, yes. The HTML validator will not complain about several `h1` elements. The question is whether it is *useful*, and the answer follows from the flatness above: multiple `h1`s tell a screen reader user that the page has several equally top-level topics. Occasionally that is true. Far more often it is an accident of components each claiming top billing, and the result is a heading list where nothing is subordinate to anything. The practical guidance interviewers expect: - **One `h1` per page**, naming what *this page* is — usually close to the text of the `<title>`, and usually not the site name or logo. - Everything else descends from it with explicit ranks. - If you find yourself wanting a second `h1`, that is a signal the page has two unrelated top-level topics, which is a content-structure problem more than a markup one. ## The related myth about document titles A sibling misconception is that `<h1>` and `<title>` are interchangeable. They are not: `<title>` names the document to the browser tab, history, bookmarks and search results, and is announced on page load; `<h1>` is the top of the in-page outline. They usually say similar things, and they are separate elements with separate audiences. ## What to do with components that do not know their depth Since nesting will not fix rank for you, the level has to be supplied. The usual approaches, roughly in order of preference: 1. **Make the level an input to the component.** The page knows where the component sits; the component does not. A `headingLevel` parameter with a sensible default is boring and it works. 2. **Derive it from a nesting context** the composition establishes, so deeply-placed instances render deeper ranks automatically. 3. **As a fallback, `role="heading"` with `aria-level`** on a generic element. This is real ARIA — `aria-level` takes an integer and, unlike native tags, is not capped at 6 — but you give up the native element and must set the value correctly, since the default level for `role="heading"` is 2. Reach for it only when you truly cannot emit the right tag. ```html <!-- last-resort form; prefer <h3> when you can emit it --> <div role="heading" aria-level="3">Shipping options</div> ``` ## The one-line answer to give "Legal, but pointless: the outline algorithm that would have demoted a nested `h1` was never implemented and has been removed from the spec, so every `h1` is announced as level 1. I state ranks explicitly and keep a single `h1` per page." That sentence tells the interviewer you know the history *and* the shipping behaviour, which is the whole point of the question.