介紹HTML5語意元素實例-H5教程-PHP中文網

什麼是語意元素?

一個語意元素能夠清楚的描述其意義給瀏覽器和開發者。

無語意元素實例:

和 - 不考慮內容.

語意元素實例:

, , and - 清楚的定義了它的內容.

瀏覽器支援

Internet Explorer 9+, Firefox, Chrome, Safari 和Opera 支援語意元素。

注意: Internet Explorer 8及更早版本不支援該元素. 但是文章底部提供了相容的解決方法.

HTML5中新的語意元素

許多現有網站都包含以下HTML程式碼：

, 或

, 來指明導航連結, 頭部,以及尾部.

HTML5提供了新的語意元素來明確一個Web頁面的

#HTML5

元素

標籤定義獨立的內容。 .

元素使用實例:

Forum post

Blog post

News story

#Comment

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

登入後複製

HTML5

元素

標籤定義導覽連結的部分。

元素用於定義頁面的導航連結部分區域，但是，不是所有的連結都需要包含在

元素中!

實例

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

登入後複製

HTML5

元素

標籤定義頁面主區域內容以外的內容（例如側邊欄）。

aside 標籤的內容應與主區域的內容相關.

<p>My family and I visited The Epcot center this summer.</p>
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

登入後複製

HTML5

元素

元素描述了文件的頭部區域

元素注意用於定義內容的介紹展示區域.

在頁面中你可以使用多個

元素.

以下實例定義了文章的頭部:

實例

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

登入後複製

HTML5