Using

on website name in HTML5

2019-01-15 18:24发布

站内问答 / Html5
591 2 6

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

  1. Facebook

    1.1 Someone has shared Blah Blah's photo

    1.2 Other Posts

    1.3 Other Posts

Is that okay?

标签： html5 seo
举报
2条回答
迷人小祖宗
2楼-- · 2019-01-15 18:46

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)
查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
3楼-- · 2019-01-15 19:05

I'd put that in a header element:

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

Like this:

<header>
  <a href="/"><img src="..." alt="Foo Company Home"></a>
</header>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)