你真的懂HTML嗎-從”最新快閃記憶體”說起

楔子

部落格園最近正在整合快閃記憶體和部落格.剛好我最近也在搗騰博皮,所以關注了下整合的結果.不得不說,園子最終的生成的html相當的不規範,語義性混亂,或者說很多冗餘,也許就是所謂的div強迫症/class強迫症.

HTML的語義性

我不知道從什麼時候開始,Table的佈局開始為國人所唾棄,div+css的佈局開始大受吹捧.不管引領潮流的是哪個,我們所追求的目標是一致的,”讓html更簡練,更可讀.”

• 更簡練,意味著去除不需要的冗餘,分離內容和展現,清除純粹用於佈局的tag.
• 更可讀,意味著提高html本身的語義性,讓html解釋它本身所要表達的意思.

而這樣子做的好處是什麼呢?

• 簡練,讓內容和展現鬆耦合,利於分工,最大化利用web快取機制,減少網路流量,加快頁面渲染.
• 可讀,讓內容結構更清晰,利於被各種終端理解(比如盲人的螢幕閱讀器,搜尋引擎的爬蟲).

Block-level Elements(塊級元素) VS Inline Elements(內聯元素)

在Html的規範中,這麼說到(摘自棕熊童鞋的[Quicky] block 和 inline 的區別是？)

所有允許被 BODY 元素包含的元素，要麼是塊級的；要麼是內聯的；要麼既可以算作塊級的，也可以算作內聯的。但是絕對不存在一個能被BODY包含，但即非塊級，又非內聯的元素。
常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。
常見的內聯元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。
另外，SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 這些元素，既可以作為塊級元素，也可以作為內聯元素。

那麼塊級元素和內聯元素具體有什麼區別呢？具體表現在以下幾個方面： 

一般來說塊級元素可以包含塊級元素和內聯元素；但內聯元素只能包含內聯元素。 要注意的是，每個特定的元素，能包含的元素也是特定的，所以具體到個別元素上，這條規律是不適用的。

比如 P 元素，只能包含內聯元素，而不能包含塊級元素。

code

<!– 這是不符合規範的 –>
<p><div>balalbalabala</div></p>
<!– 這是規範允許的–>
<p><span>balalbalabala</span></p>

具體關於這方面的知識,大家可以閱讀棕熊童鞋的[Quicky] block 和 inline 的區別是？

為什麼是div+css的佈局

把追求語義性定義為”div+css佈局”,其實是狹隘的.我覺得它的完整說法應該是”無語義性tag+css做佈局,語義性tag組織內容”.我們知道 html的tag大部分本身都有自身的語義性的.比如p,是段落,br是換行,你不能用p來做換行,用br來做段落,這樣就會導致html本身的語義產生混亂.而div和span剛好是html中兩個本身不具備語義性的tag. 但是span是inline element,所以不適合做容器,div是塊級元素,所以毫無疑問它成為我們做佈局的最好選擇,也才有了”div+css佈局”一說.

div強迫症/class強迫症

在第一版本的整合中,最新快閃記憶體的html結構大致如下

code

<div class=“day”>
<div class=“dayTitle”>
</div>
<div class=“my_ing”>
一個良好的討論氛圍,是一家好公司的最基本條件.<a class=“ing_lnk” href=“http://home.cnblogs.com/ing/58955/”>10-30 14:44</a>
<br>
經濟危機,重新開墾一畝三分地……<a class=“ing_lnk” href=“http://home.cnblogs.com/ing/58457/”>10-28 13:45</a>
<br>
學習是個輪迴,重新上路ing…<a class=“ing_lnk” href=“http://home.cnblogs.com/ing/32400/”>06-01 21:06</a>
<br>
<a class=“ing_lnk” href=“http://home.cnblogs.com/walkingboy/ing/</span>”>更多快閃記憶體…</a>
</div>
</div>

• 首先,最新快閃記憶體被放在post的列表容器內,而且使用一樣的容器class標識,這就導致做css的時候很難定位它.
• 其次br被用來做列表,
• 再次more link和list item又進行混淆.

