距HTML5標準規范制定完成并公開發布已經有好些年了，面試時也少不了要問對HTML5語義化得理解。但是在實際運用時，真正使用HTML5標簽來開發的似乎不是很多，可能一部分原因是仍有部分用戶使用在使用低版本瀏覽器。

    但是就我個人而言，因選取一些標簽時會比較糾結，所以仍使用了div。（PS：正是因為這樣，才有了這篇文章的，沒錯，以后要注意語義化了）

    什么是語義化？就是用合理、正確的標簽來展示內容，比如h1~h6定義標題。

    語義化優點：

• 易于用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
• 有利于SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
• 方便其他設備解析，如盲人閱讀器根據語義渲染網頁
• 有利于開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。

    今天先介紹主體結構標簽，如圖所示：

    1、<header>

    <header>定義文檔或者文檔的部分區域的頁眉，應作為介紹內容或者導航鏈接欄的容器。

    在一個文檔中，您可以定義多個<header>元素，但需要注意的是<header>元素不能作為<address>、<footer> 或 <header> 元素的子元素。

    2、<nav>

    <nav>描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表。

    在一個文檔中，可定義多個<nav>元素。

    3、<main>

    <main> 定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站logo，搜索框（除非搜索框作為文檔的主要功能）。

    需要注意的是在一個文檔中不能出現多個<main>標簽。

    4、<article>

    <article>元素表示文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目。

    當<article>元素嵌套使用時，則該元素代表與外層元素有關的文章。例如，代表博客評論的<article>元素可嵌套在代表博客文章的<article>元素中。

    5、<aside>

    <aside> 元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。

    6、<footer>

    <footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。

    使用footer插入聯系信息時，應在 footer 元素內使用 <address> 元素。

    注意不能包含<footer>或者<header>

    7、<section>

    <section>表示文檔中的一個區域（或節），比如，內容中的一個專題組。

    如果元素內容可以分為幾個部分的話，應該使用 <article> 而不是 <section>。
不要把 <section> 元素作為一個普通的容器來使用，特別是當<section>僅僅是為了美化樣式或方便腳本使用的時候，應使用<div>。

    這幾個標簽，比較容易混淆的是<section>、<article>，所以這里特別說明：

    “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

    通俗來說就是<article>比<section>更具有獨立性、完整性。可通過該段內容脫離了所在的語境，是否完整、獨立來判斷。