什麼是 HTML 語意化?

2023年2月2日

💎 加入 E+ 成長計畫 與超過 300+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

簡單來說,HTML 語意化就是用合乎語意的 HTML 標籤開發,例如:<form><table>,標籤會清楚定義其內容、讓頁面兼具良好的語意和結構。以下會提到兩個重點,HTML 語意化標籤有哪些,另一個是,優點有哪些。

HTML 語意化標籤 (semantic tags)

目前語意化標籤大約有 100 多項,常見的如下

為什麼要使用 HTML 語意化標籤

提升 SEO

比起使用非語意化的標籤例如:divspan,語意化標籤可以幫助搜尋引擎重視在「標題」、「連結」裡的關鍵字,這樣可以讓有語意化標籤的網頁更容易被使用者搜尋到。

便於開發

語意化標籤可以提升程式碼的可讀性、幫助開發者之間更容易理解網頁架構、減少差異化,舉例來說,你可以用 div 來做一個按鈕,但如果用 button 對其他開發者而言會更一目瞭然知道那是個按鈕; 除此之外,透過語意化標籤,開發者可以輕易使用其中的原生功能。以 button 來說,就有許多原生功能是 div 沒有的。

無障礙網頁 (HTML accessibility)

HTML 語意化網站可以方便其他設備解析內容,例如:螢幕閱讀器、盲人閱讀器、移動設備。a11y 在前端業界是越來越被看重的領域,用語意化標籤也因此是許多公司會看重的。

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們