HTML层次结构。在这里，什么是“正确”的形式？

Question

让我们说我希望我的网站的标题以语义方式完成HTML5，这对SEO也有好处。什么是正确的元素层次结构？这就是我所拥有的，告诉我你是否看错了，谢谢。

<header>
    <hgroup>
        <a href="/"><h1>My Site Title</h1></a>
    </hgroup>
</header>

或者标签应该在OUTSIDE上还是内部的锚点？什么是最好的造型，一般只是语义，谢谢。

ETA：另外，请尝试深入了解，我希望更多地了解标题中的层次结构。 此外，这是假设我有更多的内容，我包括组只是为了添加问题。

Answer 1

如果您只有一个<h1>标记，则不需要<hgroup>元素，而且，可以争论将<a>放在<h1>内而不是{} oppsite，它不会影响语义，但将它放在外面确实有一些样式默认优势（例如更大的点击区域）。所以语义上正确的代码（在我看来）将是：

<header>

    <a href="/"><h1>Site Title</h1></a>

</header>

为什么没有<hgroup>？

因为<hgroup>的目的是将具有相同目的的标题组合在一起，例如：

<h1>Site Title</h1>
<h2>Longer Site Description</h2>

屏幕阅读器和搜索引擎会产生意想不到的结果，因此<hgroup>可以解决这个问题：

<hgroup>
    <h1>Site Title</h1>
    <h2>Longer Site Description</h2>
</hgroup

Answer 2

目前没有搜索引擎使用header或hgroup。 hgroup一直面临着从规范中被抛弃的威胁，并被一切所忽视。我使用它是因为我为我的帖子构建了TOC和大纲，但除非你打算自己处理它，否则就忘了它。 hgroup即使只是在你的内部有多个hn elts的情况下也是如此。 header可能值得包括，如果您担心将来的屏幕阅读器模板面向未来。

关于a外部或内部的h1，主要取决于您希望用户浏览的方式。外部的a称为块级链接，用户可以单击文本所在的整个框以进行导航; > 里面的a 意味着您必须实际点击文本本身。除此之外，没有真正的区别。

Answer 3

除了你已经被告知的所有内容，Gariety先生，我恳请你阅读HTML5验证器和“linters”。如果您对这个领域不熟悉，请先将示例页面提供给http://validator.w3.org/;你可能会学到很多东西。