分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用 div 来代替 p 标记标题。
首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。 strong , em 用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。
段落标记，知道了 p 作为段落，你就不会再使用 br/ 来换行了，而且不需要 br/ br/ 来区分段落与段落。 p /p 中的文字会自动换行，而且换行的效果优于 br 。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。 例如：复制内容到剪贴板 p 蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。 /p p 多年来，蓝色理想的内容不断充实，先后被国内一些知名网站、传统媒体重点推介过，并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏，并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词 网站设计与开发 搜索排名均为第一，现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。 /p ul 、 ol 、 li
ul html' target='_blank'>无序列表，很常见的到了大家广泛的使用， ol 有序列表也挺常用。在web标准化过程中， ul 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持CSS的时候，导航链接仍然很好使，就是美观方面差了一点。 例如:复制内容到剪贴板 ul li 项目一 /li li 项目二 /li li 项目三 /li /ul 复制内容到剪贴板 ol li 第一章 /li li 第二章 /li li 第三章 /li /ol dl 、 dt 、 dd
dl就是 定义列表 。比如说词典里面的词的解释、定义就可以用这种列表。 例如：复制内容到剪贴板 dl dt Dog /dt dd A carnivorous mammal of the family Canidae. /dd /dl 复制内容到剪贴板 dl dt 上海滩 /dt dd 这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。 当年在香港播出以后，产生了巨大的轰动效应。 /dd dt 周润发 /dt dd 和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。 风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。 /dd /dl cite 、cite 、 q 、 blockquote
例如:复制内容到剪贴板 cite Designing with Web Standards /cite is an excellent book by Jeffrey Zeldman.复制内容到剪贴板 p cite 孔子 /cite 曰： q 学而不思则罔，思而不学则殆 /q . /p 复制内容到剪贴板 p The W3C says that q cite= http://www.w3.org/TR/REC-html40/ struct/text.html#h-9.2.1 The presentation of phrase elements depends on the user agent. /q . /p 复制内容到剪贴板 blockquote cite= http://www.w3cn.org/ p 我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时， 我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的 浏览器大战 ， 为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的， 每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备， 例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽； 针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。 这是一种恶性循环，是一种巨大的浪费。 /p /blockquote em 、 strong
em 是用作强调的， strong 是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好，特别是斜体对于中文来说，那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。 例如:复制内容到剪贴板 p em 强调 /em 的文本通常用斜体显示， 然而， strong 特别强调 /strong 的文本通常以粗体显示。 /p table 、 td 、 th 、 caption 、 summary
XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。 th 为表格标题，属性summar为摘要， caption 标签为首部说明， thead 标签为表格头部， tbody 标签为表格主体内容， tfoot 标签为表格尾部。 其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下： row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。 col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。 rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。 colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。 abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。 例如:复制内容到剪贴板 table id= mytable cellspacing= 0 summary= The technical specifications of the Apple PowerMac G5 series caption Table 1: Power Mac G5 tech specs /caption tr th scope= col abbr= Configurations > th scope= col abbr= Dual 1.8 Dual 1.8GHz /th th scope= col abbr= Dual 2 Dual 2GHz /th th scope= col abbr= Dual 2.5 Dual 2.5GHz /th /tr tr th scope= row abbr= Model > td M9454LL/A /td td M9455LL/A /td td M9457LL/A /td /tr tr th scope= row abbr= G5 Processor > td > td > td > /tr tr th scope= row abbr= Frontside bus > td 900MHz per processor /td td 1GHz per processor /td td 1.25GHz per processor /td /tr tr th scope= row abbr= L2 Cache > td > td > td > /tr /table 效果察看：http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm
dfn 复制内容到剪贴板 p dfn title= Microsoft web browser Internet Explorer /dfn is the most popular browser used underwater. /p ins , del
知道del，就不要再用 s 做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。 例如：复制内容到剪贴板 p It really was ins cite= rarara.html datetime= 20031024 very /ins good. /p code
资源链接： Bad Tags： http://www.htmldog.com/guides/htmlintermediate/badtags/ The Q tag http://diveintomark.org/archives/2002/05/04/the_q_tag HTML, XHTML, semantics and the future of the web http://www.westciv.com/style_master/house/good_oil/xhtml/index.htmlhtml教程
