本篇會闡述如何正確使用HTML5的語意來撰寫一個網站的架構。如果不是開發者此篇文章可看上半部瞭解HTML5的概念,下半部是給專業的網站開發者看的,一般人可能無法理解。

HTML5是最新的HTML修訂版本,於2014年的10月才由W3C完成正式的修訂。如果有興趣知道更多詳情的請參考Wiki百科的HTML5頁面,這邊裴瑞將用自己理解後的觀點和比較淺顯的方式來介紹。

HTML5:語言的進化,簡單例子了解HTML5語意

在HTML5以前的HTML,比較著重在各個標籤的功能表現,像是<DIV>標籤就是一個區塊,用來置放所有其他東西,<P>標籤就是一個用來放文字的段落,像是現在正在打的文章中的每個段落,就應該使用<P>標籤來包覆,<A>標籤則是負責連結,<IMG>則是用來置放圖片,其他還有很多如<TABLE>、<UL>等⋯⋯基本上網站就是由很多標籤交織起來所產生的。

HTML5誕生後最重要的改變,就是多了HTML「語意」,以前HTML就像是原始人在溝通,比手畫腳,使用簡單直接的語言:「石頭!木材!肉!」簡單又直率。HTML5多了語意後則像是這樣:「把這顆尖銳的石頭給我。」「這批木材放到我的車上去。」「來吃點烤好的青蛙肉!」

比起以前你只能知道有什麼東西,並不知道他要幹嘛、他的模樣,多了語意之後就更清楚了。你可能會疑惑可是HTML5不是程式碼嗎?程式碼多了語意前台看起來還是一模一樣阿。沒錯!前台的訪客是看不出差別的,這是要給機器看的,像是搜尋引擎的機器人。

HTML5架構的網站有更好的SEO體質

如上所述,HTML5語意不是用來給人看的,是給機器讀的⋯⋯讓機器更好的判別:喔!原來你的網站這個「區塊」是一篇文章,而這個「區塊」是專門放置有關apple手機的資訊,另外這邊則是版權資訊,一切都更清楚了,因此機器人可能會給你「更好」的網站分數,更清楚的收錄你網站真正重要的資訊,人說HTML5有更好的SEO體質是這樣的由來。

HTML5實戰篇:語意的撰寫

取代div的HTML5區塊標籤

Html5的網站架構

區塊標籤及文章區塊標籤<section>、<article>

以往我們需要建立一個區塊都會使用<div>,Html5則建議我們使用<section>搭配<h1~h6>標籤來告知機器,這個區塊<section>主要是講什麼的(標題就是這個區塊主要的內容),而<section>內,一些無明顯意義的區塊或只是為了排版目的的區塊則使用<div>來包覆,因此<div>可以視作一個無語意的容器,而<article>則是專門用來包覆文章,一樣搭配標題<h1~h6>

表頭表尾區塊標籤<header>、<footer>

以前用<div>架構會像這樣寫<div class="header"><div class="footer">、HTML5則可以直接使用<header>以及<footer>標籤來取代,但這兩個的用法不只在於<body>下的架構,而是任何大區塊中像是<body><section><article>如果有詳細的去區分表頭表尾區塊時⋯⋯就可以使用<header>以及<footer>來架構,用於<body>的情況應該是最普遍的,畢竟<body>的架構通常比較大,容易需要區分表頭表尾區塊。

側邊欄位標籤<aside>

邏輯上跟<header>以及<footer>使用方式一樣,像是WordPress或部落格常見的側邊欄就很適合用<aside>來做佈局,另外<aside>除了側邊欄之外,他的語意其實算是跟本文無關的區塊,也就是大架構下的額外資訊,像是部落格的側邊欄,通常放的是跟主要文本無關的其他額外資訊,例如其他連結、廣告、推薦文章等⋯⋯,因此使用<aside>的時候,並不代表這個佈局一定是要放在側邊位置,只要他是跟主要區塊所論述的事項無關的額外資訊,就可以用<aside>來做架構佈局。

主要區塊標籤<main>

在HTML5中用來放置這個頁面主要的資訊,有點像以前的<div class="content">,且每個頁面中只能有一個<main>標籤,且不能被放在<nav><article><aside><footer><header>之中。

導航欄專用<nav>標籤

只要是在網站內的導航區塊,都適合使用<nav>來做架構,像是主選單、表尾選單等⋯⋯。

HTML5選單架構方式:

<nav>
<ul>
<li>首頁</li>
<li>關於我們</li>
<li>聯絡我們</li>
</ul>
</nav>

其他HTML5新增語意標籤

標題集合標籤<hgroup>

當內容有主標題及次標題等⋯⋯多個標題的狀況下使用。

HTML5<hgroup>使用方式:

<article>
<hgroup>
<h2>sub title</h2>
<h1>Main Title</h1>(主標題)
</hgroup>
</article>

圖片專用標籤<figure><figcaption>

在HTML5中專門用來放置圖片的標籤,使用方式為先用<figure>來包覆圖片區塊,再使用<figcation>來描述此張圖片的標題。

HTML5<figure><figcaption>使用方式:

<figure>
<fugcaption>高雄景點照片集錦</fugcaption>
<img src="images/img1.jpg" />
<img src="images/img2.jpg" />
<img src="images/img3.jpg" />
</figure>

時間標籤<time>

HTML5中專門用來標記時間

HTML5<time>使用範例:

<p>每天早上九點 <time>9:00</time> 開始營業。</p>
<p>我在 <time datetime="2018-08-08">父親節</time> 有個家庭聚餐。</p>

其他標明文本資訊的HTML5標籤

<small> 版權資訊或免責聲明, 注意事項等一些”附屬細則” 資訊, 如是整篇都為法律資訊的頁面則不須用small區隔
<mark> 如黃色螢光筆的方式畫出重點
<em> 類似mark, 但這是真正文中需要強調的部分, 而mark只是意在凸顯某區塊
<strong> 類似em, 但是通常用來包極重要的某句話或段落, em則是包某個詞
<b> 關鍵字或產品名
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
按照惯例,引用的文本将以斜体显示。
<address> 應用於標記目前<article>或文件作者的連絡資訊, 而不是作為一般標記地址用