针对语义编写HTML所带来的巨大优势将在本章稍后部分介绍。现在我们只要记住,使用CSS进行设计时的主要任务之一,就是从编写合法的、带有良好结构并拥有语义的HTML文档开始。完成了这一步之后,我们才能在这个坚实牢固的基础之上应用各种CSS样式。
为表现样式编码和为实现正确的语义编码,二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。下面这一段HTML就是为了实现某种表现样式而编写的:
Our Family
Pictured are Matt and Jeremy. As usual, Matt is making
a funny face. We don't have many photos where he isn't.
下面这一段HTML是为了达到正确的语义而编写的:
Our Family
Pictured are Matt and Jeremy. As usual, Matt is making a funny
face. We don't have many photos where he isn't.
在第一个代码片断中,所有的HTML标签都是用来表现样式的。<br>标签用来换行,<b>标签用来给文本加粗,<font>标签则指定了文本显示的大小。而在第二个代码片断中,却一点都没有对页面显示样式的说明——h3和p元素仅仅用来描述页面中某一段内容的功能。p元素中包含了一个自然段的文字,而h3元素则表示其内容是页面中的第三级标题。
关键之处就在于,第二个代码片段并没有考虑这些元素将要以何种样式呈现出来,因为元素的呈现样式将由CSS控制。之所以选择这些标签,是因为它们恰如其分地描述了其中的内容。这也正是HTML中语义的概念:选择何种HTML标签取决于标签本身的语义,而不是其默认显示出的样式。