【问题标题】:HTML5: what to do when the page header is equal to the article header?HTML5:当页眉等于文章页眉时怎么办?
【发布时间】:2013-10-18 15:52:24
【问题描述】:

自从引入 HTML5 以来,这一直困扰着我:

在我们的某些设计中,页眉实际上是您正在查看的文章的标题,这会导致大纲中缺少标题(因为 h1 在文章中,而不是正文的直接子项)。

应对这种情况有什么好的做法?

我不喜欢简单地在正文中隐藏一个 h1,因为这不是页面排名的最佳主意。

我知道理想的设计会考虑到这些因素,但有时(作为开发人员)这不是你的选择。

示例标记:http://codepen.io/TheDutchCoder/pen/DuKok

【问题讨论】:

  • 需要一个例子哈哈
  • 给你,这是一个非常简单的例子,但它会做:codepen.io/TheDutchCoder/pen/DuKok
  • 好的,我现在可以更好地理解您的观点了。您能否说明一下您想要实现的大纲?您可以使用these 作为起点。
  • 在这种情况下,您拥有的第三个轮廓将是最佳匹配,至少这是最有意义的。第二个肯定出局了(它错过了一个标题)。第一个是不可取的,但至少它有一个有效的轮廓。

标签: html header semantics outline


【解决方案1】:

来自HTML draft

当页面的主要内容(即不包括页脚、页眉、导航块和侧边栏)都是一个独立的组合时,应使用 ma​​in 元素和内容也可以用文章标记,但在这种情况下它在技术上是多余的(因为不言而喻,该页面是单个组合,因为它是单个文档)。

据此,您应该删除article 容器并仅使用main

更新(2013 年 11 月 8 日)

好吧,我知道没有标题的部分没有吸引力,但目前(HTML 主草案,2013 年 11 月)没有任何转义:<body> 元素是 分节根,总是开始一个部分并显示在大纲中。大纲如:

The main article title
  └── Related articles
Latest News
Latest Blog Posts

目前的大纲算法根本不可能以符合 HTML5 的方式使用(您需要将兄弟姐妹添加到 <body>)。

既然您正在考虑向 W3C 提出建议,这里有一个想法:也许文档的大纲应该默认为 <title>

【讨论】:

  • 这在一定程度上是有道理的。当您有与主要内容相关的备用元素和与一般页面相关的备用元素时,它会变得复杂。例如:正文 > 旁边 |主要>旁边和|文章>抛开一切承担不同的关系。虽然我不确定main和aside之间的隐含关系,但它仍然是一个实际问题。
  • 澄清一下:删除一个主要元素的所有文章和部分可能是一个非常简单的文档结构中的解决方案,但在一个侧边栏中有很多相关内容的典型网站中,我不认为这是是一个很好的解决方案。我不喜欢 HTML5 中隐含的分段,它强制在某些情况下可能不“存在”的东西。
  • 我不确定我是否理解您的担忧。您能否在问题中添加一些您想讨论的页面结构的明确示例?
  • 我更新了 Codepen 链接以反映我在说什么。这是一个非常基本的设置,但却是一个有效的用例。基本上它是一个需要标题(问题)的页面,它有相关的内容(旁白“最新消息”和“最新博客文章”)。然后它显示一篇文章(理想情况下是我们的页面标题,但文章的隐含部分阻止了这一点),其中也有相关内容(旁边的“相关文章”)。由于“主要”元素没有对内容进行分段,因此您最终会得到所有旁白都具有相同的“权重”,这是不正确的(它们并不都与主要内容相关)
猜你喜欢
  • 1970-01-01
  • 2022-06-14
  • 2014-02-17
  • 2020-01-20
  • 2016-04-12
  • 1970-01-01
  • 2018-03-12
  • 2011-06-17
  • 1970-01-01
相关资源
最近更新 更多