在商言商

SEO網站優化新趨勢
SEO網站優化新趨勢
什麼是語意標籤? 假設您已經知道如何使用 <div> 和 <span> 進行網頁排版的工作,那麼語意標籤和 <div>、<span> 在排版上具有完全一樣的特性,意即以下幾對 HTML 標籤在版面顯示上是完全相同的:  舉例: <div> name </div> <header> name </header> <main> name </main> <footer> name </footer>   既然語意標籤和 <div> 有相同的排版特性,那為什麼要使用語意標籤呢?最大的目的,是讓搜尋引擎或是其他軟體工具,可以更清楚地了解網頁中每個區塊的設計目的,提升網頁生態圈的資訊交流,更便於分享、查詢,因此,也有增...
>

什麼是HTML5 語意標籤|網站速學班,語法好簡單

| Jan 22 , 2018
HTML5 語意標籤
  • 什麼是語意標籤?

  假設您已經知道如何使用 <div> 和 <span> 進行網頁排版的工作,那麼語意標籤和 <div>、<span> 在排版上具有完全一樣的特性,意即以下幾對 HTML 標籤在版面顯示上是完全相同的:

 舉例:

<div> name </div>

<header> name </header>

<main> name </main>

<footer> name </footer>

 

  既然語意標籤和 <div> 有相同的排版特性,那為什麼要使用語意標籤呢?最大的目的,是讓搜尋引擎或是其他軟體工具,可以更清楚地了解網頁中每個區塊的設計目的,提升網頁生態圈的資訊交流,更便於分享、查詢,因此,也有增強網頁 SEO 的效果。

 

在HTML5中主要新增的功能有首先是使用語意標籤來加強文件的結構化、接著是新增<video>及<audio>標籤強化對聲音及影像等多媒體的播放功能、以及增加可以自由描繪圖形的<canvas>標籤,最後則是提供多種有助於網頁應用程式開發的API。

 

  • 語意標籤的使用時機?
  •  
    • <header>:網頁的標頭,通常放置網站標題、企業LOGO等重要資訊。
    • <nav>:網頁的選單連結、導覽頁。
    • <main>:網頁的主要內容。
    • <aside>:網頁的側邊欄、可放置主要內容以外的附加內容。
    • <article>:頁面中的一個區塊,即是一篇文章內容。
    • <section>:自訂的區塊,用於章節等段落的區分,例如數篇摘要組成的空間。
    • <footer>:網頁的頁尾,通常放置聯絡方式、著作權宣告等等
    • <mark>:強調一小塊內容。
    • <time>:顯示日期時間。

 

 

 

 

  • 用語意標籤製作HTML5文件的好處:
  1. 看標籤就可以知道哪一個部份是標題、哪裡是選單,對使用者來說方便判讀,對搜尋引擎來說亦是。
  2. 搜尋引擎在搜尋網頁內容時,可以搜尋到準確的資料與資訊。
  3. 因為標籤都具有意義了,這樣在維護文件時,就會變得更簡單與容易,在團隊的工作中尤其重要。
分享這篇文章
上一篇
6項SEO實測證明,點擊率真的會影響排名
下一篇
什麼是網址靜態化|靜態、動態網址到底怎麼看?
BACK

\ 您也可能喜歡這些 /

more

服務支援

refresh captcha
登入