在HTML中，語義是什麼？

來自專欄我寫Python1 人贊了文章

大家好我胡漢三又回來了。由於爬蟲需要，最近我一直在搗鼓前端，沒空寫文章，這次抽點時間算是把坑給填了。

好了不扯了，這次我們來了解一下HTML中語義這個概念，這對於編寫規範的網頁非常重要。

目錄

1.語義化&語義化元素

2.為什麼我們應該優先使用語義化元素？

3.SEO

1.語義化&語義化元素

在程序中，語義（semantics）指的是一段代碼的含義，比如「運行一段代碼後將會發生什麼」以及「這個HTML元素有什麼作用，扮演什麼樣的角色」——而不單單只關注它看起怎麼樣。

舉個例子。在HTML中，元素h1扮演著「一個網頁中最高級別標題」的角色，這也正是它的語義。

<h1>This is a top level heading</h1>

如果你輸入上述HTML代碼，那麼你在瀏覽器中打開可能會看到一條很大，很粗的標題——這只是瀏覽器默認渲染的樣式。但實際上，如果你接觸過CSS，那麼你可以輕易的修改這個元素的樣式，比如我可以將上面的標題樣式修改的很小：

<h1 style="font-size: small">This is a top level heading</h1>

我們將修改樣式前後的標題元素放到一起就會發現，它們「看起來」很不同。但實際上，它們的語義仍然沒有變化。

舉這個例子我希望說明的是對於一個元素而言，它們的區別存在於兩點：語義（如果這個元素具有語義的話）以及樣式，從本質上來講，語義才是元素之間真正的區別（因為樣式可以通過CSS修改）！

HTML中有些元素是具有語義的（比如section、time等），也有一些不具備語義（比如div、span等），我們馬上就來解釋一下，為什麼我們應該優先使用語義化元素。

2.為什麼我們應該優先使用語義化元素？

優先使用語義化元素有以下一些好處

使瀏覽器/屏幕閱讀器清楚了解頁面及其內容的含義

我們先解釋一下什麼是屏幕閱讀器，它是為視障（或其他原因不便使用瀏覽器的）人群提供web服務的工具。而對於視障類人群來說，屏幕閱讀器可以為它們朗讀網頁中的內容。

如果我們作為網頁編輯者，想要在網頁文本中強調某個關鍵字很重要，我們應該如何標記呢？許多人可能會採用b元素，因為它能將文本變成粗體，這樣「顯」得文本比較重要。但實際上，更好的選擇應該是使用strong元素，在HTML5中，它的語義被規定為內容強烈的重要性(strong importance for its contents)，而b元素並沒有沒有這層意思。這兩者的在使用瀏覽器的人群看來並無什麼不同，但對於屏幕閱讀器的使用者來說，當閱讀到strong元素標記的文本時很可能會加強語調，這就向它們傳達了某些文本的重要性。

SEO

搜索引擎優化（search engine optimization，SEO），是一種透過了解搜索引擎的運作規則來調整網站，以及提高目的網站在有關搜索引擎內排名的方式。搜索引擎優化的一種有效手段就是編寫規範的網頁——某種意義上來說就是要使用合適語義的HTML元素。

HTML中有許多語義化元素對於SEO有重要的影響，下面例舉幾個：

• title：搜索引擎會將title作為判斷頁面主要內容的指標，有效的title應該包含幾個與頁面內容密切相關的關鍵字 。
• h1~h6：權重越高的標題被檢索匹配的可能性越大。
• nav：標記導航。良好的導航有助於搜索引擎了解網站架構。
• article：標記文章。有利於搜索識別網頁內容及判斷相關性。

總結成一句話就是合理使用語義化元素，可以提高搜索引擎的效率，提高網站的排名。

3.常用的語義化元素

最後例舉一些常用語義化元素，有興趣的朋友可以深入了解：

• article
• aside
• figcaption
• figure
• footer
• header
• main
• nav
• section
• time

參考資料

[1] https://developer.mozilla.org/zh-CN/docs/Glossary/SEO SEO

[2] https://developer.mozilla.org/zh-CN/docs/Glossary/%E8%AF%AD%E4%B9%89 語義化元素

[3] https://stackoverflow.com/questions/39138832/what-is-the-difference-between-internally-div-and-semantic-elements-like-section 語義化的優點

[4] https://www.lifewire.com/why-use-semantic-html-3468271 語義化的優點

[5] https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/strong strong元素

[6] https://www.zhihu.com/question/20006922 語義化元素對SEO的影響

[7] http://www.kmdian.com/marketing/59.html 語義化元素對SEO的影響