1. HTML語義化的理解
根據內容的結構化，選擇合適的標簽，便於開發出讀者閱讀、寫出更優雅的代碼，讓瀏覽器的爬蟲和機器很好地解析。
好處：
(1). 為了在沒有css時，也可以很好地呈現出內容結構，代碼結構。
(2). 提升用戶體驗：title、alt用於解釋名詞或解釋圖片信息。label標簽的活用。
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。
(3). 有利於SEO: 和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標簽來確定上下文和各個關鍵字的權重；
(4). 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
(5). 便於團隊開發和維護，語義化更具可讀性，遵循W3C標准的團隊都遵循這個標准，可以減少差異化。
寫HTML代碼時應注意什么？
盡可能少的使用無語義的標簽div和span；
在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
不要使用純樣式標簽，如：b、font、u等，改用css設置。
需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標簽包起來，並用legend標簽說明表單的用途；
每個input標簽對應的說明文本都需要使用label標簽，並且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。
HTML新增語義標簽
header元素
header 元素代表“網頁”或“section”的頁眉。
通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。
整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容塊增加一個header元素
<header> <hgroup> <h1>網站標題</h1> <h1>網站副標題</h1> </hgroup> </header>
header的示例代碼
header使用注意：
可以是“網頁”或任意“section”的頭部部分；
沒有個數限制。
如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
footer元素
footer元素代表“網頁”或“section”的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。如果footer元素包含了整個節，那么它們就代表附錄，索引，提拔，許可協議，標簽，類別等一些其他類似信息。
<footer> COPYRIGHT@小北 </footer>
footer的示例代碼
footer使用注意：
可以是“網頁”或任意“section”的底部部分；
沒有個數限制，除了包裹的內容不一樣，其他跟header類似。
hgroup元素
hgroup元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合
<hgroup> <h1>這是一篇介紹HTML 5語義化標簽和更簡潔的結構</h1> <h2>HTML 5</h2> </hgroup>
hgroup示例代碼
hgroup使用注意：
如果只需要一個h1-h6標簽就不用hgroup
如果有連續多個h1-h6標簽就用hgroup
如果有連續多個標題和其他文章數據，h1-h6標簽就用hgroup包住，和其他文章元數據一起放入header標簽
nav元素
nav元素代表頁面的導航鏈接區域。用於定義頁面的主要導航部分。
<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav>
nav實例
但是我在有些時候卻情不自禁的想用它，譬如：側邊欄上目錄，面包屑導航，搜索樣式，或者下一篇上一篇文章，但是事實上規范上說nav只能用在頁面主要導航部分上。頁腳區域中的鏈接列表，雖然指向不同網站的不同區域，譬如服務條款，版權頁等，這些footer元素就能夠用了。
nav使用注意：
用在整個頁面主要導航部分上，不合適就不要用nav元素；
aside元素
aside元素被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、標簽、名次解釋等。（特殊的section）
在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以是日志串連，其他組的導航，甚至廣告，這些內容相關的頁面。
<article> <p>內容</p> <aside> <h1>作者簡介</h1> <p>小北，前端一枚</p> </aside> </article>
aside實例
aside使用總結：
aside在article內表示主要內容的附屬信息，
在article之外則可做側邊欄，沒有article與之對應，最好不用。
如果是廣告，其他日志鏈接或者其他分類導航也可以用。
section元素
section元素代表文檔中的“節”或“段”，“段”可以是指一篇文章里按照主題的分段；“節”可以是指一個頁面里的分組。
section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。如下：
<section> <h1>section是啥？</h1> <article> <h2>關於section</h1> <p>section的介紹</p> <section> <h3>關於其他</h3> <p>關於其他section的介紹</p> </section> </article> </section>
section示例代碼
section使用注意：
一張頁面可以用section划分為簡介、文章條目和聯系信息。不過在文章內頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利，可以用div。
表示文檔中的節或者段；
article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div
article元素
article元素最容易跟section和div容易混淆，其實article代表一個在文檔，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）
除了它的內容，article會有一個標題（通常會在header里），會有一個footer頁腳。我們舉幾個例子介紹一下article，好更好區分article、section、div
<article> <h1>一篇文章</h1> <p>文章內容..</p> <footer> <p><small>版權：html5jscss網所屬，作者：小北</small></p> </footer> </article>
一篇簡單文章的article示例代碼
上例是最好簡單的article標簽使用情況，如果在article內部再嵌套article，那就代表內嵌的article是與它外部的內容有關聯的，如博客文章下面的評論，如下：
<article> <header> <h1>一篇文章</h1> <p><time pubdate datetime="2012-10-03">2012/10/03</time></p> </header> <p>文章內容..</p> <article> <h2>評論</h2> <article> <header> <h3>評論者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> </header> <p>哈哈哈</p> </article> <article> <header> <h3>評論者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> </header> <p>哈？哈？哈？</p> </article> </article> </article>
文章里的評論，一個article嵌套article來表示的實例
article內部嵌套article，有可能是評論或其他跟文章有關聯的內容。那article內部嵌套section一般是什么情況呢。如下：
<article> <h1>前端技術</h1> <p>前端技術有那些</p> <section> <h2>CSS</h2> <p>樣式..</p> </section> <section> <h2>JS</h2> <p>腳本</p> </section> </article>
文章里的章節，一個article里的section實例
因為文章內section部分雖然也是獨立的部分，但是它門只能算是組成整體的一部分，從屬關系，article是大主體，section是構成這個大主體的一部分。本網站的全部文章都是article嵌套一個個section章節，這樣能讓瀏覽器更容易區分各個章節所包括的內容。
那section內部嵌套article又有哪些情況呢，如下
<section> <h1>介紹: 網站制作成員配備</h1> <article> <h2>設計師</h2> <p>設計網頁的...</p> </article> <article> <h2>程序員</h2> <p>后台寫程序的..</p> </article> <article> <h2>前端工程師</h2> <p>給樓上兩位打雜的..</p> </article> </section>
一個section里的article實例
設計師、程序員、前端工程師都是一個獨立的整體，他們組成了網站制作基本配備，當然還有其他成員~~。設計師、程序員、前端工程師就像article，是一個個獨立的整體，而section將這些自成一體的article包裹，就組成了一個團體。
article和section和例子就例舉這么多了，具體情況具體分析，不易深究。漏了divd，其實div就是只是想用來把元素組合或者給它們加樣式時使用。
article使用注意：
- 自身獨立的情況下：用article
- 是相關內容：用section
- 沒有語義的：用div
HTML5其他結構元素標簽
HTML5節元素標簽包括body article nav aside section header footer hgroup ，還有h1-h6 address。
address代表區塊容器，必須是作為聯系信息出現，郵編地址、郵件地址等等,一般出現在footer。h1-h6因為hgroup，section和article的出現，h1-h6定義也發生了變化，允許一張頁面出現多個h1。