在2014從 World Wide Web Consortium (W3C)正式推出HTML5. HTML5添加了很多新的語法特徵, 比如, , . HTML也有增加一些針對排版有更詳細的語法, 比如, , , . 在HTML4 的時候只有div, 導致做好一個layout 結果一大推. 在HTML5就比較不會這個問題了.

Semantic HTML的意思就是比較清楚, 或有意義的HTML. 請看以下的code.

<!-- Non-Semantic -->
<div>
<div>
 <a href="/html/">HTML</a> |
 <a href="/css/">CSS</a> |
 <a href="/js/">JavaScript</a> |
 <a href="/jquery/">jQuery</a>
</div>
</div>

<!-- Semantic -->
<header>
<nav>
 <a href="/html/">HTML</a> |
 <a href="/css/">CSS</a> |
 <a href="/js/">JavaScript</a> |
 <a href="/jquery/">jQuery</a>
</nav>
</header>

經過這兩個例子可以清楚的看到, 第二個是有標題(header)跟導覽列(nav). 當然在網頁顯示出來, 是沒有差異的. 但是用semantic HTML還會有以下好處.

1. SEO
   雖然code 的架構對我們來說沒有差, 但是對GOOGlE就有了. 如果沒有照最佳實踐(best practice), 你的搜尋排行就不會那麼高. 所以還是乖乖的照規定來, 不要跟Google大, 過意不去.

2. 下載速度

3. 好維護
   這個不用多說, 你就想一大推比較好維護 還是, ,

4. 無障礙網頁
   對眼睛不方便的人， 他們會有聲音來聽網頁， 那有semantic html 會對他們來說會更有幫助。

參考連結

• w3c HTML5 semantic element
• Internet is hard
• Wikipedia