为表现样式编码和实现正确的语义编码,二者在基本原理上的差别上比较微妙。这里给出了一段示例代码来帮助我们更好的区别。
为表现样式的编码:
<b><font size="2">Our Family</font></b>
<font size="1">Pictured are Matt and Jeremy.</font>
表现差别的代码
<div id="family">
<h3>Our Family</h3>
<p>Pictured are Matt and Jeremy.</p>
</div>
第一个代码段中,所有的HTML标签都是用来表现样式的。
第二个代码段中,却一点都没有对页面显示样式进行说明。h3和p都是为了说明文字的功能,标题与段落。
关键之处在于,第二个代码段中并没有考虑这些元素要以何种样式呈现出来,因为元素的呈现样式将由CSS控制。之所以选择这些标签,是因为他们恰如其分地描述了其中的内容。这也正是HTML中语义的概念:选择何种HTML标签取决于标签本身的语义,而不是其默认显示出来的样式。
适当的、合理的div和span可以明显增强文档的结构性,但若文档中使用了太多的div和span,就应该考虑一下是不是还有更加合适的HTML元素供选择了。例如,能用h3表示的内容的含义,就不应该使用div。