假设我希望我的网站标题以一种对 SEO 也有好处的语义方式使用 HTML5 完成。元素的正确层次结构是什么？这就是我所得到的，如果您发现任何问题，请告诉我，谢谢。
<header>
<hgroup>
<a href="/"><h1>My Site Title</h1></a>
</hgroup>
</header>
或者标签应该在外面而锚点在里面？什么是最好的样式，一般来说只是语义，谢谢。
ETA：另外，请尝试深入了解，我想更多地了解标题中的层次结构。 另外，这是假设我在那里有更多内容，我包括组只是为了添加到问题中。
【问题讨论】：
目前没有搜索引擎使用header 或hgroup。 hgroup 一直面临被从规范中删除的威胁，并且被所有东西忽略。我使用它是因为我为我的帖子构建 TOC 和大纲，但除非你打算自己处理它，否则别管它。 hgroup 即使在其中有多个 hn elts 时，它也只有在那里指定。 header 可能值得加入，如果您担心您的模板会面向未来的屏幕阅读器进行验证。
关于a 是在h1 的外部还是内部，这主要取决于您希望用户如何浏览。外面的a称为块级链接，用户可以点击文本所在的整个框进行导航； outside inside 上的a 表示您必须实际点击文本本身。除此之外，没有真正的区别。
【讨论】：
display:block。 Chrome 之后就可以正常工作了。
a，对吧？
如果您只有一个<h1> 标签，则不需要<hgroup> 元素，另外，有人可能会争论将<a> 放在<h1> 而不是对面，这不会影响语义，但将其放在外部确实具有一些样式默认优势（例如更大的点击区域）。所以语义上正确的代码（在我看来）是：
<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
【讨论】：
display: block; 并使其填充 h1 元素。但是，是的，<a><h1> 与<h1><a> 具有相同的语义。我会在我的回答中包括这个:)
Griety 先生，除了您已经被告知的所有内容外，我还敦促您阅读 HTML5 验证器和“linter”。如果您不熟悉这个领域，请先向http://validator.w3.org/ 提供示例页面；你可能会学到很多东西。
【讨论】：