語義是語言的單詞和短語的意義的研究。
語義元素是具有意義的元素。
語義化的HTML是使用HTML標記，以加強在網頁和網絡應用程序的語義或含義的信息，而不是僅僅來定義它的演示或看。
語義化的HTML是通過傳統的網絡瀏覽器以及許多其他用戶代理處理。 CSS是用來表明其呈現給人類用戶。
什麼是語義元素？
語義元素清楚地描述到瀏覽器，開發人員都它的意義。
非語義元素的例子： <div>和<span> -告訴一無所知其內容。
語義元素的實例： <form> <table>和<img> -明確規定其含量。
瀏覽器支持
| 是 | 是 | 是 | 是 | 是 |
HTML5語義元素在所有現代瀏覽器都支持。
此外，你可以"teach"舊的瀏覽器如何處理"unknown elements" 。
閱讀關於它在瀏覽器支持HTML5 。
在新的HTML5語義元素
許多網站的HTML代碼，如： <div id="nav"> <div class="header"> <div id="footer">
以指示導航，頁眉和頁腳。
HTML5提供了新的語義元素來定義一個網頁的不同部分：
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section>元
所述<section>元素定義了一個文檔中的一個部分。
根據W3C的HTML5文檔： "A section is a thematic grouping of content, typically with a heading."
一個網站的主頁可以被劃分成介紹，內容和聯繫人信息部分。
HTML5 <article>元
所述<article>元素指定獨立的，自包含的內容。
文章應該做出自己的感覺，應該可以從網站的其餘部分獨立閱讀。
的其中一個實施例<article>可以使用元件：
- 論壇發帖
- 博客文章
- 報紙文章
例
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> 試一試» 嵌套語義元素
在HTML5標準，所述<article>元素定義相關元件的一個完整的，自包含塊。
所述<section>元素被定義為相關元素的塊。
我們可以用定義來決定如何嵌套的元素？ 不，我們不可以！
在互聯網上，你會發現HTML頁面<section>包含元素<article>元素，和<article>包含元素<sections>元素。
您還可以找到與頁面<section>包含元素<section>元素，和<article>包含元素<article>元素。
報紙：體育articles在體育section ，有一個技術section各article
HTML5 <header>元
所述<header>元素指定為一個文件或部分標題。
所述<header>元素應該被用作用於介紹內容的容器。
可以有多個<header>一個文檔中的元素。
下面的示例定義為物品的標頭：
例
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article> 試一試» HTML5 <footer>元
所述<footer>元素指定為一個文件或部分頁腳。
甲<footer>元件應包含有關它的包含單元信息。
頁腳通常包含的文件，版權信息的作者，鏈接到的使用條款，聯繫方式等。
你可以有幾個<footer>一個文檔中的元素。
例
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer> 試一試» HTML5 <nav>元
所述<nav>元素定義了一組導航鏈接。
所述<nav>元件是用於導航鏈接的大塊。 然而，在文檔中並不是所有的環節應該是一個內部<nav>元素！
例
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> 試一試» HTML5 <aside>元
所述<aside>元件從它被放置在內容定義了一些內容一邊(like a sidebar) 。
旁白內容應與周圍的內容。
例
<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 <figure>和<figcaption>元素
在書籍和報紙，是很常見的有圖片的標題。
標題的目的是為了視覺說明添加到圖像。
與HTML5，圖像和字幕可以一起在分組<figure>元素：
例
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure> 試一試» 所述<img>元素定義了圖像，則<figcaption>元素定義了字幕。
為什麼需要語義HTML5元素？
與HTML4，開發人員使用自己喜歡的屬性名稱樣式的頁面元素：
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
這使得它不可能被搜索引擎識別正確的網頁內容。
與HTML5元素，如： <header> <footer> <nav> <section> <article> ，這將變得更加容易。
根據W3C，語義網：
“允許數據共享和跨應用，企業和社區再利用。”
注意事項
在情況下，一個文件需要比在HTML單獨表達更精確的語義，該文檔的片段可以與有意義的類名跨度或div元素內被封閉，例如<跨度類=“作者”>和<DIV類=“發票” >。 如果這些類名稱也是一個模式或本體中的片段標識符，它們可以鏈接到更多定義的含義。 微形式化方法在HTML語義。
這種方法的一個重要的限制是基於要素納入這樣的標記必須滿足良構的條件。 由於這些文件是廣泛的樹型結構，這意味著從一個子樹只有平衡的片段可以以這種方式進行標記。 標記式HTML的任意截面的裝置將需要獨立的標記結構本身，諸如的XPointer的機構。
好的語義化HTML還提高了網頁文檔的可訪問性（也請參見Web內容無障礙指南）。[來源請求]例如，當屏幕閱讀器或語音瀏覽器能夠正確地確定一個文檔的結構，也不會浪費視障用戶的通過時，它已經被正確的標記讀出重複或不相關的信息的時間。
在HTML5語義元素
下面是HTML5的新語義元素的字母順序列表。
鏈接到我們的完整的HTML5參考 。
| 標籤 | 描述 |
|---|---|
| <article> | 定義文章 |
| <aside> | 從頁面內容定義內容一邊 |
| <details> | 定義的其他詳細信息，用戶可以查看或隱藏 |
| <figcaption> | 定義了一個標題為<figure>元件 |
| <figure> | 指定自包含的內容，比如插圖，圖表，圖片，代碼清單等。 |
| <footer> | 定義頁腳的文檔或節 |
| <header> | 指定為一個文件或部分報頭 |
| <main> | 指定文件的主要內容 |
| <mark> | 定義標記/高亮文本 |
| <nav> | 定義導航鏈接 |
| <section> | 定義部分文檔中 |
| <summary> | 定義了一個可見的標題為<details>元件 |
| <time> | 定義日期/時間 |