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