為什麼選擇HTML5語意化標籤而非div標籤？

Question

為什麼要使用HTML5語意化標籤，如headers、section、nav與、nav與articlenav與article< code>，而不是簡單地使用div並將其設定為首選的css？

我創建了一個網頁並使用了這些標籤，但它們與div並沒有什麼區別。它們的主要目的是什麼？

它們只是在使用時提供適當的標籤名稱，還是還有其他作用？

請解釋一下。我查閱了許多網站，但沒有找到這些基礎知識。

Answer 1

在HTML5Doctor上有一篇關於HTML5語意的不錯的文章。

語意一直是HTML的一部分，以某種形式存在。它幫助你理解頁面上發生的事情。

以前，當幾乎所有東西都使用<div>時，我們仍然透過給它一個「語義」類別名稱或id名來實現語義。

這些標籤有助於正確結構化和理解佈局。

如果你這樣做：

<div class="nav"></div>

與

<nav></nav>

或

<div class="sidebar"></div>

與

<aside></aside>

都沒有問題，但後者對於你以及爬蟲、閱讀器等提供更好的可讀性。

Answer 2

牛津字典如下所述：

正如它們的名稱所示，這些標籤旨在提高您的網頁的含義。良好的語義在文件的自動處理中起著重要作用。這種自動處理比您意識到的要頻繁 - 搜尋引擎排名的每個網站都是從所有網站的自動處理中派生出來的。

如果您訪問一個（設計良好的）網頁，作為人類讀者，您可以立即（視覺上）區分所有頁面元素，更重要的是理解內容。在左上方，您可以看到公司徽標，旁邊是網站導航，有一個搜尋欄和一些關於公司的文本，一個可以購買的產品連結和底部的法律免責聲明。

然而，機器是愚蠢的，無法做到這一點： 看著與您相同的頁面，網路爬蟲只會看到一個圖像，一系列錨點標籤，一個文字節點，一個輸入欄位和一個帶有連結的圖像。底部還有另一個文字節點。 現在，他們應該如何知道您打算將文件的哪個部分作為導航或主要文章，或者一些不太重要的腳註？他們可以透過使用一些常見標準來分析您的文件結構來猜測特定元素的提示。 例如，內部連結的

清單很可能是某種頁面導航，文件末尾的文字是對日常觀眾來說必要但不太重要的內容（法律免責聲明）。

現在想像一下，如果使用的是一個普通的

而不是

元素 - 機器立即知道這個元素的目的是什麼：

// 机器：好的，这个结构看起来可能是一个导航元素？
<div><ul><li><a href="internal_link">...</div>

// 机器：啊，一个导航元素！
<nav><ul><li><a>...</nav>

現在，

標籤內的文字 - 這顯然是頁面上最重要的資訊！在左邊，那個文字節點，圖像和錨節點都屬於同一組，因為它們都在

標籤中分組，而在底部有一些文字在

元素中（他們仍然不知道該文字的含義，但現在他們可以推斷它是某種細則）。

範例：
作為使用者（在不看實際標記的情況下閱讀頁面），您不在乎一個元素是包含在還是標籤中。在大多數瀏覽器中，這兩個標籤將呈現相同 - 為斜體文字 - 只要它在周圍的文字之間突出顯示，它就能達到其目的。

然而，從語意角度來看有很大的差異：
意味著斜體 - 它只是對瀏覽器呈現它（斜體）的一種提示，不一定包含更深層的語義資訊。
意味著強調 - 它表示重要的訊息。現在，瀏覽器不再受限於斜體指令，而可以以斜體、粗體、下劃線或不同顏色呈現...對於視障人士，螢幕閱讀器可以提高聲音- 無論在特定情況下哪種方法似乎最適合強調這項重要訊息。

最後的思考：
# 語意標籤並不是終點。還有元資料、本體論、資源描述語言等等，它們進一步幫助連結不同網頁之間的數據，甚至可以幫助創造新的知識！

例如，維基百科在語意上呈現資料方面做得很糟糕。

https://en.wikipedia.org/wiki/Barack_Obama
https://en.wikipedia.org/wiki/Donald_Trump
##https://en.wikipedia.org/wiki/Joe_Biden

#這三個都是在某個時間點上擔任美國的總統的人物。

這三篇文章都包含一個側邊欄，顯示這些訊息，您可以比較它們（打開兩個頁面然後來回切換），但它們沒有進行語義描述。 相反，如果維基百科使用本體論來描述一個人：http://dbpedia.org/ontology/Person

<!-- President是Politician的子类，Politician是Person的子类 -->
<President> 
    <birthname>Barrack Hussein Obama II</birthname>
    <birthdate>1961-08-04</birthdate>
    <headOf>country::USA</headOf>
    <tenure>2009-01-20 – 2017-01-20</tenure>
</President>

現在，您（和機器）可以直接比較這三個（在動態生成的頁面上！），甚至可以創建新的知識，例如顯示所有美國總統的列表- 相當無聊但也很酷，例如當前世界領導人有多少位，有多少位女性世界領導人，誰是最年輕的領導人，有多少種類型的領導人（總統/皇帝/女王/獨裁者），誰任職時間最長，有多少人身高超過175cm並且有棕色眼睛等等。

總之，良好的語意是非常酷的（但從技術層面上來說，難以實現和維護）。