Especially because of the outline it makes sense to use h1
.
If your webpage is part of a website, each page should have a site header h1
, which contains the site title, the site logo, or both. It's important that this site header is not a child of a sectioning element (section
/article
/aside
/nav
).
So the toplevel heading for a page will always be the site heading. And the site navigation, the main content of the page, sidebars with secondary content etc. will all be "children" of that toplevel heading.
So a simple structure for a blog post page could be:
<body>
<h1><img src="logo.png" alt="John's blog"></h1>
<nav><!-- the site-wide navigation --></nav>
<article>
<h1>My first blog post</h1>
<p>…</p>
<footer><!-- this footer applies to the article only--></footer>
</article>
<footer><!-- this footer applies to the whole page (→ the site)--></footer>
</body>
This would create an outline like:
1 John's blog (→ body>h1)
1.1 untitled (→ body>nav)
1.2 My first blog post (→ body>article>h1)
If you wouldn't use the site title/logo in h1
, the page would have an untitled toplevel outline entry:
1 untitled (→ body)
1.1 untitled (→ body>nav)
1.2 My first blog post (→ body>article>h1)
And if you wouldn't use a h1
for the site title/logo and no sectioning element for your main content …
<body>
<img src="logo.png" alt="John's blog"> <!-- omitted h1 -->
<nav><!-- the site-wide navigation --></nav>
<!-- omitted article -->
<h1>My first blog post</h1>
<p>…</p>
</body>
… you’d get an outline with two top-level entries:
1 untitled (→ body)
1.1 untitled (→ body>nav)
2 My first blog post (→ body>h1)
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…