我收集到一些觀點，大家姑且先聽上一聽，
有人說：
“沒必要考慮語義化，只要我寫的代碼浏覽器運行後沒問題就行，反正領導根本不關心這些”
“語義化是w3c推廣的，我是很想語義化我的代碼，但總是用不明白”
“這個不好說，語義化再好有啥用，關鍵是有好的項目，客戶才是金主！”
“除了專業人士，誰會去看我們的代碼是不是語義化的”
不僅僅有頁面重構人員的聲音，也聽一聽工程師、設計師、還有項目管理人員，他們是怎麼看“語義化”這件事的
Php工程師：“無所謂什麼語義化，只要邏輯正確，不影響我循環數據”
項目管理人員：“我更看重在最短的時間，實現我的需求，至於語義化不是我們關心的，只要別耽誤項目時間，你們怎麼優化都行 ”
設計師：“什麼是語義化？”
市場銷售人員：“客戶滿意就行，客戶滿意我們才能贏利”
這些聲音時常充斥在我們的耳邊，雖有些片面，但似乎還是挺有道理的，可站在自己的立場上（一個頁面重構人員），基於這些現實條件，我們要如何權衡，語義化和現實工作之間的關系？我們該怎麼做呢？
先解釋幾個名詞，我們再來討論在實際工作中如何處理這些問題。
首先解釋一下什麼是語義化？
“語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。
語義化的(X)HTML文檔有助於提升你的網站對訪客的易用性，比如使用PDA、文字浏覽器以及殘障人士將從中受益。對於搜索引擎或者爬蟲軟件來說，則有助於它們建立索引，並可能給予一個較高的權值。
事實上SEO最有效的一種辦法，就是對網頁的HTML結構進行重構，實質上就是語義化。”
語義化存在的意義
- 和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息，比如h1~h6、strong用於不同權重的標題；隱藏文本等等
- 提升用戶體驗 例如title、alt用於解釋名詞或解釋圖片信息、例如label標簽的活用；
- 代碼可讀、便於維護、提高開發效率、快速達成共識，
例如
<div class= " wrapper ">
<div class= " main"> …</div>
<div class= " sidebar">…</div>
</div>
很容易通過好的命名和清晰的結構看懂這些代碼
- 行業機構對語義化標簽的擴展和浏覽器廠商在技術上的支持力度逐漸提升，例如web標准化組織剛剛開始推廣的html5，其中新增了許多語義化的標簽，例如header、aside、nav、section等等，在Chrome、opera、safari、firefox等浏覽器中均得到很好支持。
接下來咱們拋開這些理論，討論幾個我們常見的結構,
恩，這個是新聞列表，平常工作中，你怎麼寫結構？
大家都不假思索的考慮用li來實現吧
<div class="module">
<h3>國際新聞每日排行</h3>
<ul>
<li><img alt=”hotTop1” src=”1.gif” /><a href=”” title =”完整標題”>德國總理……道歉</a></li>
<li><img alt=”hotTop2” src=” 2.gif” /><a href=”” title =”完整標題”>德國總理……道歉</a></li>
……
</ul>
</div>
在web標准中，ul ol li被賦予有序或無序列表的語義，可實際使用時，使用范圍似乎被大家擴展了不少，看下面這幾個圖，li中的元素逐漸增多。
<div class="module">
<h3>時政要聞</h3>
<ul>
<li><span>03:50</span><img alt=”listDot” src=”dot.gif” _fcksavedurl="”dot.gif”" /><a href=”” title =”完整標題”>最高法…巡查制度</a></li>
<li><span>03:50</span><img alt=” listDot” src=” dot.gif” /><a href=”” title =”完整標題”>最高法…巡查制度</a></li>
……
</ul>
</div>
Major Style
span{float:right;}
在這個例子中，出現了更多的元素，我們依然使用li，就解決了它。
我們繼續看圖寫代碼……
（我們只書寫紅框裡菜單欄這部分代碼）
<div class=”nav”>
<a href=”” title =””>業界動態</a>
<a href=”” title =””>業界動態</a>
<a href=”” title =””>業界動態</a>
<a href=”” title =””>……</a>
</div>
Major Style
a{float:left;}
這種方法代碼量少，Dom節點深度小，在大頁面下加載也會快一些，這種寫法較適用於不需要擴展的模塊, 而且我們沒有用到li
另一種寫法：
<div class=”nav”>
<ul>
<li><a href=”” title=””>業界動態 </a></li>
<li><a href=”” title =””>業界動態 </a></li>
<li><a href=”” title =””>業界動態 </a></li>
<li>…</li>
</ul>
</div>
Major Style
li{float:left;}
這種方法在代碼量上略顯臃腫，優點是擴展性好，增加了代碼可讀性。
可是這是列表嗎？這麼用對不對不清楚，好像我們一直都是用li的，難道不對嗎？顯示沒有問題呀。不做解答，我們先繼續看圖寫代碼
看到這個圖，我們首先考慮的是程序循環，然後在腦海中構思用什麼標簽來搭建結構，我繼續使用li，其實我很矛盾，從語義化講的列表到底是個什麼范疇，如果不用li，又該怎麼寫呢，我們先寫寫看
方式一：
<div class="hotUserList">
<ul>
<li><img src="1.pic" alt=“ “ /><p class=“username”><a href=““ title =““>杜淳</a></p><p class=“attThis”><a href=““ alt=““>關注他</a></p></li>
<li><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>魏明</a></p><p class=“attThis”><a href=““ alt=““>關注他</a></p></li>
<li><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>葉莺</a></p><p class=“attThis”><a href=““ alt=““>關注他</a></p></li>
<li>…</li>
</ul>
</div>
Major Style
li{float:left;}
方式二：
<div class=“hotUserList”>
<div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>杜淳</a></p><p class=“attThis”><a href=““ alt=““>關注他</a></p></div>
<div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>魏明</a></p><p class=“attThis”><a href=““ alt=““>關注他</a></p></div>
<div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>葉莺</a></p><p class=“attThis”><a href=““ alt=““>關注他</a></p></div>
<div class=“rowlist”>…</div>
</div>
Major Style
. rowlist {float:left;}
這樣寫沒有什麼不標准的問題，但是縱觀上面使用li的代碼，比較之下，總覺得div的不夠美觀，完美主義者們總是精益求精的希望自己的代碼很精致很漂亮，這個全div的，的確沒有上面那個li來的漂亮。
再回頭看看上面的圖片， 好像涉及到邏輯循環的，無論大小我們都先想到li，繼而在li內部搭建它的結構，我們的出發點，和這麼做的緣由是什麼？現在想想大概有這麼幾個原因，使我們格外偏愛li。
- HTML結構清晰
- 代碼可讀性較好
- 易於擴展
- 簡化邏輯循環次數
- 塊元素和行內元素均可被嵌套在li內，符合標准
缺點是什麼，這個…… 我沒找到耶
li只是語義化陣容中的一個類型，不能以偏概全，但多少可以說明一些問題，
作為一個頁面重構工程師，不斷對自己的代碼進行完善精煉固然是好，但無論我們的技術實力有多麼強大，作為一個工程師，不能只糾結在技術面上，還要考慮我們 做一個產品的初衷以及目標，服務於用戶，所以在權衡代碼和用戶訴求時，還是要以大局為重，從用戶角度出發，以產品需求為核心，考慮多方立場，實現在有效的 空間和時間范圍內，達到利益最大化。盈利是根本！然後才是可持續發展，再然後才是考慮如何優化，就像之前讀過的一些觀點，說到技術型人才在做事情的時候，很容易鑽牛角尖，很容易在問題的一個點上深入，而不太會考慮全局，這是作為工程師應該掌握的一個度