HTML 5个语义标签

HTML 5 semantic tags

我已经阅读了 W3C、WHATWG 和 MDN 上的一些语义元素,但我仍然有些不清楚。我也去了this article, on Sidebar and Aside are different!.

我有几个基本问​​题,或者确认我理解我所读的内容:

请记住,语义标记只是使代码更易于阅读和使页面标准化的一种方式。

这是因为之前大多数用户只会定义 divs,然后定义 class 来描述其作用,如 navfooterheader 等.

对于你的第一个问题;不,aside 元素本身并不代表 "sidebar"。它只代表与主要内容相关的内容,但它不是页面主要主题的一部分。您可以用它来包装侧边栏的内容(它本身就是一个 UI 组件),但您也可以将它用于其他用途。

来自the HTML5 specification

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

关于你的第二个问题。

是的,在 HTML5 中,您可以随时使用 divs 或语义标签,但我们鼓励您尽可能使用语义;如果没有其他标记可用于定义文档的一部分,则使用 div 没有问题。您可以互换使用它们,最后,大多数像 mainsectionfooter 等只是 divs 具有不同的名称,以便更容易阅读。

这一直引起很大的混乱。我是 the original specification's author - Ian Hickson - on the subject in 2009(他对 Tab Atkins Jr 的评论以粗体显示):

  1. <aside> is similarly badly named. The name itself and the description of it as "sidebar" content apparently leads almost everyone astray into thinking it's for the ubiquitous website sidebar.

是。

An informal survey showed that at least 3 people in that chat (me included) immediately tried to misuse <aside> in precisely this way when we first heard of it, and when I discussed the issue with another friend mid-chat his response was roughly "what's confusing about them? footer is for site footer and aside is for side panels".

正确的解释。