几年前，当HTML5进入场景时，它为语言添加了一堆新的分段元素，包括部分 元件。 HTML5引入的大多数新元素都有明确的用途。例如，该元素用于定义网页的文章和主要部分，该元素用于定义对页面其余部分不重要的相关内容，标题，导航和页脚非常明显。新增的部分 然而，元素不太清楚。
很多人都相信HTML元素 部分 并且实际上是相同的东西 - 用于在网页上包含内容的通用容器元素。然而，现实是，这两个元素虽然都是容器元素，但却不是通用的。有两个具体的理由同时使用 部分 元素和 DIV 元素 - 本文将解释这些差异。
部门和部门
该 部分 element被定义为网页或网站的语义部分，不是另一种更具体的类型（如文章或旁边）。当我在标记页面的一个不同部分时，我倾向于使用这个元素 - 一个可以批量移动并在其他页面或部分网站上使用的部分。如果您愿意，它是一段独特的内容或内容的“部分”。
相比之下，你使用 DIV 您要分割的页面部分的元素，但用于语义以外的目的。如果我这样做纯粹是为了给自己一个与CSS一起使用的“钩子”，我会在一个分区中包含一个内容区域。它可能不是基于语义的内容的独特部分，但是我正在指示为了实现我想要的页面布局。
它是关于语义的全部
这是一个难以理解的概念，但唯一的区别是 DIV 元素和 部分 元素是语义。换句话说，就是这样 含义 您正在划分的代码部分。
包含在内的任何内容 DIV 元素没有任何固有的含义。它最适用于以下内容：
- CSS样式的CSS样式和钩子
- 布局容器
- JavaScript钩子
- HTML的划分使其更易于阅读
该 DIV element曾经是我们添加钩子以设置文档样式并创建列和花哨布局的唯一元素。正因为如此，我们最终得到了充满了各种各样的HTML DIV 元素 - 网页设计师可能称之为“divitis”。甚至有WYSIWYG编辑使用过 DIV 元素独家。我实际上遇到过使用HTML的HTML DIV 元素而不是段落！
使用HTML5，我们可以开始使用切片元素来创建更多语义描述性文档（用于导航和描述性图形等），还可以定义这些元素的样式。
什么是SPAN元素？
大多数人在想到的时候想到的另一个因素 DIV 元素是元素。这个元素就像 DIV，不是语义元素。它是一个内联元素，可用于为内联的内容块（通常是文本）添加样式和脚本的钩子。从这个意义上说，它就像是 DIV 元素，只有内联而不是块元素。在某些方面，可能更容易想到 DIV 作为块级 跨度 元素并以与您相同的方式使用它 跨度 仅适用于整个HTML内容块。
HTML5中没有类似的内联切片元素。
适用于Internet Explorer的旧版本
即使您支持不能可靠地识别HTML5的显着较旧版本的IE（如IE 8及更低版本），您也不应该害怕使用语义正确的HTML标记。语义将帮助您和您的团队将来管理页面（因为您知道该部分是文章，如果它被包围 文章 元件）。此外，识别这些标签的浏览器将更好地支持它们。
您仍然可以在Internet Explorer中使用HTML5语义分段元素，您只需要添加脚本以及可能的一些内容 DIV 使他们能够将标签识别为HTML的元素。
使用DIV和SECTION元素
如果您正确使用它们，则可以同时使用它们 DIV 和 部分 元素在一个有效的HTML5文档中。正如您在本文中所见，您使用的是 部分 元素定义内容的语义离散部分，并使用 DIV element作为CSS和JavaScript的钩子，以及定义没有语义含义的布局。
Jennifer Krynin的原创文章。由Jeremy Girard于2017年3月15日编辑
