[HTML學習筆記] HTML5 Semantic Tag 語意化標籤 | 我在路易莎的日子

html seo semantic elements

hannnahTW 2022-08-19 16:08:13 ‧ 2542 瀏覽

分享至

Semantic Tag在HTML中是一個重要的觀念，它牽涉到了網站的SEO，隨著網路時代的進步，越來越多電商的成立，想增加增加網站曝光度、提高在google上被搜尋到的機會，你不能不了解Semantic Tag，但畢竟本人也不是SEO專家，所以本文就來帶大家了解最基本的概念。
GOGO

前情提要

一個網頁中的基本配備不外乎會有以下幾個區塊(不是絕對，可當作一個參考):

原圖來自GeeksforGeeks Website Layout

那為了要清楚的定義各個區塊，以前可能要在div中加上id="nav" , class="header" , id="footer"等，來定義網頁的導覽列、標頭、註腳等，但這樣顯得比較模糊，不夠精確，而語意化標籤就解決了這個問題。

本圖來自Sumudu Siriwardana's Medium

這邊也找到了個實例，底下是2013年Stack Overflow的網頁

navbar導覽列:

footer註腳:

打開開發者工具檢查，你會看到定義navbar的方式是在div加上class="nav" ; 定義footer是在div加上id="footer"，其實以前許多網站也是以上方這樣的方式去定義網頁各個區塊的，直到2014年，W3C(全球資訊網協會)發布了HTML5，並且添加了更多語意化semantic tag後，各區塊才開始有了相對應的標籤及專屬的意義。

P.S如果你對這些舊網站有興趣，Wayback Machine在1996年起便開始備份一些知名企業的網頁，有興趣的可以去這些老網站探險(點此)

Semantic Tag是什麼?

Semantic Tag(語意化標籤)定義了網頁的結構並賦予明確意義，它不會影響到網頁的視覺效果，若是使用螢幕閱讀器的視障使用者，瀏覽器可以針對語意標籤決定哪些部份要讀出，哪些部份不要讀出，而Semantic Tag最大的目的就是讓使用者、搜尋引擎或是開發者等可以了解它們在網頁中的定位，並加強網站的SEO，提高訪問性(關於程式如何影響SEO是個龐大的篇幅，有興趣的人可以再去研究)

在HTML發布之初就已經有語意化標籤的存在，但在HTML5時新增了更多的語意化標籤，像是<section> ,<footer>, <nav>, <aside>, <mark>, <time>等，那接下來我們就針對HTML5所新增的語意化標籤來做講解✧(≖ ◡ ≖✿)

底下以台灣高鐵為例

`<header>`

為網頁提供了介紹性的內容，可放入標題h1-h6 , Logo , 搜尋框 , Menu選單等。

`<nav>`

通常放入通往各分頁的內部連結或是通往其他網頁的外部連結，並非所有連結都要使用<nav>來包，用於網頁中主要的導航區塊即可。

`<article>`

通常用來代表一個獨立、可以自成體系的內容，像是部落格文章、新聞內容、用戶評論等。

`<aside>`

為網頁的側邊欄，通常放跟主要內容間接相關的內容。

本圖為flatfull所製作

`<section>`

代表網頁的某個片段區塊，通常彼此各自獨立，根據MDN上的解釋<section> 是一個通用的語意標籤，在沒有更明確的語意標籤下才會使用它，像是地圖顯示、搜尋結果列表等就可以使用<section> 。

`<footer>`

`<main>`

為網頁的主要展示區，一個網頁中通常只會有一個<main>，它是獨一無二的，而且不能是 <article>,<aside>, <footer>, <header>, <nav> 的後代元素。

`<figure>`、`<figcaption>`

這兩個標籤常一起使用
<figure>通常會包含獨立的圖片、圖表
<figcaption>是針對<figure> 定義的標題與說明，必須是它的子元素

HTML:

  <!-- 無figcaption -->
    <figure>
        <img src="./images/okinawa_shishimai.png" alt="okinawa_shishimai">
    </figure>
    <!-- 有figcaption -->
    <figure>
        <img src="./images/okinawa_shishimai.png" alt="okinawa_shishimai">
        <figcaption>舞龍舞獅表演-日本沖繩</figcaption>
    </figure>

呈現如下:

`<mark>`

這個標籤VSCode不會有提示，必須自己手key。<mark> 可以用來凸顯重要內容，底色為黃色，就像螢光筆在書上畫重點一樣。

HTML:

  <h1>2022 iThome 鐵人賽</h1>
  <blockquote cite="https://ithelp.ithome.com.tw/2022ironman?utm_source=ithelp&utm_medium=navbar&utm_campaign=ironman14">
2022 iThome 鐵人賽，8/1 開始報名9/1-9/16熱血開賽，再一步 世界就在你的腳下，iThome 鐵人賽是 IT 行內人矚目的年度慶典。 每年逾千參賽者須以 <mark>不中斷的30天連續寫作</mark>，呈現<mark>完整的技術主題</mark>來爭取獲獎、甚至出版、登台演講等展現自我的舞台。
  </blockquote>

呈現如下:

`<summary>` 、 `<details>`

這兩個標籤常一起使用
<details>代表詳細內容，<details>裡的內容是看不到的，為收合狀態(預設)，加上open就會變成開展狀態，可以直接看到詳細內容
<summary> 為<details>的標題與說明，必須為它的第一個子元素

HTML:

<details open>
        <summary>2022/08/19代辦事項</summary>
        <ul>
            <li>看課外書</li>
            <li>udemy線上課程</li>
            <li>發布一篇文章</li>
        </ul>
</details>

呈現如下(加上open屬性):

呈現如下(預設狀態，沒有open屬性)

點三角形或是標題文字(2022/08/19代辦事項)才能夠展開內容。
P.S <details>裡放入<ul>或<ol>，可以模擬toggle list的效果。

`<time>`

這個標籤VSCode不會有提示，必須自己手key。<time>可以指定特定的時間和日期，搭配屬性datetime，可將時間轉換為機器可讀的格式，讓搜索引擎有更好的搜索結果，此外，還能客製化功能，像是透過日曆來提醒使用者日期和時間。關於datetime屬性有不同的格式寫法，點此瞭解更多。
HTML:

<p>這間路易莎從每天<time datetime="07:00">早上7:00</time>開到<time datetime="22:00">晚上10:00</time>
</p>
<p><time datetime="07-22">7月22日</time>為花媽的生日</p>

CSS:

time {
            font-weight: bold;
        }

呈現如下:

以上就是各個HTML5新增的Semantic Tag介紹~打了好久阿~

summary結論

Semantic Tag(語意化標籤)定義了網頁的結構並賦予明確意義，不會影響到網頁的視覺效果。可以使用它來優化SEO，提高網頁的訪問性，而如果要深入了解Semantic Tag，你會發現它牽涉到的層面很廣，關於如何恰當使用，也是我還在學習的~
希望能藉由這篇文章，讓大家對Semantic Tag有基本的理解。所學不精，若有解說不夠詳盡或是錯誤歡迎指教，感激不盡
我發現高鐵網站的截圖不怎麼好看阿>< 辛苦各位的眼睛了