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徽标），我希望在标题中包含它（为了赋予它一些相关性和重要性），而不是{ {1}}标题。

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

h1

Answer 1

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

您可以自行测试，在HTML5 outliner中检查这两个代码段（例如，在此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规范确实不定义（第一个）h1元素特别重要，或者它应该用于＆＃34;主题＆＃34;该文件。规范定义了rank, not importance。

我认为你should use a heading for the logo如果这个徽标代表了网站（通常就是这种情况），那么它对have this as the first heading有意义（即切片根body的标题）和following sections should be in scope of it。

HTML5大纲 - 标题围绕徽标的页眉

1 个答案: