html - 哪个在语义上更好 - <aside> 或 &lt;footer&gt; 对于网站的 'extended footer' ?

标签 html semantic-markup

对于站点“扩展页脚”而言,这在语义上是更好的标记 <aside><footer>

“扩展页脚”指的是类似于 this site 上的扩展页脚之类的内容(包含联系方式和开放时间,而不是最底部包含版权声明的“真实”页脚)。 “扩展页脚”的内容将是一般性的、站点范围的内容,并且与站点页面的内容没有具体关系。

根据spec quoted in HTML5Doctor :

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

我倾向于实现类似的东西

<footer>
    <div id="extended-footer"> <!-- Sitemap, latest posts, contact details, etc. --> </div>
    <div id="bottom-footer"> <!-- Copyright notice etc. --> </div>
</footer>

但是,我注意到 HTML5Doctor site本身使用类似下面的片段:

<aside id="extended-footer"> ... </aside>
<footer> <!-- similar to id-footer --> <footer>

我确实注意到 HTMLDoctor 的“扩展页脚”似乎与实际文章/内容有某种联系(即通过“相关帖子”部分),因此可能可以实现为 <footer><main> 内.

最佳答案

HTML5 CR 定义了 footer元素代表,好吧,一个页脚。除此以外,它没有给出真正的定义,尽管它用一些示例描述了页脚。然而,在字里行间,我认为我们可以看到两个“页脚”概念交织在一起:页脚作为附加信息,属于页面内容本身,但由于其性质而引出;页脚作为样板出现在网站的所有或大部分页面上,可能会进行一些特定于页面的修改。

无论哪种方式,社交媒体按钮,例如,似乎属于 aside元素,因为它们实际上只是与(站点或页面的)内容“切向相关”。然而,它们通常在所有页面上重复出现,因此在逻辑上属于“样板”意义上的页脚的一部分。

解决方案看起来很简单:使用嵌套在 footer 元素内的 aside 元素,例如

<footer>
  © 2013 ACME • <a href=map.html>Sitemap</a>
  <aside><a href="https://www.facebook.com/acme">
  <img src=fb.png alt=Facebook></a></aside>
</footer>

在这种情况下选择标记几乎没有实际影响,至少目前如此。浏览器、搜索引擎和其他相关软件不会以任何特定方式处理 footeraside 和友元。有一天他们可能会,然后在 aside 元素中包含“切向相关”的内容和在(header 和) 中包含“样板”内容可能会很重要footer 元素(例如,这样使用屏幕阅读器的人可以在听到一次网站样板后轻松跳过)。

附言“语义更好”没有明确定义的含义,即它在语义上是模糊的,即使不是空洞的。大多数情况下,在 HTML 上下文中,“语义”实际上意味着“结构”,即与页面结构相关,而不是事物的含义。在实践中,问题似乎是:我们应该如何解释 HTML5 草稿(和/或 WHATWG HTML)中的结构性描述,有时甚至是学术性描述?

关于html - 哪个在语义上更好 - <aside> 或 &lt;footer&gt; 对于网站的 'extended footer' ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18973634/

相关文章:

没有主要 &lt;header&gt; 的 HTML 5 页面?

html - <main> 元素上是否需要角色 ="main"?

javascript - 获取网站的主要颜色

javascript - 在 div 上聚焦并触发回车键

html - &lt;header&gt; 和 &lt;footer&gt; 实际上是做什么的?

html - 是否有比 w3c 验证器更好的 html 标准验证方法?

html - 消息的语义 HTML

html - infobubble 中 div 之外的图像

javascript - HTML 元素的本地 id-s

javascript - 电话号码输入 - 当前已满时专注于下一个输入