HTML5語義標籤的實踐

標籤：

<article> 定義一篇文章

• 論壇發帖
• 部落格文章
• 一篇文章

<article>
  <h1>標題</h1>
  <p>內容</p>
</article>

 

<aside> 側邊欄

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<details> 附加詳細資料

<summary> 摘要

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

除了summary其他內容預設隱藏，當details元素添加了open屬性的時候p標籤的內容才會顯示。

<figcaption> 圖片標題
<figure> 定義圖片分組

<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>

<footer> 頁尾

<footer>

　　<p>底部</p>

</footer>

<header> 定義頭部

<header>
    <h1>標題</h1>
    <p>內容</p>
</header>

通常我們會用到文章的簡介裡面

<article>
  <header>
    <h1>標題</h1>
    <p>簡介</p>
  </header>
  <p>內容</p>
</article>

<main> 定義主體內容

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome is a free, open-source web browser developed by Google,
    released in 2008.</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
  </article>
</main>

<mark> 定義標記

<p>Do not forget to buy <mark>milk</mark> today.</p>

<nav> 定義一組連結

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

<section> 定義塊，通常包含一個標題和一段內容

<section>
  <h1>標題</h1>
  <p>內容</p>
</section>

<time> 定義時間

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

 

HTML5語義標籤的實踐