[前端]html5新增的語意化標籤

HTML5新增的語意化標籤

＊什麼是語意化？

指HTML5新增的語意化標籤，將原本HTML4的寫法
<div class="header">頁首，改成<header>
<div class="footer">頁尾，改成<footer>
<div class="aside">邊欄，改成<aside>
<div class="nav">導覽列，改成<nav>

＊語意化用途

這些標籤不是給我們讀的，是給瀏覽器讀的。
所以，雖然不用使用語意化寫法也寫得出網頁，但正確使用語意，可以讓瀏覽器能分辨出標題、內容、語氣、重要性。
P.S.目前IE8不支援，但加上一段JS可正常套用。

＊語意化的必要性

• SEO：正確寫法的語意化，，可以提高SEO搜尋引擎排行，為網站加分唷
• 無障礙網頁：盲人可以使用語音瀏覽器，協助殘障人士瀏覽網頁。

HTML5新增的語意化標籤

＊架構標籤

<header> 網站版頭區塊
<nav>  導覽列區塊
<aside>  側邊欄，放文章延伸閱讀或不重要的資訊
<section> 章節，將同性質的段落區隔開來
<article> 文章，將純文字內容的文章區隔開來
<footer> 頁尾，像是法律資訊或是作者訊息等等

＊多媒體影音元件標籤

<canvas>
<svg>
<audio>
<video>

＊關於瀏覽器支援度

IE8不支援html5的標籤，所以html5在IE8開啟時會是CSS完全跑掉的狀況
解決方法：加上html5shiv.js
參考：關於瀏覽器支援度
延伸：關於要同時符合RWD又要符合IE8的網頁(待寫中)

關於除錯

因為讀取的是瀏覽器，圖片記得加上文字、或是藏說明文字，不然圖片對瀏覽器來說是無意義的。
要做好一個html5的網站，連SEO、無障礙也一起做起來其實很順便。
檢測的工具都差不多，寫完網頁後可以一起測一下

＊無障礙：

無障礙是台灣才有的，國外沒有，相關規則就是找台灣資料(NCC)，可用初步檢測的Freego來檢查標籤是否都有上文字，其中也有
傳送：無障礙freego下載

＊html5檢測：

檢測一下，可以幫你確認寫法是否有符合html5的格式，是否用太舊的屬性，寫法是否有誤，是個進步的好工具
傳送：html5檢測

＊CSS檢測：

檢測一下，可以幫你抓bug，通體舒暢
傳送：CSS檢測