One page title (h1)

페이지 제목(h1)은 하나

Every page has exactly one main title. Home, posts, topics, info pages and the 404 each have one fixed component that draws it.

···
html
<main class="dsx dsx--one"><p class="dsx-label"><b>실제 렌더</b>KRDS PageHead plain — 점선과 이름표는 아틀라스가 얹은 설명이에요</p><header class="pg pg--plain" data-astro-cid-fxwjsgid> <div class="container pg__inner" data-astro-cid-fxwjsgid> <nav class="crumbs crumbs--slash" aria-label="현재 위치" data-astro-cid-goxg7r6x> <ol data-astro-cid-goxg7r6x> <li data-astro-cid-goxg7r6x>  <a href="/" data-astro-cid-goxg7r6x>홈</a> </li> </ol> </nav>   <h1 class="pg__title" data-astro-cid-fxwjsgid>단계별 이유식</h1> <p class="pg__lead" data-astro-cid-fxwjsgid>언제 시작하고, 단계마다 몇 번·얼마나·어떤 질감으로 먹이는지 순서대로 정리했어요.</p>  <div class="pg__line" data-astro-cid-fxwjsgid> <strong class="num" data-astro-cid-fxwjsgid>글 5편</strong> <nav class="pg__inline" aria-label="다른 주제" data-astro-cid-fxwjsgid> <span class="pg__label" data-astro-cid-fxwjsgid>다른 주제</span> <a href="/category/ingredients/" data-astro-cid-fxwjsgid>재료·영양</a> <span aria-hidden="true" data-astro-cid-fxwjsgid>·</span><a href="/category/safety/" data-astro-cid-fxwjsgid>알레르기·위생</a> <span aria-hidden="true" data-astro-cid-fxwjsgid>·</span><a href="/category/habits/" data-astro-cid-fxwjsgid>먹는 습관</a>  </nav> </div> </div> </header></main>
css
.dsx--one,.dsx{padding-top:34px}.pg__title{outline:2px dashed #c2410c;outline-offset:3px;position:relative}.pg__title::before{content:'h1 — 이 페이지에 하나뿐인 제목';position:absolute;top:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.pg__lead{margin-top:34px}

The page title is the first clue search engines and screen readers use to learn what a page is. Two titles blur which one is real; none leaves the page unnamed.

Only four components draw it: the home head (HomeHero), the post head (PostHeader), the topic and info page head (PageHead) and the 404 (NotFound). Every other component uses h2 or below. After a build, seo:audit counts titles on every page and reports any page where the count is not one, for all packs alike. The dotted outline in the demo is that title.

This is easy to get wrong when writing a pack. Do not add another h1 just to get big text; size is a matter of look, while the kind of heading (h1, h2) follows the document structure.

When to use

Think of it when choosing the heading level for a new component, or for titles inside cards and notices. If the page already has its title, use a lower level inside.

Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.