iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

30天學網頁設計系列 第 8

Day8 HTML 其他常用標籤

語意標籤 (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是由許多不同功能的標籤所組成,標籤中可添加屬性,為每個標籤增添額外資訊。屬性通常會放在開頭標籤中。


上一篇
Day7 HTML 區塊標籤:div、span
下一篇
Day9 HTML 常用標籤: table
系列文
30天學網頁設計30

尚未有邦友留言

立即登入留言