根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化）秉剑，選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析镰惦。簡(jiǎn)單來(lái)講是讓代碼更方便理解躏筏，更簡(jiǎn)潔哀峻，脫離了CSS還能看懂頁(yè)面侥钳。
隨著互聯(lián)網(wǎng)的發(fā)展适袜，WEB承載越來(lái)越多的信息（圖片，聲音舷夺，視頻等）苦酱，人們開始用機(jī)器來(lái)處理網(wǎng)絡(luò)信息，就此誕生了搜索引擎冕房。如此龐大及復(fù)雜的信息如何讓搜索引擎處理和挖掘躏啰，所以讓機(jī)器能夠更好地讀懂WEB上內(nèi)容就變得越來(lái)越重要。
語(yǔ)義化可以帶來(lái)的好處：
清晰的頁(yè)面結(jié)構(gòu)：去掉或樣式丟失的時(shí)候耙册，也能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)给僵，增強(qiáng)頁(yè)面的可讀性。
支持更多的設(shè)備：屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來(lái)“讀”你的網(wǎng)頁(yè)详拙。 如果你使用的含語(yǔ)義的標(biāo)記帝际，屏幕閱讀器會(huì)根據(jù)你的標(biāo)簽來(lái)判斷網(wǎng)頁(yè)的內(nèi)容，而不是一個(gè)字母一個(gè)字母的拼寫出來(lái)饶辙。
有利于SEO：和搜索引擎建立良好溝通蹲诀，有助于爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重弃揽。
便于團(tuán)隊(duì)開發(fā)和維護(hù)：在團(tuán)隊(duì)中大家都遵循同一個(gè)標(biāo)準(zhǔn)脯爪，可以減少很多差異化的東西则北，方便開發(fā)和維護(hù)，提高開發(fā)效率痕慢，甚至實(shí)現(xiàn)模塊化開發(fā)尚揣。
內(nèi)容與樣式分離的原則
1）網(wǎng)頁(yè)分離
一個(gè)網(wǎng)頁(yè)分為三個(gè)部分：Html——結(jié)構(gòu)，css——表現(xiàn)掖举，javascrip——行為快骗。內(nèi)容也就是html，樣式也就是css塔次。所以內(nèi)容和樣式的分離方篮，就是指在網(wǎng)頁(yè)編碼的過(guò)程中，要將html和css兩大部分分開励负。
2）如何實(shí)現(xiàn)
內(nèi)容與樣式分離的原則的實(shí)現(xiàn)藕溅，一個(gè)是要依靠意識(shí)，另一個(gè)是依靠經(jīng)驗(yàn)熄守。
舉例而言蜈垮，面對(duì)一個(gè)分塊明顯的網(wǎng)頁(yè)設(shè)計(jì)圖時(shí)：
初級(jí)的開發(fā)人員思路及制作方法：div 層層嵌套；
中級(jí)的開發(fā)人員思路及制造方法：去掉多余的 div ,進(jìn)行簡(jiǎn)化裕照；
高級(jí)的開發(fā)人員思路及制造方法：最大化的簡(jiǎn)化 html 的結(jié)構(gòu)，然后用 css 進(jìn)行設(shè)置调塌，減少 html 與 css 的契合度晋南。
正確做法是寫HTML的時(shí)候先不管樣式，重點(diǎn)放在HTML的結(jié)構(gòu)和語(yǔ)義化上羔砾，讓HTML能提現(xiàn)頁(yè)面結(jié)構(gòu)或者內(nèi)容,负间，然后進(jìn)行 css 樣式設(shè)置，減少 HTML 與 CSS 契合度（即內(nèi)容與樣式分離） 姜凄，寫JS的時(shí)候政溃，盡量不要用JS去直接操作樣式，而是通過(guò)給元素添加刪除class來(lái)控制樣式變化（即行為分離）态秧。
3）分離原則的優(yōu)點(diǎn)
瀏覽器加載網(wǎng)頁(yè)頁(yè)面速度變快董虱。分離原則下，大部分頁(yè)面代碼寫在了CSS當(dāng)中申鱼，頁(yè)面體積容量變得更小愤诱。
網(wǎng)頁(yè)修改設(shè)計(jì)時(shí)，效率捐友、省時(shí)淫半。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記，到CSS里找到相應(yīng)的ID或class匣砖，可以快速替換指定位置的樣式科吭，不會(huì)破壞頁(yè)面架構(gòu)和其他部分的樣式昏滴。
典型的應(yīng)用就是網(wǎng)頁(yè)換膚，使用相同的 html 結(jié)構(gòu)对人，不同的 css 樣式谣殊。
更好地被搜索引擎收錄」娣ィ基于內(nèi)容與樣式分離的原則蟹倾，html的語(yǔ)義化就是首要考慮的,網(wǎng)頁(yè)中語(yǔ)義化的標(biāo)簽代碼就會(huì)更加適合搜索引擎。
css樣式的分離猖闪，它可以根據(jù)不同的瀏覽器鲜棠，達(dá)到顯示效果的統(tǒng)一。保證網(wǎng)頁(yè)架構(gòu)不變形的前提下培慌，放心在不同瀏覽器渲染顯示樣式豁陆。
