為表現(xiàn)樣式編碼和實(shí)現(xiàn)正確的語義編碼，二者在基本原理上的差別上比較微妙。這里給出了一段示例代碼來幫助我們更好的區(qū)別。
為表現(xiàn)樣式的編碼：

<b><font size="2">Our Family</font></b>



<font size="1">Pictured are Matt and Jeremy.</font>

表現(xiàn)差別的代碼

<div id="family">
<h3>Our Family</h3>
<p>Pictured are Matt and Jeremy.</p>
</div>

第一個(gè)代碼段中，所有的HTML標(biāo)簽都是用來表現(xiàn)樣式的。
第二個(gè)代碼段中，卻一點(diǎn)都沒有對頁面顯示樣式進(jìn)行說明。h3和p都是為了說明文字的功能，標(biāo)題與段落。

關(guān)鍵之處在于，第二個(gè)代碼段中并沒有考慮這些元素要以何種樣式呈現(xiàn)出來，因?yàn)樵氐某尸F(xiàn)樣式將由CSS控制。之所以選擇這些標(biāo)簽，是因?yàn)樗麄兦∪缙浞值孛枋隽似渲械膬?nèi)容。這也正是HTML中語義的概念：選擇何種HTML標(biāo)簽取決于標(biāo)簽本身的語義，而不是其默認(rèn)顯示出來的樣式。

適當(dāng)?shù)?、合理的div和span可以明顯增強(qiáng)文檔的結(jié)構(gòu)性，但若文檔中使用了太多的div和span，就應(yīng)該考慮一下是不是還有更加合適的HTML元素供選擇了。例如，能用h3表示的內(nèi)容的含義，就不應(yīng)該使用div。