<div>和<部分>有什么区别?

HTML中的<section><div>有什么区别?
我们不是在这两种情况下定义部分吗?

754793 次浏览

<section>标记了部分<div>标记了一个没有关联语义学的泛型块。

节标记为html提供了更语义化的语法。div是节的通用标记。当您为适当的内容使用节标签时,它也可以用于搜索引擎优化。节标签还使html解析变得容易。有关更多信息,请参阅。http://blog.whatwg.org/is-not-just-a-semantic

<section>意味着里面的内容是分组的(即与单个主题相关),并且应该显示为页面大纲中的条目。

<div>,另一方面,并没有传达任何意义,除了在其classlangtitle属性中找到的任何内容。

所以没有:使用<div>并不定义超文本标记语言中的节。

从规范:

<section>

<section>元素表示文档或应用程序的通用部分。在这种情况下,部分是内容的主题分组。每个section都应该被标识,通常通过包含一个标题(h1-h6元素)作为<section>元素的子元素。

例如章节、选项卡对话框中的各种选项卡式页面或论文的编号部分。网站的主页可以分为介绍、新闻和联系信息等部分。

<section>元素不是泛型容器元素。当仅出于样式目的或方便脚本编写而需要元素时,鼓励作者改用<div>元素。一般规则是,只有当元素的内容在文档大纲中显式列出时,<section>元素才合适。

https://www.w3.org/TR/html/sections.html#the-section-element

<div>

<div>元素没有任何特殊含义。它代表其子元素。它可以与classlangtitle属性一起使用,以标记一组连续元素的共同语义学。

备注:强烈建议作者在没有其他合适元素时将<div>元素视为最后手段。使用更合适的元素而不是<div>元素可以提高读者的可访问性,并使作者更容易获得可运维性。

https://www.w3.org/TR/html/grouping-content.html#the-div-element

部分在辅助技术的地标导航中最相关。要出现在文档大纲或地标列表中,它们需要一个名称,可以通过aria-labelaria-labelledbytitle分配:

<section aria-labelledby="s3-h2"><h2 id="s3-h2">Introduction</h2>…

例如,Mac上的Voiceover可以提供直接导航到该部分的大纲。

<div>-我们都知道和喜爱的通用流容器。它是一个没有额外语义含义的块级元素(W3C:标记、WhatWG)

<section>-通用文档或应用程序部分。A通常有一个标题(title),也可能有一个页脚。它是一大块相关内容,比如长文章的一个小节,页面的主要部分(例如主页上的新闻部分),或者Web应用程序选项卡式界面中的页面。(W3C:标记,WhatWG)

我的建议:div:使用较低版本(我认为4.01仍然)html元素(很多设计师处理)。部分:最近即将到来(html5)html元素。

只是观察没有发现任何留档来证实这一点

如果一个节包含另一个节,则内部节中的h1标题以比外部节中的h1标题更小的字体显示。当使用div而不是节时,内部div h1头被diplay为h1。

<section><h1>Level1</h1>some text<section><h1>Level2</h1>some more text</section></section>

Level2-标题以比Level1-标题更小的字体显示。

当使用css为h1标题着色时,内部h1也被着色(表现为常规h1)。这与Firefox 18,IE 10和Chrome28中的行为相同。

<div> Vs <Section>

第一轮

#0超文本标记语言元素(或超文本标记语言文档划分元素)是流内容的通用容器,它本身并不表示任何内容。它可用于为样式目的(使用class或id属性)对元素进行分组,或者因为它们共享属性值,例如lang。仅当没有其他语义元素(例如<article><nav>)合适时才应使用它。

#0超文本标记语言部分元素(<section>)表示文档的通用部分,即内容的主题分组,通常带有标题。


第二轮

#0浏览器支持在此处输入图片描述

#0浏览器支持

表中的数字指定完全支持该元素的第一个浏览器版本。在此处输入图片描述

在这种情况下,div仅从纯CSS或DOM的角度相关,而部分也与语义学相关,并且在不久的将来与搜索引擎索引相关。

<section>标签定义文档中的部分,例如章节、页眉、页脚或文档的任何其他部分。

鉴于:

<div>标记定义了超文本标记语言文档中的一个部分。

<div>标签用于对块元素进行分组以使用CSS格式化它们。

在HTML5标准中,<section>元素被定义为相关元素的块。

<div>元素被定义为子元素块。

注意不要过度使用部分标签来替代div元素。部分标签应该在身体的上下文中定义一个重要的区域。从语义上讲,HTML5鼓励我们将文档定义如下:

<html><head></head><body><header></header><section><h1></h1><div><span></span></div><div></div></section><footer></footer></body></html>

这种策略允许网络机器人和自动屏幕阅读器更好地了解内容的流程。这种标记清楚地定义了您的主要页面内容包含的位置。当然,页眉和页脚通常在网站内的数百甚至数千个页面中很常见。部分标签应仅限于解释包含唯一内容的位置。在部分标签中,我们应该继续使用层次较低的超文本标记语言标记和控制内容,例如h1div跨度等。

在大多数简单的页面中,应该只有一个部分标签,而不是多个。还请考虑还有其他有趣的HTML5标签与部分类似。考虑在文档流中使用文章摘要除了和其他标签。如您所见,这些标签进一步增强了我们定义超文本标记语言文档主要区域的能力。

<section></section>

超文本标记语言<section>元素表示文档,即内容的主题分组,通常具有每个<section>都应该被标识,通常包括标题(<h1>-<h6>元素)作为<section>的子元素元素。详情请点击链接。

参考文献:


<div></div>

超文本标记语言<div>元素(或超文本标记语言文档划分元素)是流内容的通用容器,它本身不表示任何东西。它可用于对样式元素进行分组目的(使用class或id属性),或者因为它们共享属性值,例如lang。它应该仅在没有其他语义元素(例如<article><nav>)是合适的。

参考资料:-http://www.w3schools.com/tags/tag_div.asp-https://developer.mozilla.org/en/docs/Web/HTML/Element/div


以下是一些链接,更多地讨论它们之间的差异:

使用<section>可能是整洁,帮助屏幕阅读器seo,而<div>字节较小打字更快

总的来说差别不大。

此外,不建议将<section>放在<section>中,而是将<div>放在<section>

以下是我如何在Web应用程序的情况下区分几个最近的html5元素的提示(纯粹是主观的)。

<section>标记图形用户交互界面中的小部件,而<div>是小部件组件的容器,例如容器中的按钮和标签等。

<article>组共享目的的小部件。

<header>是标题和菜单栏。

<footer>是状态栏。

许多网站包含超文本标记语言代码,如:<div id="nav"> <div class="header"> <div id="footer">表示导航,页眉和页脚。因此,<div>用于在html4中定义网页的不同部分,但<div>并不意味着任何特定的内容,因此html5引入了许多语义元素<section>是其中之一,它为屏幕阅读器,搜索引擎和浏览器等提供足够的信息来识别网站的不同部分。

主要的区别是,如果你只使用<div>来定义网站部件,那么它的可读性就会降低。

如果你使用语义元素而不是div tag.它们可以帮助提高你的网站的易读性,不仅对人类的其他程序(屏幕阅读器,搜索引擎等)也是如此。