HTML 层次结构。这里,什么是“正确的”?形式?
假设我希望网站的标题以 HTML5 的语义方式完成,这也有利于 SEO。正确的元素层次结构是什么?以上就是我的经验,如果有什么不对的地方请告诉我,谢谢。
<header>
<hgroup>
<a href="/"><h1>My Site Title</h1></a>
</hgroup>
</header>
或者标签应该在外侧,锚点在内侧?什么是最好的样式,并且一般来说只是语义,谢谢。
ETA:另外,尝试深入了解,我很想了解更多有关标头中的层次结构的信息。 另外,假设我在那里有更多内容,我加入小组只是为了添加问题。
Lets say I want the header of my site done with HTML5 in a semantic way that will also be good for SEO. What's the correct hierarchy of elements? Here's what I've got, tell me if you see anything wrong, thanks.
<header>
<hgroup>
<a href="/"><h1>My Site Title</h1></a>
</hgroup>
</header>
Or should the tag be on the OUTSIDE and the anchor on the inside? What's best for styling, and just being semantic in general, thanks.
ETA: Also, try and go in depth, I'd love to understand more about hierarchy in headers.
Also, this is assuming I have more content in there, I included group just to add to the question.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
目前没有搜索引擎使用
header
或hgroup
。hgroup
一直面临着被从规范中删除的威胁,并且被一切事物所忽略。我使用它是因为我为我的帖子构建目录和大纲,但除非您打算自己用它进行处理,否则就别管它了。hgroup
即使按照指定,只有在其中有多个hn
elt 时才会出现。如果您担心模板是否适合未来的屏幕阅读器,则可能值得包含header
。关于
a
位于h1
的外部还是内部,这主要取决于您希望用户如何浏览。外面的a
称为块级链接,用户可以点击文本所在的整个框进行导航;outsideinside 上的a
表示您必须实际单击文本本身。除此之外,没有什么真正的区别。No search engine uses
header
orhgroup
at the moment.hgroup
is under constant threat of being dropped from the spec and is ignored by everything. I use it because I build TOCs and outlines for my posts, but unless you are planning to do processing with it yourself, forget about it.hgroup
even as specc'ed it only there if you have multiplehn
elts inside it.header
might be worth including if you are worried about future-proofing your template for future screen-readers.Regarding
a
on the outside or inside of theh1
, that depends mainly on how you want your users to browse.a
on the outside is called a block level link, and users can click on the entire box the text is in to navigate;a
on theoutsideinside means you have to actually click on the text itself. Apart from that, no real difference.如果您只有一个
标记,则不需要
元素,此外,人们可能会争论是否将
<; a>
在内部而不是在对面,它不会影响语义,但将其放在外部确实有一些样式默认优势(例如更大的点击区域)。因此,语义上正确的代码(在我看来)将是:
为什么没有
?
因为
的目的是将具有相同目的的标头分组在一起,例如:
会给屏幕阅读器和搜索引擎产生意外的结果,所以
是为了解决这个问题:
If you only have one
<h1>
tag, you don't need the<hgroup>
element, plus, one could argue about placing the<a>
inside the<h1>
rather then the oppsite, it won't affect semantics, but putting it outside does have some styling default advantages (such as greater click area). So the semantically correct code (in my opinion) would be:Why no
<hgroup>
?Because
<hgroup>
's purpose is to group together headers which serve the same purpose, for example:Would yield unexpected results for screen readers and search engines, so
<hgroup>
is here to solve that issue:Gariety 先生,除了您已经知道的一切之外,我还强烈建议您阅读有关 HTML5 验证器和“linter”的内容。如果您对这个领域不熟悉,请首先向 http://validator.w3.org/;你可能会学到很多东西。
Along with all you've already been told, Mr. Gariety, I urge you to read up on HTML5 validators and "linters". If this area is new to you, start by feeding a sample page to http://validator.w3.org/; you're likely to learn a lot.