網頁設計

關於網頁設計的技術或相關資訊分享

HTML5結構標籤簡介

  以往做網頁設計時,一個網頁可能會有個頭部Header,導覽列navbar,側邊欄sidebar,主內容mainbody以及頁尾footer,來放置各式資訊,例如在頭部有個網站標題,側邊欄放選單或是一些區塊,頁尾放版權宣告等,不過以往都是直接使用CSS及HTML結構,讓網頁看起來有那個架構這樣,全部都是使用div標籤等去排列,在網頁的原始檔結構上,並沒有辦法從標籤判斷出這個區塊的內容是甚麼,使用了以下的結構標籤後,讓網頁的區塊有了語意的概念,搜尋引擎可以更精確分析網頁中那些內容是重要的,那些是次要的,讓整個網頁更有結構性。

標籤介紹

  • <header>:頁首標籤,通常是來放網站標題、logo用的。
  • <nav>:導覽列標籤,用來定義網站的導覽選單的內容。
  • <section>:章節/小節。
  • <article>:一篇文章。(secion可以包article,article也可以包section)
  • <aside>:主要是拿來標示網頁的側邊欄的區塊。
  • <footer>:通常拿來放網站的版權宣告等。

有甚麼好處?

  • 網頁設計師:網頁結構更清楚,維護上更方便。
  • 搜尋引擎:更精確分析網頁,了解那些是網頁的主要內容,提供更精確的搜尋結果。
  • 瀏覽者:可以得到更精確的網頁內容,不會去到和搜尋不相干的網站。
  • 網站管理員:由於搜尋引擎能精確分析網站內容,可以提供更精確的搜尋結果給搜尋的人,進來網站的都是準確的目標客戶,減少走錯網站的人。

Please enable the javascript to submit this form