[網頁,前端]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檢測

沒有留言:

張貼留言

Instagram