在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可以提供一个大纲,直接导航到该部分。
其他回答
使用<section>可能更整洁,有助于屏幕阅读器和SEO,而<div>的字节更小,打字更快
总的来说差别很小。
另外,不建议将<section>放在<section>中,而是将<div>放在<section>中
<节> < / >节
元素的泛型部分 文档,即内容的主题分组,通常带有 标题。每个<section>都应该被标识,通常包括 标题(<h1>-<h6>元素)作为<section>的子元素 元素。详情请按以下连结。
引用:
http://www.w3schools.com/tags/tag_section.asp https://developer.mozilla.org/en/docs/Web/HTML/Element/section
<div></div>
HTML <div>元素(或HTML文档分区元素)是 流内容的通用容器,它本身不是 代表任何东西。它可用于对元素进行样式化分组 目的(使用class或id属性),或者因为它们共享 属性值,例如lang。只有在没有其他方法的情况下才可以使用 语义元素(如<article>或<nav>)是合适的。
引用: ——http://www.w3schools.com/tags/tag_div.asp ——https://developer.mozilla.org/en/docs/Web/HTML/Element/div
这里有一些链接,更多地讨论了它们之间的区别:
http://html5doctor.com/avoiding-common-html5-mistakes/ https://teamtreehouse.com/community/use-div-or-section-element http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm
<div> -我们都知道并喜欢的通用流容器。它是一个块级元素,没有额外的语义含义(W3C:Markup, WhatWG)
<section> -通用文档或应用程序部分。A通常有一个标题(标题),也可能有一个页脚。它是一大块相关内容,比如一篇长文章的一个小节,页面的一个主要部分(比如主页上的新闻部分),或者web应用的标签界面中的一个页面。(W3C:标记,WhatWG)
我的建议: Div:使用较低版本(我认为4.01仍然)HTML元素(许多设计师处理)。 Section:最近出现的(html5) HTML元素。
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可以提供一个大纲,直接导航到该部分。
推荐文章
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?