了解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日編輯