html - 文章页面中的 H1 - 站点标题或文章标题?

标签 html usability accessibility semantics

在面向文章的页面(例如博客文章)中,<h1>元素(一级标题)通常用于标记:

  • 博客标题(即页面顶部通常较大的网站标题,不是 <title> 元素),或
  • 文章标题

什么是最好的选择,为什么?

对于网站所有者来说,他们可能想要向全世界大声疾呼他们的网站/博客的名称,在网站标题周围使用 1 级标题似乎是有意义的。

从您要向用户传达的内容来看,网站标题的相关性较低 - 文章内容才是您要传达的内容,所有其他网站内容都是次要的。因此使用 <h1>因为文章标题似乎是最好的。

我觉得 <h1>元素应该关注文章标题,而不是网站标题或其他内容。无论如何,这似乎都不是一个流行的约定。

例子:

  • Joel Spolsky使用 <h1>文章标题和网站标题的 anchor
  • Jeff Atwood使用没有<h1>完全<h2>文章标题和网站标题的 anchor
  • 37 Signals' SVN使用 <h1>网站标题和文章标题的 anchor

这是跨越三个站点的三种不同方法,您可能希望在这些站点中认真考虑正确的语义标记。

我认为 Joel 与 Jeff 紧随其后。我对 37Signals 人员的标记选择感到非常惊讶。

对我来说,这似乎是一个非常简单的决定:什么与文章的消费者最相关?文章标题。因此,将文章标题包装在 <h1> 中元素。完成。

我错了吗?我还缺少其他考虑因素吗?我对吗?如果是这样,为什么 ' <h1>对于文章标题的方法不是更常用?

是决定在哪里使用<h1>元素像我说的那样不变吗?还是有一些主观的考虑?

更新:感谢您到目前为止的所有回答。我真的很感激关于如何使用 <h1> 的一些角度因为文章标题而不是网站标题有利于可用性和可访问性(或者没有,视情况而定)。根据事实而不是个人猜测的答案将获得很多加分!

最佳答案

有一个W3C Quality Assurance tip关于这个主题:

<h1> is the HTML element for the first-level heading of a document:

  • If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.

  • If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the title should work in any context: Dogs - Your Guide to Pets.

关于html - 文章页面中的 H1 - 站点标题或文章标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/268475/

相关文章:

php - 除了主页 css 文件未加载到 codeigniter 中

Javascript动态添加元素

vhdl - VHDL 中的捆绑语句

javascript - 创建一个可访问的列表,其中每个 li 元素内部都有一些复杂的内容

css - DIV内容移动需要保持右对齐

html - Chrome : Strange scrollbar behaviour when adding dynamic content

ms-access - SSRS 报表生成器 - 来自经验的问题?

date - 哪个更有用,输出相对于现在或相对于主要操作的时间点的日期?

css - 使用 aria-label 作为样式选择器的最佳实践

ios - 当用户使用 iOS Swift 从 Whats up、Skype 等第三方应用程序复制消息时,我们如何获取文本?