我本來想為自己的博皮調調css,結果發現這個結構真是很暈,然後發了條建議快閃記憶體的html位置和結構竟然和Post一樣,很難修改皮膚啊.

不得不說,園子團隊的反應速度還是可以的,昨天晚上又進行了更新,我們看下第二版本的html結構.

code

<div id=“side_ing_block”>
<h3 class=“catListTitle”>最新快閃記憶體</h3>
<div class=“side_ing_list”>
<ul>
<li>一個良好的討論氛圍,是一家好公司的最基本條件. <a class=“ing_lnk” href=“http://home.cnblogs.com/ing/58955/”>10-3014:44</a></li>
<li>經濟危機,重新開墾一畝三分地……<a class=“ing_lnk” href=“http://home.cnblogs.com/ing/58457/”>10-2813:45</a></li>
<li>學習是個輪迴,重新上路ing… <a class=“ing_lnk” href=“http://home.cnblogs.com/ing/32400/”>06-0121:06</a></li>
<li><a class=“ing_lnk” href=“http://home.cnblogs.com/walkingboy/ing/</span>”>更多快閃記憶體…</a></li>
</ul>
</div>
</div>

不錯,語義性已經有一定的修改了,但是還是有太多的冗餘tag.

原來Cat Chen有篇文章叫你有 <table /> 強迫症嗎？.

我想我們可以說上面的html是有強烈的<div/>強迫症+class強迫症. 為什麼這麼說呢.

<div/>強迫症+class強迫症

<div id=“side_ing_block”>
<h3 class=“catListTitle”>最新快閃記憶體</h3><!–這個class是完全多餘的,h3已經很好的顯示了它的語義,css定位也是明確的#side_ing_block h3 ,找不到它留下來的理由 –>
<div class=“side_ing_list”><!–ul已經表示了是個list,何必再一個div+class來標識呢?css的定位也是明確的#side_ing_block ul–>
<ul>
<li>一個良好的討論氛圍,是一家好公司的最基本條件.<a class=“ing_lnk” href=“http://home.cnblogs.com/ing/58955/”>10-3014:44</a></li>
<li>經濟危機,重新開墾一畝三分地……<a class=“ing_lnk” href=“http://home.cnblogs.com/ing/58457/”>10-2813:45</a></li>
<li>學習是個輪迴,重新上路ing… <a class=“ing_lnk” href=“http://home.cnblogs.com/ing/32400/”>06-0121:06</a></li>
<li><a class=“ing_lnk” href=http://home.cnblogs.com/walkingboy/ing/>更多快閃記憶體…</a></li><!–不是相同項,怎麼能併入相同的列表呢?即使不管語義性,這樣子的定義,css也不好定位啊–>
</ul>
</div>
</div>

我個人認為就”最新快閃記憶體”這部分的html,更好的結構應該是

code

<div id=“side_ing_block”>
<h3>最新快閃記憶體</h3>
<ul>
<li><a href=“http://home.cnblogs.com/ing/58955/”>一個良好的討論氛圍,是一家好公司的最基本條件. 10-30 14:44</a></li>
<li><a href=“http://home.cnblogs.com/ing/58457/”>經濟危機,重新開墾一畝三分地……10-28 13:45</a></li>
<li><a href=“http://home.cnblogs.com/ing/32400/”>學習是個輪迴,重新上路ing…06-01 21:06</a></li>
</ul>
<span><a href=http://home.cnblogs.com/walkingboy/ing/>更多快閃記憶體…</a></span>
</div>

當然我們當前是孤立的看待這段html，如果我們把它放入整個頁面的結構中，還是需要適當的修改的。比如<div id=”side_ing_block“>應該修改為 <div id=”side_ing_block” class=”block”>，block是頁面塊狀結構的一個基礎樣式，不過園子的left menu裡面的div都是獨立的，沒有抽象出一個基礎樣式class，所以每次新加入一個模組，所有的博皮都得修改。而span也應該多加一個 class=”more”.這些已經不是html語義化的範疇，而是css複用的設計問題了，不在這篇文章的談論之內。

隨著<table/>強迫症的逐漸消失,我們應該警惕<div/>強迫症,class強迫症的不斷抬頭,追求標準我們永不止步,但是也不能迷失自我.