在HTML中<section>和<div>之间有什么区别?我们不是在这两种情况下都定义了节吗?
当前回答
<section>意味着里面的内容是分组的(即与单个主题相关),并且应该作为页面大纲中的一个条目出现。
<div>,另一方面,除了在它的class、lang和title属性中找到的任何含义之外,没有传达任何含义。
所以不:使用<div>没有在HTML中定义一个节。
来自规范:
< >节
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information. ... The <section> element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element instead. A general rule is that the <section> element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
(https://www.w3.org/TR/html/sections.html # the-section-element)
< div >
<div>元素没有任何特殊含义。它代表它的子结点。它可以与class、lang和title属性一起使用,以标记一组连续元素的公共语义。 注意:强烈建议作者将<div>元素视为没有其他合适元素时的最后手段。使用更合适的元素,而不是<div>元素,可以使读者更好地访问,并且使作者更容易维护。
(https://www.w3.org/TR/html/grouping-content.html # div元素)
部分是最相关的地标导航辅助技术。要出现在文档大纲或地标列表中,它们需要一个名称,可以通过aria-label, aria- labledby或title来分配:
<section aria-labelledby="s3-h2">
<h2 id="s3-h2">Introduction</h2>
…
例如,Mac上的VoiceOver可以提供一个大纲,直接导航到该部分。
其他回答
在HTML5标准中,<section>元素被定义为一个相关元素块。
<div>元素被定义为一个子元素块。
<section>标记一个section, <div>标记一个没有关联语义的泛型块。
许多网站包含如下HTML代码:<div id="nav"> <div class="header"> <div id="footer">来表示导航、页眉和页脚。所以<div>在html4中被用来定义网页的不同部分,但<div>并不意味着任何特别的东西,因此html5引入了许多语义元素,<section>是其中之一,它为屏幕阅读器、搜索引擎和浏览器等提供了足够的信息,以识别网站的不同部分。
主要的区别是如果你只使用<div>来定义网站部件。可读性较差。
如果使用语义元素而不是div标签。他们可以帮助提高你的网站的可读性,不仅对人类的其他程序(屏幕阅读器,搜索引擎等)也。我们仍然可以在语义元素中使用<div>作为容器。
section标记为html提供了更具语义性的语法。Div是节的通用标记。 当你为适当的内容使用节标签时,它也可以用于搜索引擎优化。Section标记还使HTML解析变得容易。更多信息,请参考。http://blog.whatwg.org/is-not-just-a-semantic
<section>意味着里面的内容是分组的(即与单个主题相关),并且应该作为页面大纲中的一个条目出现。
<div>,另一方面,除了在它的class、lang和title属性中找到的任何含义之外,没有传达任何含义。
所以不:使用<div>没有在HTML中定义一个节。
来自规范:
< >节
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information. ... The <section> element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element instead. A general rule is that the <section> element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
(https://www.w3.org/TR/html/sections.html # the-section-element)
< div >
<div>元素没有任何特殊含义。它代表它的子结点。它可以与class、lang和title属性一起使用,以标记一组连续元素的公共语义。 注意:强烈建议作者将<div>元素视为没有其他合适元素时的最后手段。使用更合适的元素,而不是<div>元素,可以使读者更好地访问,并且使作者更容易维护。
(https://www.w3.org/TR/html/grouping-content.html # div元素)
部分是最相关的地标导航辅助技术。要出现在文档大纲或地标列表中,它们需要一个名称,可以通过aria-label, aria- labledby或title来分配:
<section aria-labelledby="s3-h2">
<h2 id="s3-h2">Introduction</h2>
…
例如,Mac上的VoiceOver可以提供一个大纲,直接导航到该部分。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击