在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可以提供一个大纲,直接导航到该部分。
其他回答
许多网站包含如下HTML代码:<div id="nav"> <div class="header"> <div id="footer">来表示导航、页眉和页脚。所以<div>在html4中被用来定义网页的不同部分,但<div>并不意味着任何特别的东西,因此html5引入了许多语义元素,<section>是其中之一,它为屏幕阅读器、搜索引擎和浏览器等提供了足够的信息,以识别网站的不同部分。
主要的区别是如果你只使用<div>来定义网站部件。可读性较差。
如果使用语义元素而不是div标签。他们可以帮助提高你的网站的可读性,不仅对人类的其他程序(屏幕阅读器,搜索引擎等)也。我们仍然可以在语义元素中使用<div>作为容器。
<div> Vs <Section>
第一轮
<div>: HTML元素(或HTML文档划分元素)是流内容的通用容器,它本身并不代表任何东西。它可以用于对元素进行分组,以实现样式化(使用class或id属性),或者因为它们共享属性值,比如lang。只有当没有其他语义元素(如<article>或<nav>)是合适的时,才应该使用它。
<section>: HTML section元素(<section>)表示文档的通用部分,即内容的主题分组,通常带有标题。
第二轮
>:浏览器支持
<section>:浏览器支持
表中的数字指定完全支持该元素的第一个浏览器版本。
因此,div只从纯CSS或DOM的角度来看是相关的,而section也与语义相关,在不久的将来,还与搜索引擎的索引相关。
section标记为html提供了更具语义性的语法。Div是节的通用标记。 当你为适当的内容使用节标签时,它也可以用于搜索引擎优化。Section标记还使HTML解析变得容易。更多信息,请参考。http://blog.whatwg.org/is-not-just-a-semantic
在HTML5标准中,<section>元素被定义为一个相关元素块。
<div>元素被定义为一个子元素块。
注意不要过度使用section标记来替换div元素。section标记应该在正文上下文中定义一个重要区域。从语义上讲,HTML5鼓励我们这样定义文档:
< html > <头> < / >头 身体< > <标题> < /头> < >节 <标题> < / h1 > < div > < span > < / span > < / div > < div > < / div > < / >节 <页脚> < /页脚> 身体< / > < / html >
This strategy allows web robots and automated screen readers to better understand the flow of your content. This markup clearly defines where your major page content is contained. Of course, headers and footers are often common across hundreds if not thousands of pages within a website. The section tag should be limited to explain where the unique content is contained. Within the section tag, we should then continue to markup and control the content with HTML tags which are lower in the hierarchy, like h1, div, span, etc.
在大多数简单的页面中,应该只有一个section标记,而不是多个。还请考虑还有其他有趣的HTML5标签,它们与section类似。考虑在文档流中使用article、summary、aside等。如您所见,这些标记进一步增强了我们定义HTML文档主要区域的能力。