語意化標籤

我們學到，標籤的語意是撰寫html文檔時，很重要的概念。而HTML5版本，有所謂的語意化標籤，這類元素並不像<input>、<a>、<img>有特殊的功能，它在文本結構上只是像容器一樣的存在。可是對於瀏覽器來說，它具有語意的特性很重要。

它幫助瀏覽器更快去讀懂這個元素框是整個網頁的什麼部分 ; 它更有近一步影響SEO的作用。

目前常見的基礎網頁版型：

拿下圖來看，現在的網頁通常會有最頂部區塊，跟中間區塊，然後最底部區塊，中間區塊是主要展示網頁的區塊，這個區塊有時候會有附帶側邊欄，而內容也會有大大小小互為層級的區塊。如果都用<div>來包也可以，但若用語意化標籤來包，會顯得更專業。

可先參考環境資訊中心(也可以順便逛逛網站，關心台灣環境議題~~~)，是現在很典型的網頁結構。

那就來一個一個介紹，切版時很常用到的語意化標籤吧！

<header>

• <header>元素用來展示整個頁面的開頭，像是開場白的存在，通常會包住一群元素，可能包含網站的logo、網頁關鍵標題、search bar、導航條(menu選單）等。

  

• <header>元素也可以放在其他網頁區塊作為開場白區塊，比方網站中某個article文章的開頭，用好幾個元素表示，也可以用<header>包起來。

  

<main>

<main>元素是整個網頁的主要展示區塊，通常整個頁面只會有一個<main>，它會夾在網頁的<header>跟<footer>之間。（IE瀏覽器不支援該元素。）

<footer>

<footer>元素是整個網頁的頁腳，它放在頁面的最底部。通常會放版本資訊，或是其他通向外部相關主題網站的超連結。也可以用在區部份塊的結尾框。

<aside>

• <aside>元素是網頁的側邊欄。通常用來放跟中間的內容不相關的內容，用以區隔跟中間內容相混淆。很多時候，也會當作側邊選單的容器。

  

• <aside>也可以當某個區塊的側邊欄

  

<section>

• <section>用來表示網頁中的一個片段，它可以包在其它語意化的容器內，不過通常還是放在網頁主要的展示區。<section>通常是為了表現一群元素的主題性，所以它會用來包住一群有同樣的上下文關聯的內容。

<article>

<article>元素用來表示一個網站內的文章、評論、或是留言等獨立的一篇內容。

<section>與<article>通常會互相包來包去，並沒有限定一定誰要包住誰，主要是看這個內容用怎樣的語意元素來包是最符合它的內容特性。

<nav>

• <nav>元素是一個網頁的導航欄，它通常會放通向該網站的其他分頁，或是通向外部連結的元素。

  

• <nav>內的menu或是links，通常會用<ul>、<li>來包，瀏覽器閱讀<li>的內容時，它的SEO會比只用<a>來包的內容要來得重要。

    <nav>
    	<ul>
    	  <li><a>首頁</a></li>
    	  <li><a>評論</a></li>
    	  <li><a>新聞</a></li>
    	  <li><a>活動</a></li>
    	  <li><a>聯絡我們</a></li>
    	</ul>
    </nav>
  

  只用<a>元素包的內容，它的重要性相對低。

    <nav>
      <a>首頁</a>
      <a>評論</a>
      <a>新聞</a>
      <a>活動</a>
      <a>聯絡我們</a>
    </nav>
  

• 關於<nav>除了包主要導航欄，是否也可以包其它次要的連結欄，並無定論。

• <nav>裡是否要用<ul>、<li>包也不是絕對。

• 關於上兩點，我自己目前是主要的導航欄內容相對整個網站來說是重要的，我就會用<li>包，如果是其它次要的連結，我就只會用<a>元素來包內容。

HTML5推出語意化標籤，如何用得恰當也是我還在學習的，怎樣才是最對的包法，可能每個人都有不同看法，這篇文章僅介紹並對標籤的語意特性有更深一步的認識。那麼，常用的語意化標籤介紹完了，可以再拉回去最上面那張網站版型圖看看，或許會更看得懂了喲！

今天的筆記到這，這也是HTML最後的一篇筆記，明天就會進入CSS的筆記了。那麼明天見～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。