語義類標簽是什么事扭，使用它有什么好處？
首先來說說為什么要使用語義乐横？相信很多剛?cè)腴T的前端開發(fā)工程師求橄，寫起HTML就是ul+div+span之類，不用復(fù)雜的語義標簽就走天下了葡公。這種寫法罐农，按照實際情況確實很難去區(qū)別是好還是不好，因為各有優(yōu)劣催什。在現(xiàn)代互聯(lián)網(wǎng)產(chǎn)品里涵亏，HTML多用于“描述界面”，而軟件界的東西蒲凶，實際上是幾乎沒有語義的气筋。
當然，正確使用語義標簽可以帶來很多好處豹爹，語義標簽也有他們無可替代的優(yōu)點裆悄！
好處一：語義標簽增強可讀性矛纹，沒有css的情況你通過語義標簽就能看出整個網(wǎng)頁的結(jié)構(gòu)臂聋，利于團隊的開發(fā)和維護。
好處二：語義標簽也很適合機器閱讀或南。它的文字表現(xiàn)力豐富孩等，適合搜索引擎檢索（SEO），也可以讓搜索引擎爬蟲更好的獲取到更多有效信息采够，有效提升網(wǎng)頁的搜索量肄方，并且語義類還可以支持讀屏軟件，根據(jù)文章自動生成目錄等等蹬癌。
不過权她，不恰當?shù)氖褂谜Z義標簽虹茶，也會造成負面影響。比如ul與ol的混淆使用隅要，開發(fā)者應(yīng)了解ul與ol的的概念和具體用法蝴罪。
winter老師建議：對于語義標簽，“用對”比“不用”好步清，“不用”比”用錯“好要门，有理想的前端工程師還是應(yīng)該去追求”用對“它們。
其實HTML語言更接近我們平常說話的自然語言廓啊，我們說話沒有唯一標準的措辭欢搜，語義標簽也是一樣。
作為自然語言延伸的語義類標簽
語義標簽使用的第一個場景谴轮，也是最自然的場景炒瘟，就是：作為自然語言和純文本的補充，用來表達一定的結(jié)構(gòu)或消除歧義书聚。
比如HTML5的ruby標簽唧领，它由ruby、rt雌续、rp三個標簽來實現(xiàn)斩个。當微信聊天的時候，不能用ruby標簽的形式驯杜，只有加個括號去注釋受啥，明顯沒ruby標簽更為直觀，效果差了不少鸽心。又或者用div+span去實現(xiàn)ruby的效果滚局，顯然ruby標簽更為直觀，可讀性強顽频。
還有一種情況就是藤肢，HTML有些標簽實際上就是必要的，甚至必要的程度可以達到：如果沒有這個標簽糯景，文字會產(chǎn)生歧義的程度嘁圈。
例如em標簽，我們都知道em標簽用來呈現(xiàn)被強調(diào)的文本蟀淮。
以下舉例三段話最住，嘗試發(fā)現(xiàn)自己哪讀音會發(fā)生變化，會加重怠惶。
今天我吃了一個蘋果
昨天我吃了一個香蕉
今天我吃了一個蘋果
昨天我吃了兩個蘋果
今天我吃了一個蘋果
實際上涨缚，不僅僅是讀音，這里的意思也發(fā)生了變化策治。第一個例子中脓魏，表示我今天吃的是蘋果兰吟，而不是別的什么東西，后邊例子中茂翔，則表示我今天只吃了一個蘋果揽祥，沒有多吃。
那么當沒有上下文的時候檩电，怎么去消除歧義呢拄丰？這是em標簽的用處就展示出來啦~
今天我吃了一個<em>蘋果</em>
今天我吃了<em>一個</em>蘋果
而em標簽與strong標簽又有區(qū)別，在HTML4.01中俐末，strong標簽定義為加粗的強調(diào)的文本料按，而在HTML5中，strong標簽定義為重要的文本卓箫，區(qū)別顯而易見载矿。
作為標題摘要的語義類標簽
首先我們需要形成一個概念，一篇文檔會有一個樹形的目錄結(jié)構(gòu)烹卒，它由各個級別的標題組成闷盔。這個樹形結(jié)構(gòu)可能不會跟HTML元素的嵌套關(guān)系一致。
例如：
<h1>HTML 語義 </h1>
<p>balah balah balah balah</p>
<h2> 弱語義 </h2>
<p>balah balah</p>
<h2> 結(jié)構(gòu)性元素 </h2>
<p>balah balah</p>
......
這段HTML幾乎是平鋪的元素旅急，h1 ~ p ~ h2
h1-h6是最基本的標題逢勾，它們表達了文章中不同層級的標題。有些時候藐吮，我們會有副標題溺拱，為了避免副標題產(chǎn)生額外的一個層級，我們使用hgroup標簽谣辞，接下來看有/無group標簽的對比：
<h1>JavaScript 對象 </h1>
<h2> 我們需要模擬類嗎迫摔？</h2>
<p>balah balah</p>? ? ......
此段的標題結(jié)構(gòu)為：
JavaScript 對象
? ??我們需要模擬類嗎？
? ? ......
<hgroup>
<h1>JavaScript 對象 </h1>
<h2> 我們需要模擬類嗎泥从？</h2>
</hgroup>
<p>balah balah</p>? ......
此段的標題結(jié)構(gòu)為：
JavaScript 對象——我們需要模擬類嗎句占？
? ? ......
一對比就不難看出，標題結(jié)構(gòu)的不同躯嫉，在hgroup標簽中的h1-h6被視為同一標題的不同組成部分纱烘。
還有另一個HTML5的section標簽，<section> 標簽定義了文檔的某個區(qū)域和敬。比如章節(jié)凹炸、頭部戏阅、底部或者文檔的其他區(qū)域昼弟。這個標簽可不僅僅是一個“有語義的div”，它會改變h1-h6的語義奕筐。section的嵌套會使得其中的h1-h6下降一級舱痘，因此在HTML5以后变骡，我們只需要section和h1就足以形成文檔的樹形結(jié)構(gòu)。
作為整體結(jié)構(gòu)的語義類標簽
隨著越來越多瀏覽器推出“閱讀模式”芭逝，以及各種非瀏覽器終端的出現(xiàn)塌碌，語義化的HTML適合機器閱讀的特性變得越來越重要。
應(yīng)用了語義化結(jié)構(gòu)的頁面旬盯，可以明確的提出頁面信息的主次關(guān)系台妆，它能讓瀏覽器很好的支持“閱讀試圖功能”，還可以讓搜索引擎的命中率提升胖翰，同時接剩，它也對視障用戶的讀屏軟件更為友好。
我們正確的使用整體結(jié)構(gòu)的語義類標簽萨咳，可以讓頁面對機器更為友好懊缺。舉例：
在body下面，有一個header培他，header里邊是一個nav鹃两，跟header同級有一個aside，aside里邊也有一個nav舀凛。接下來就是文章的整體了俊扳，也就是一個一個的section的堆砌。section里邊可能也有嵌套猛遍，然后最后一個是footer拣度，footer里邊有一個address這樣的內(nèi)容。
除此之外螃壤，還有article標簽抗果，article是一種特殊的結(jié)構(gòu)，它表示具有一定獨立性質(zhì)的文章奸晴。所以冤馏，article和body具有相似的結(jié)構(gòu)，同時寄啼，一個HTML頁面中可能有多個article存在逮光。
比如一個典型的場景就是多篇新聞?wù)故驹谕粋€新聞專題頁面中，這種類似報紙的多文章適合用article來組織墩划。
body里邊有自己的header和footer涕刚，然后里邊是豎篇的article，每一個article里邊都有自己的header乙帮、section杜漠、footer。這是一個經(jīng)典的多文章結(jié)構(gòu)。
在這個結(jié)構(gòu)里驾茴，我們看到了一些新標簽盼樟。
header，如其名锈至，通常出現(xiàn)在前部晨缴，表示導(dǎo)航或介紹性的內(nèi)容。
footer峡捡，通常出現(xiàn)在尾部击碗，包含一些作者信息、相關(guān)鏈接们拙、版權(quán)信息等延都。
header和footer一般放在article或者body的直接子元素，但是標準中并沒有明確規(guī)定睛竣，footer也可以和aside晰房、nav、section相關(guān)聯(lián)（header不存在關(guān)聯(lián)問題）射沟。
aside表示跟文章主體不那么相關(guān)的部分殊者，它可能包含導(dǎo)航、廣告等工具性質(zhì)的內(nèi)容验夯。
aside很容易被理解成側(cè)邊欄猖吴，實際上二者是包含關(guān)系，側(cè)邊欄是aside挥转，aside不一定是側(cè)邊欄海蔽。
aside和header中都可能出現(xiàn)導(dǎo)航，二者的區(qū)別是绑谣，header中的導(dǎo)航多數(shù)是到文章自己的目錄党窜，而aside中的導(dǎo)航多數(shù)是關(guān)聯(lián)頁面或者是整站地圖。
最后footer中包含adderss借宵，這是個非常容易被誤用的標簽幌衣。address并非像date一樣，表示一個給機器閱讀的地址壤玫，而是表示“文章（作者）的聯(lián)系方式”豁护，address明確的只關(guān)聯(lián)到article和body。
