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