HTML5語義化的一些問題__HTML

1.什麼是HTML5語義化：

根據內容的結構化，選擇合適的標籤，便於讓開發人員讀者寫出更優雅的代碼的同時讓機器以及瀏覽器更好的解析。

2.語義化好處：

1）在沒有css情況下，也能呈現出好的內容結構。

2）加強使用者體驗，比如，alt,label等

3）有利於SEO：和搜尋引擎建立良好的溝通，有助於爬抓取更多的資訊，爬蟲依賴於標籤來確定上下文和各個關鍵字的權重。

4）方便其他裝置解析

5）便於團隊開發維護

3.寫HTML代碼需注意：

1）少寫無意義的div和span

2）語義不明顯時，需要使用div或者p時，盡量使用p。

3)不使用純樣式標籤，如font,b,u,盡量使用css設定

4）需強調的文本，用strong,不用b,斜體為em,不用i

5)使用表格時，標題用caption,表頭用thread，主體用tbody 尾部用tfoot，表頭和一般儲存格分開，表頭用th。儲存格用td

6)表單域用fieldset包圍，並用legend標籤說明表單用途

7）每個input標籤對應的說明文本都要使用label標籤，並通過為input標籤設定id屬性，在label標籤中設定for=someld來說明文本和相對應的input關聯起來

4）HTML5新增的語義化標籤：

1）header：可以包含h1-h6或hgroup作為標題，也可以包含目錄，搜尋方塊，一個nav,或者任何相關logo

2）footer：包含該節的基本資料：作者，相關文檔連結，著作權資料。。。

3）hgroup：包含連續多個的h1-h6,若只有一個h1-h6則不需要。

4）nav：代表頁面導航連結地區。

5）aside：被包含在article元素中作為內容的附屬資訊部分，最典型的是側邊欄

<article>    <p>內容</p>    <aside>        <h1>作者簡介</h1>        <p>生平榮耀富貴</p>    </aside></article>

6）section：代表文檔中的節或段。

<section>    <h1>section是啥。</h1>    <article>        <h2>關於section</h1>        <p>section的介紹</p>        <section>            <h3>關於其他</h3>            <p>關於其他section的介紹</p>        </section>    </article></section>

7）article：代表在一個文檔，頁面或者網站中自成一體的內容

注意：article元素最容易和section，div容易混。當article嵌套article表示內部與外部是有關聯的，當article嵌套section表示

表示從屬關係，section嵌套article是內部為獨立的整體，組成了一個section團體，而div就是想把元素組合或者給他們加樣式用的。