怎樣理解 HTML 語義化？
什么是HTML的語義，直觀的說就是HTML的含義，從HTML代碼本身就可以判斷包含內(nèi)容的作用。HTML標簽語義化是Web網(wǎng)頁標準化的重要一環(huán)，也是標準制定時重要的設(shè)計原則。HTML5中新增加的很多標簽（如：<article>、<nav>、<header>和<footer>等）就是基于這樣的設(shè)計原則。頁面標簽語義化的優(yōu)點明顯，標簽語義化使得諸如搜索引擎以及第三方內(nèi)容抓取工具等更容易讀懂頁面代碼。機器不會關(guān)注頁面實際渲染的外觀，只會關(guān)注頁面內(nèi)容本身，頁面渲染的漂亮與否對機器識別毫無幫助。那么具體什么樣的頁面設(shè)計才是語義化的頁面？瀏覽器會對語義化的標簽設(shè)計默認的樣式，所以驗證頁面是否語義規(guī)范的一個簡單方式就是去掉CSS樣式后頁面是否還能正常閱讀。
語義化的優(yōu)點？
1、有利于搜索引擎以及爬蟲工具等更容易讀懂頁面代碼。因為機器不會關(guān)注頁面實際渲染的外觀，爬蟲是依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重，只會關(guān)注頁面內(nèi)容本身，頁面渲染的漂亮與否對機器識別毫無幫助。
2、語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)。HTML標簽是頁面內(nèi)容的載體，語義化的標簽相對于是對所包含內(nèi)容的一個整體聲明，也使得頁面整體結(jié)構(gòu)清晰。
3、便于團隊開發(fā)和維護
4、便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼。使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。
如何做到html語義化？
A、代碼中使用的標簽<div>和<span>是在所有的HTML標簽中最沒有語義的。所以要做到標簽語義化，首先要盡量少用<div>和<span>這兩個標簽，在使用這兩個標簽時盡量能找到更有語義的標簽代替。
網(wǎng)頁的開發(fā)者應(yīng)該熟悉所有規(guī)范的HTML標簽的使用場景，在合適的地方使用合適的標簽。
例如，標簽Hx系列則表示標題，在網(wǎng)頁中展示各層級的標題時使用；ul和ol標簽表示列表，在展現(xiàn)各種數(shù)據(jù)列表或者菜單時使用；其它使用率較高的語義標簽有：p、em、strong、table、site、blockquote等，以及HTML5新加入的標簽：<header><footer><article><section><nav><aside>等。
B、熟悉各標簽規(guī)范的屬性，給HTML標簽設(shè)置必要的屬性。
和標簽語義化的重要性一樣，某些屬性的設(shè)置也是HTML語義化重要的環(huán)節(jié)。在很多規(guī)范中規(guī)定需要設(shè)置的兩個屬性是alt屬性和title屬性，這兩個屬性設(shè)置的也是為了提高HTML的語義。
在img標簽中，alt是必須要設(shè)置的屬性，因為img是自閉合標簽，并沒有包含可以解釋說明圖片的額外信息。alt屬性的文字說明是當圖片在瀏覽器中未加載時的顯示的代替；title屬性是可選屬性，當標簽包含的內(nèi)容不足以說明語義時，可以通過title添加額外的信息, 在瀏覽器中當鼠標移到元素上時會顯示提示文本。
還有一個重要的屬性是<label>標簽中的for屬性。<label>標簽是<input>元素定義的標注。<label>標簽的for屬性值指代一個表單元素，屬性值為此表單元素的id值。for屬性的作用不僅把<lable>標簽上的觸發(fā)事件指向了for屬性指代的表單元素，也從語義上綁定了<lable>和此表單元素。
怎樣理解內(nèi)容與樣式分離的原則？
1）網(wǎng)頁分離
一個網(wǎng)頁分為三個部分：Html——結(jié)構(gòu)，css——表現(xiàn)，javascrip——行為。內(nèi)容也就是html，樣式也就是css。所以內(nèi)容和樣式的分離，就是指在網(wǎng)頁編碼的過程中，要將html和css兩大部分分開。
2）如何實現(xiàn)
內(nèi)容與樣式分離的原則的實現(xiàn)，一個是要依靠意識，另一個是依靠經(jīng)驗。
舉例而言，面對一個分塊明顯的網(wǎng)頁設(shè)計圖時：
初級的開發(fā)人員思路及制作方法：div 層層嵌套；
中級的開發(fā)人員思路及制造方法：去掉多余的 div ,進行簡化；
高級的開發(fā)人員思路及制造方法：最大化的簡化 html 的結(jié)構(gòu)，然后用 css 進行設(shè)置，減少 html 與 css 的契合度。
正確做法是寫HTML的時候先不管樣式，重點放在HTML的結(jié)構(gòu)和語義化上，讓HTML能提現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容,，然后進行 css 樣式設(shè)置，減少 HTML 與 CSS 契合度（即內(nèi)容與樣式分離） ，寫JS的時候，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化（即行為分離）。
3）分離原則的優(yōu)點
瀏覽器加載網(wǎng)頁頁面速度變快。分離原則下，大部分頁面代碼寫在了CSS當中，頁面體積容量變得更小。
網(wǎng)頁修改設(shè)計時，效率、省時。根據(jù)html標簽內(nèi)ID或class的標記，到CSS里找到相應(yīng)的ID或class，可以快速替換指定位置的樣式，不會破壞頁面架構(gòu)和其他部分的樣式。
典型的應(yīng)用就是網(wǎng)頁換膚，使用相同的 html 結(jié)構(gòu)，不同的 css 樣式。
更好地被搜索引擎收錄。基于內(nèi)容與樣式分離的原則，html的語義化就是首要考慮的,網(wǎng)頁中語義化的標簽代碼就會更加適合搜索引擎。
css樣式的分離，它可以根據(jù)不同的瀏覽器，達到顯示效果的統(tǒng)一。保證網(wǎng)頁架構(gòu)不變形的前提下，放心在不同瀏覽器渲染顯示樣式。
