語意標籤 (Semantic)

語意標籤是HTML5新增的標籤，讓網頁結構更清楚，搜尋引擎可以更容易了解網頁。
語意標籤的用途與div和span類似，目的都是將內容劃分區域，只是div、span是沒有語意的。
而這裡的語意意思是，如果同樣是劃區一個區塊，卻只知道div是一個區塊，這個區塊在做什麼可能還需要細看才知道，但header劃分出來的區塊，是可以一眼就知道這是頁首。

語意標籤學起來其實很簡單，知道標籤的英文名什麼意思，並在相對應位置放上語意標籤，就可讓開發者及搜尋引擎更塊理解網頁架構。

頁首標籤 (header)

header標籤如果是在body內，它可以表示網頁的頁首，但如果位於article或section內，則可以表示文章或區塊內的首要區塊。

導覽列 (nav)

只要是在網站內的導航區塊，都適合使用nav標籤，像是主選單、頁尾選單等。

主要區塊 (main)

用來放置頁面中主要資訊的區塊，展現頁面內容的獨特性。每個頁面只能有一個main標籤，且理想狀態下，不能被放在nav、article、aside、footer和header內。

區塊或文章區塊 (article)(section)

過去建立區塊通常會使用div，HTML5語意化標籤出現後，可以使用section搭配標題來呈現內容，而section內一些無明顯含義的區塊或為了排版目的的區塊則使用div來包，這時可視作無意義的容器。article標籤近似section標籤，但article主要用於包覆文章。要注意的是，article可以有很多個section，也可以是section有很多article，取決於內容。

側欄 (aside)

側攔語意是跟主要區塊內容無關的區塊，也就是額外資訊，像是側邊欄、廣告、其他連結、推薦文章等，但不一定是側邊位置才能使用。

頁尾 (footer)

表示頁尾或表尾部分，使用方式同header。

其他語義化標籤

time

表示日期時間

mark

如黃色螢光筆的方式畫出重點，強調一小塊內容

details

描述文章的細節

figure、figcaption

figure用於圖像，figcaption用於圖像標題

hgroup

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

cite

引用其他文獻或作品(例如書籍、歌曲、電影、繪畫、雕塑等）的標題

標籤屬性介紹

屬性Attributes是HTML標籤可以添加的額外資訊，讓標籤可以依照網頁開發者的需求，增加某些功能。
在前幾天介紹img和a標籤時有提到src、href、alt屬性，有些屬性只適用於特定的標籤，例如src就適用於img標籤，href適用a標籤。當然也有屬性是任何一種標籤都可以附加的，例如style屬性，用來添加CSS。

屬性必須於開頭標籤輸入，如果是只有單一標籤，就將屬性填入該標籤即可。舉例來說，表示段落文字的p標籤，需要開頭標籤結尾標籤，屬性你就必須填在開頭標籤中。下方原始碼你可以看到，style屬性是填在開頭標籤內。

<h1><p style="color:#CB8A90;">範例</p></h1>

屬性用法：

屬性名稱="屬性的值"

以style屬性來舉例，color代表文字的顏色，冒號後填入顏色(可以是色碼、顏色、RGB)，如此一來就可以添加文字的顏色。但如是遇到img這類的屬於空元素的標籤，不需要結尾標籤，直接將屬性填入img標籤中即可。

<img src="圖片位置或檔名" alt="圖片無法顯示時的替代文字">

以上是我今天介紹的常用HTML標籤與屬性的概念介紹，HTML是由許多不同功能的標籤所組成，標籤中可添加屬性，為每個標籤增添額外資訊。屬性通常會放在開頭標籤中。