HTML5文字字型與標註

元素標籤

字型:mark(標記文字)、ruby(注音標示)、rt(注音)、rp(ruby註解)

標註:article(文章)、header(頁首)、footer(頁尾)、section(節)、hgroup(標題群組)、nav(導覽)、aside(側欄)、time(時間戳記)、wbr(允許斷行)、bdi(方向隔離)

關連文章:通用HTML(1)-【文字字型篇】通用HTML(3)-【文字標註篇】

article

說明:表示標籤裡的內容是單篇文章。可以包含標題(hgroup)、內文、頁首(header)頁尾(footer)與時間(time)等資訊。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<article>
HTML的文字標註標籤只是用來對標籤的內容作聲明,通常沒有實際效果,不過使用者可以用CSS來修改顯示的樣式。
</article>

【結果】

HTML的文字標註標籤只是用來對標籤的內容作聲明,通常沒有實際效果,不過使用者可以用CSS來修改顯示的樣式。

aside

說明:側邊欄內容。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

HTML5新標籤
<aside>新標籤除了多媒體外,也增加許多文章標記標籤。</aside>

【結果】

HTML5新標籤

bdi

說明:雙向隔離,用來標記方向不明的文字。例如阿拉伯語的文字會使文字方向變得不正確。目前沒有任何瀏覽器支援。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

User <bdi>إيان</bdi>: 90 points

【結果】

User إيان: 90 points

footer

說明:表示標籤裡的內容是頁尾。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<footer>本文撰寫於 2011/11/12</footer>

【結果】

本文撰寫於 2011/11/12

header

說明:表示標籤裡的內容是頁首。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<header>歡迎來到 [ 摩刻部落 ],祝你有個充實美好的一天。</header>

【結果】

歡迎來到 [ 摩刻部落 ],祝你有個充實美好的一天。

hgroup

說明:標題群組。可將主標題與副標題結合。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<hgroup>


第一章

第二節
</hgroup>

【結果】

第一章

第二節

mark

說明:標記文字內容。預設的效果類似螢光標示文字。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<mark>可以作為<mark>重點</mark>標記。

【結果】

可以作為重點標記。

nav

說明:定義一個導覽列。

屬性:

  • class=“類別”:指定物件類別。
  • dir=“顯示方向(ltr | rtl)“:由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang=“所屬語言”:標籤包覆文字所屬的語言。
  • style=“樣式”:設定顯示樣式。
  • tabindex=“數字”:使用Tab時的瀏覽順序。
  • title=“標題”:指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<nav>
    HTML |
    CSS |
    Android |
    Facebook
</nav>

【結果】

rp

說明:當瀏覽器不支援標籤時,要顯示什麼樣的文字。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<ruby>中<rt><rp>(</rp>ㄓㄨㄥ<rp>)</rp></rt></ruby>

【結果】

(ㄓㄨㄥ)

rt

說明:定義注音標示的注音字。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<ruby>中<rt>ㄓㄨㄥ</rt></ruby>

【結果】

ㄓㄨㄥ

ruby

說明:將標記文字進行注音標示。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<ruby>中<rt>ㄓㄨㄥ</rt></ruby>

【結果】

ㄓㄨㄥ

section

說明:表示標籤裡的內容是section。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

<section>HTML5未來可能會新增chapter標籤。</section>

【結果】

HTML5未來可能會新增chapter標籤。

time

說明:提供一個機器可讀的時間標記。目前沒有任何瀏覽器支援。

屬性:

  • class="類別":指定物件類別。
  • datetime="日期/時間":指定標記的日期/時間。若無標記則以標籤內容作為日期/時間。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • pubdate="pubdate":表示
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

我<time datetime="2011-11-12">今天</time>發表了一篇文章。

【結果】

發表了一篇文章。

wbr

說明:斷字時機。用來標記一個很長的英文單字,避免瀏覽器在錯誤的地方換行。

屬性:

  • class="類別":指定物件類別。
  • dir="顯示方向(ltr | rtl)":由左到右(ltr)或由右到左(rtl),預設值是「ltr」。
  • id="物件ID":指定物件所屬ID,在同一個頁面中ID不能重覆。
  • lang="所屬語言":標籤包覆文字所屬的語言。
  • style="樣式":設定顯示樣式。
  • tabindex="數字":使用Tab時的瀏覽順序。
  • title="標題":指定一個標題,當滑鼠移到超連結上時會顯現。

【範例】

To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.

【結果】

To learn AJAX, you must be familiar with the XMLHttpRequest Object.