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