html - Using <h1> on website name in HTML5

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

html - Using <h1> on website name in HTML5

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

How to properly markup the title of a site in HTML5? Usually I markup a website's name with:

<h1>
    <a href=#>Website Name</a>
</h1>

Recently I've come across with the HTML5 Document Outlining Algorithm. I have also read that it seems like marking your site's name in h1 tag don't make sense, since every page probably will have different main heading (h1), in addition to the website name.

What if let's say on Facebook, if the markup of the Facebook's logo/title is wrapped in <h1> tag. Then if every post is wrapped in <article> tags. For example:

<article class="post">
    <h5 class="post-header">
         <a href="#">Someone has shared Blah Blah's photo</a>
    </h5>
     <div class="post-body">...</div>
</article>

I think the document outline would be

Facebook

1.1 Someone has shared Blah Blah's photo

1.2 Other Posts

1.3 Other Posts

Is that okay?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

263 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T03:08:58+0000

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)

Categories

html - Using <h1> on website name in HTML5

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags