本節書摘來自異步社群《web前端開發精品課 html與css進階教程》一書中的第2章，第2.7節，作者： 莫振傑 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
前面這幾節，我們介紹了頁面語義化需要注意的各個地方。那麼平常有什麼好的辦法來判斷一個頁面是否語義良好呢？一個很簡單的辦法就是：去掉css樣式，然後看頁面是否還具有很好的可讀性。
我們都知道，很多html标簽都有一定的預設樣式，例如p标簽有上下邊距、strong标簽對字型加粗、ul标簽有縮進效果，等等。
在前面我們接觸過，我們可以使用一個标簽來代替另外一個标簽，并且使用css修飾來實作相同的效果。也就是說，不同的html标簽可以通過不同的css來實作相同的效果。但是“一個語義良好的頁面”跟“一個語義不好的頁面”在去除樣式之後的表現卻是截然不同的。
https://yqfile.alicdn.com/ee269875c704244200191c1ab66e2d293b3874e8.png" >
從上面兩張圖我們可以看出：一個語義良好的頁面在“css裸奔”之後，可讀性也是非常高的。想要檢視一個頁面在“css裸奔”下的效果，我們可以使用firefox浏覽器的一款網頁調試插件“web developer”來測試。
在web developer工具欄找到“css”→“disable styles”→“disable all styles”并且選中，就可以檢視頁面去掉樣式後的效果，如圖2-21所示。web developer插件的安裝和使用，請自行搜尋，很簡單。
https://yqfile.alicdn.com/2006452b868b2df0979b423dd1251a0fba25029f.png" >