《Web前端開發精品課 HTML與CSS進階教程》——第02章 語義化2.1 語義化簡介

本節書摘來自異步社群《web前端開發精品課 html與css進階教程》一書中的第2章，第2.1節，作者： 莫振傑 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

由于html簡單，很多初學者對它存在一種偏見，覺得它沒多少東西，是以在學習的過程中随便對待。其實，學習html的重點不在于掌握了多少标簽，而是在于掌握标簽的語義以及如何編寫一個語義結構良好的頁面。

在實際開發過程中，很多人由于對标簽語義不熟悉，常常用某一個标簽代替另外一個标簽來實作某些效果。

舉例：

在浏覽器預覽效果如圖2-1所示。

對于上面的标題效果，正确的做法應該是使用h1～h6标簽來實作，但這裡卻使用div來代替了。雖然頁面效果一樣，但是這種“用某一個标簽代替另外一個标簽來實作相同效果”的做法是完全不可取的，因為它違背了html這門語言的初衷。

html的精髓就在于标簽的語義。在html中，大部分标簽都有它自身的語義，例如p标簽，表示的是“paragraph”，标記的是一個段落；h1标簽，表示“header1”，标記的是一個最進階标題……而div和span是無語義的标簽，我們應該盡可能少用。

html很簡單，是以很多初學者往往忽略了它的目的和重要性。我們學習html并不是看自己學了多少标簽，更重要的是在你需要的地方能否用到正确的語義化标簽。把标簽用在對的地方，這才是html學習的目的所在。

我們都知道前端最核心的技術是html、css和javascript這三種。其中html是網頁的結構，css是網頁的外觀，javascript是網頁的行為。在這三大元素中，html才是最重要的，而css和javascript隻是用來修飾結構的。就像你蓋房子，房子裝飾得再漂亮，如果結構不穩也容易塌。

整站開發時，編寫的代碼往往都是成千上萬行，如果我們全部使用div和span來代替語義化标簽，後期維護會非常困難。此外對于一個頁面來說，我們可以根據一個頁面的外觀來判斷哪些是标題，哪些是圖檔。但是搜尋引擎跟人不一樣，它可“看不懂”一個頁面長什麼樣的。它隻會根據html代碼來識别。搜尋引擎一般都是根據html标簽來識别這裡是一個img标簽，那裡是一個p标簽等。如果整個頁面都是div和span，搜尋引擎小蜘蛛肯定會迷路，可能以後都不想來光顧你這個站點。要是這樣的話，你崩潰了，你的老闆也跟着崩潰了。

從上面我們知道，編寫一個語義結構良好的頁面在實際開發中極其重要。主要有兩個最大的優點：①利于開發調試和後期維護；②利于搜尋引擎優化。在這一章，我們從以下7個方面給大家詳細講解html語義化。

（1）标題語義化。

（2）圖檔語義化。

（3）表格語義化。

（4）表單語義化。

（5）其他語義化。

（6）語義化驗證。

（7）html 5摒棄的标簽。