為什麼選擇HTML5語意化標籤而非div標籤？
P粉806834059
2023-08-22 23:00:37
<p>為什麼要使用HTML5語意化標籤，如<code>headers</code>、<code>section</code>、<code>nav</code>與<code>、<code>nav</code>與<code>article<code>nav</code>與<code>article< code>，而不是簡單地使用<code>div</code>並將其設定為首選的<code>css</code>？ </p>
<p>我創建了一個網頁並使用了這些標籤，但它們與<code>div</code>並沒有什麼區別。它們的主要目的是什麼？ </p>
<p>它們只是在使用時提供適當的標籤名稱，還是還有其他作用？ </p>
<p>請解釋一下。我查閱了許多網站，但沒有找到這些基礎知識。 </p>
在HTML5Doctor上有一篇關於HTML5語意的不錯的文章。
語意一直是HTML的一部分，以某種形式存在。它幫助你理解頁面上發生的事情。
以前，當幾乎所有東西都使用時，我們仍然透過給它一個「語義」類別名稱或id名來實現語義。
點贊 +0
新增回覆
P粉806834059
這些標籤有助於正確結構化和理解佈局。
如果你這樣做：
與
或
與
都沒有問題，但後者對於你以及爬蟲、閱讀器等提供更好的可讀性。
牛津字典如下所述：
正如它們的名稱所示，這些標籤旨在提高您的網頁的含義。良好的語義在文件的自動處理中起著重要作用。這種自動處理比您意識到的要頻繁 - 搜尋引擎排名的每個網站都是從所有網站的自動處理中派生出來的。
如果您訪問一個（設計良好的）網頁，作為人類讀者，您可以立即（視覺上）區分所有頁面元素，更重要的是理解內容。在左上方，您可以看到公司徽標，旁邊是網站導航，有一個搜尋欄和一些關於公司的文本，一個可以購買的產品連結和底部的法律免責聲明。
然而，機器是愚蠢的，無法做到這一點： 看著與您相同的頁面，網路爬蟲只會看到一個圖像，一系列錨點標籤，一個文字節點，一個輸入欄位和一個帶有連結的圖像。底部還有另一個文字節點。 現在，他們應該如何知道您打算將文件的哪個部分作為導航或主要文章，或者一些不太重要的腳註？他們可以透過使用一些常見標準來分析您的文件結構來猜測特定元素的提示。 例如，內部連結的
清單很可能是某種頁面導航，文件末尾的文字是對日常觀眾來說必要但不太重要的內容（法律免責聲明）。而不是
現在想像一下，如果使用的是一個普通的