HTML5 大纲 – 页面 header 带有围绕徽标的标题

Question

我一直想知道在我网站上的徽标周围使用标题标签的最佳做法是什么，尤其是 HTML5 分段标签。

我在许多网站和论坛上了解到，如果我想在我的徽标周围添加标题，我应该执行以下操作：

<!DOCTYPE html>
<html>
    [...]
    <body>
        <div id="outer-wrapper">
            <header id="header" class="main-header clearfix">
                <h1>
                    <img src="logo" src="[...]" alt="text goes here" />
                </h1>
            </header>
            <div id="inner-wrapper">
                [...]
            </div>
        </div>
    </body>
</html>

但是现在，我网站上的每个页面都将徽标的 alt 属性中指定的文本作为其主要标题，我可以想象，这并不理想。我的意思是，H1 标签旨在提供 «文档的主要主题»，但大多数时候不是我在徽标的 alt 标签上指定的文本。
但是，如果徽标的 alt 标签包含公司名称（因为它是 comapanys 徽标），我希望将它放在标题中（以赋予它一些相关性和重要性），而不是 h1标题。

您认为以下是解决此问题的有效方法：

<!DOCTYPE html>
<html>
    [...]
    <body>
        <div id="outer-wrapper">
            <header id="header" class="main-header clearfix">
                <h2>
                    <img src="logo" src="[...]" alt="text goes here" />
                </h2>
            </header>
            <div id="inner-wrapper">
                <article>
                    <h1>Main topic</h1>
                </article>
            </div>
        </div>
    </body>
</html>

Answer 1

两个片段在语义上是相同的。如果使用分段元素，标题排名通常（但不总是）不再重要。

你可以自己测试一下，检查一下HTML5 outliner (e.g., in this online demo中的这两个片段：

<body>
  <h1>document heading</h1>
  <article>
    <h2>main content heading</h2>
  </article>
</body>

<body>
  <h2>document heading</h2>
  <article>
    <h1>main content heading</h1>
  </article>
</body>

他们产生相同的轮廓：

1. document heading
   1. main content heading

但是，HTML5 规范 encourages 作者使用正确排名的标题元素，因此您应该坚持使用第一个片段。
HTML5 规范确实 not 定义（第一个）h1 元素特别重要，或者它应该用于 "main topic"文档。规范定义了 rank, not importance.

我觉得你should use a heading for the logo if this logo represents the site (which is typically the case), and it makes sense to have this as the first heading (i.e., the heading of the sectioning root body), and the following sections should be in scope of it.

HTML5 大纲 – 页面 header 带有围绕徽标的标题

HTML5 outline – page header with heading arround the logo

html

seo

semantic-markup

graphical-logo

html-heading