HTML 5个语义标签
HTML 5 semantic tags
我已经阅读了 W3C、WHATWG 和 MDN 上的一些语义元素,但我仍然有些不清楚。我也去了this article, on Sidebar and Aside are different!.
我有几个基本问题,或者确认我理解我所读的内容:
aside
元素不是侧边栏吗?
在HTML5中,我们可以使用语义和div
标签吗?
当没有语义标签可以使用时,div
标签在HTML5中是否可以接受(这可能与上述问题相同)?
语义 main
元素是否可以嵌入其他语义标签,例如 table
、section
、article
和 aside
,但不限于?
请记住,语义标记只是使代码更易于阅读和使页面标准化的一种方式。
这是因为之前大多数用户只会定义 divs
,然后定义 class
来描述其作用,如 nav
、footer
、header
等.
对于你的第一个问题;不,aside
元素本身并不代表 "sidebar"。它只代表与主要内容相关的内容,但它不是页面主要主题的一部分。您可以用它来包装侧边栏的内容(它本身就是一个 UI 组件),但您也可以将它用于其他用途。
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
没有问题。您可以互换使用它们,最后,大多数像 main
、section
、footer
等只是 divs
具有不同的名称,以便更容易阅读。
这一直引起很大的混乱。我是 the original specification's author - Ian Hickson - on the subject in 2009(他对 Tab Atkins Jr 的评论以粗体显示):
<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".
正确的解释。
我已经阅读了 W3C、WHATWG 和 MDN 上的一些语义元素,但我仍然有些不清楚。我也去了this article, on Sidebar and Aside are different!.
我有几个基本问题,或者确认我理解我所读的内容:
aside
元素不是侧边栏吗?在HTML5中,我们可以使用语义和
div
标签吗?当没有语义标签可以使用时,
div
标签在HTML5中是否可以接受(这可能与上述问题相同)?语义
main
元素是否可以嵌入其他语义标签,例如table
、section
、article
和aside
,但不限于?
请记住,语义标记只是使代码更易于阅读和使页面标准化的一种方式。
这是因为之前大多数用户只会定义 divs
,然后定义 class
来描述其作用,如 nav
、footer
、header
等.
对于你的第一个问题;不,aside
元素本身并不代表 "sidebar"。它只代表与主要内容相关的内容,但它不是页面主要主题的一部分。您可以用它来包装侧边栏的内容(它本身就是一个 UI 组件),但您也可以将它用于其他用途。
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
没有问题。您可以互换使用它们,最后,大多数像 main
、section
、footer
等只是 divs
具有不同的名称,以便更容易阅读。
这一直引起很大的混乱。我是 the original specification's author - Ian Hickson - on the subject in 2009(他对 Tab Atkins Jr 的评论以粗体显示):
<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".正确的解释。