iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
1

語意化標籤

我們學到,標籤的語意是撰寫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的筆記了。那麼明天見~/images/emoticon/emoticon41.gif

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


上一篇
Day8 動手寫HTML(3)
下一篇
Day10 如何套用CSS
系列文
從門外漢到前端新手30

尚未有邦友留言

立即登入留言