HTML語義
語義類標籤：它們的特點是視覺表現上互相都差不多，主要的區別在於它們表示了不同的語義，比如大家會經常見到的section、nav、p，這些都是語義類的標籤。
在很多工作場景裏，語義類標籤也有它們自己無可替代的優點。正確地使用語義標籤可以帶來很多好處：
- 語義類標籤對開發者更爲友好，使用語義類標籤增強了可讀性，即便是在沒有CSS的時候，開發者也能夠清晰地看出網頁的結構，也更爲便於團隊的開發和維護。
- 語義類標籤十分適宜機器閱讀。它的文字表現力豐富，更適合搜索引擎檢索（SEO），也可以讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提升網頁的搜索量，並且語義類還可以支持讀屏軟件，根據文章可以自動生成目錄等等。
如果所有並列關係都用ul，會造成大量冗餘標籤。錯誤地使用語義標籤，會給機器閱讀造成混淆、增加嵌套，給CSS編寫加重負擔。
作爲自然語言延伸的語義類標籤
作爲自然語言和純文本的補充，用來表達一定的結構或者消除歧義。
- 表達一定的結構：HTML5中引入了這個表示ruby的標籤，它由ruby、rt、rp三個標籤來實現（注音/註解）
- 消除歧義：em（重音/重點）和strong對比
作爲標題摘要的語義類標籤
語義化的HTML能夠支持自動生成目錄結構，HTML標準中還專門規定了生成目錄結構的算法。
- h1-h6是最基本的標題，它們表示了文章中不同層級的標題。有些時候，我們會有副標題，爲了避免副標題產生額外的一個層級，我們使用hgroup標籤。在hgroup中的h1-h6被視爲同一標題的不同組成部分。
- section標籤：section的嵌套會使得其中的h1-h6下降一級，因此，在HTML5以後，我們只需要section和h1就足以形成文檔的樹形結構
作爲整體結構的語義類標籤
隨着越來越多的瀏覽器推出“閱讀模式”，以及各種非瀏覽器終端的出現，語義化的HTML適合機器閱讀的特性變得越來越重要。應用了語義化結構的頁面，可以明確地提示出頁面信息的主次關係，它能讓瀏覽器很好地支持“閱讀視圖功能”，還可以讓搜索引擎的命中率提升，同時，它也對視障用戶的讀屏軟件更友好。
- header，如其名，通常出現在前部，表示導航或者介紹性的內容。
- footer，通常出現在尾部，包含一些作者信息、相關鏈接、版權信息等。
header和footer一般都是放在article或者body的直接子元素，但是標準中並沒有明確規定，footer也可以和aside，nav，section相關聯（header不存在關聯問題）。
- aside表示跟文章主體不那麼相關的部分，它可能包含導航、廣告等工具性質的內容。
aside很容易被理解爲側邊欄，實際上二者是包含關係，側邊欄是aside，aside不一定是側邊欄。
aside和header中都可能出現導航（nav標籤），二者的區別是，header中的導航多數是到文章自己的目錄，而aside中的導航多數是到關聯頁面或者是整站地圖。
最後footer中包含address，這是個非常容易被誤用的標籤。address並非像date一樣，表示一個給機器閱讀的地址，而是表示“文章（作者）的聯繫方式”，address明確地只關聯到article和body。
- 在HTML中，有三個跟引述相關的標籤blockquote表示段落級引述內容，q表示行內的引述內容，cite表示引述的作品名。
- figure也是我們的一種標籤（用於表示與主文章相關的圖像、照片等流內容）。這種插入文章中的內容，不僅限圖片，代碼、表格等，只要是具有一定自包含性（類似獨立句子）的內容，都可以用figure。這裏面，我們用figcaption表示內容的標題，當然，也可以沒有標題。
- dfn標籤：dfn標籤是用來包裹被定義的名詞。
- pre標籤，表示這部分內容是預先排版過的，不需要瀏覽器進行排版。
![在這裏插入圖片描述]()
