iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 15
2

html5 Doctor 曾經釋出過下面這個圖,用來幫助你選擇最符合語義的 HTML5 元素。[1]

今天就跟著這張表來看看幾個最常用的 HTML5 標籤該怎麼用。

開始 --> 針對網頁內容的一個區塊:

  1. 是否為主要的導覽區塊?
    YES -- 請使用 <nav>

    注意:使用 <nav> 標籤,必為 html 頁面中主要的導覽區塊,一些零散的 link 請不要用此標籤。

  2. 此區塊自己本身有意義嗎?
    YES -- 請使用 <artical>

    注意:所謂的有意義是指有很高的獨立性與完整性,且帶有 heading,例如:報紙新聞文章、部落格文章、論壇文章等。

  3. 需要他來了解當前的內容嗎?
    NO -- 請使用 <aside>
    例如:側選單、引文、廣告、註腳等等。

  4. 可以將他移到附件、附錄嗎?
    YES -- 請使用 <figure>

    <figure> 重要的是移到哪裡都不會影響整個網頁的閱讀,他可以包括圖片、解說或程式碼片段。

  5. 是否有邏輯的去增加一個標題?
    YES -- 請使用 <section>

    曾在某個網站看過產品清單是使用<section>標籤,裡面包含圖片、標題、價格等,而標題即為產品名稱是用<h2>heading。這樣也算是一個完整的區塊。

    注意:<section>可以存在<artical> 內,反之也可以,這兩個標籤並沒有定義說誰才可以包誰。

  6. 是否有任何的語意?
    YES -- 請使用有語意的標籤如:<p> <address> <blockquote <pre>等等
    NO -- 如果沒有任何語意請使用<div>

    注意:因此在網頁製作上如果大量使用<div>對瀏覽器跟搜尋引擎來說並沒有任何的加分,因為 <div> 不帶任何語意,因此在不做任何其他特殊的SEO處理前,使用正確的 HTML5 語意化標籤就已經可以讓你的網站加分不少。

還沒試過 HTML5 語意化標籤的新手們,可以試試唷~各位看倌明天見囉~

參考資料:
[1] http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
[2] http://html5doctor.com/nav-element/
[3] http://phoebe-blog.logdown.com/posts/615224


上一篇
Day14:小事之 HTML 語意化標籤 上篇
下一篇
Day16:小事之 HTML table
系列文
前端路上那些重要與不重要的小事30

1 則留言

0
Chris
iT邦新手 5 級 ‧ 2018-01-04 08:42:38
`<p>``<address>``<blockquote``<pre>`

應該加個空白

`<p>` `<address>` `<blockquote` `<pre>`

感謝Chris~眼睛好利~/images/emoticon/emoticon12.gif

Chris iT邦新手 5 級‧ 2018-01-04 12:19:21 檢舉

我自己也會寫這樣...XDDD
久了就知道要修了。

我要留言

立即登入留言