HTML元素至少有两种不同的语义分类，甚至是三种不同类型的语义单元，即结构语义，内容语义，修饰形容语义(structural semantics, content semantics, and rhetorical semantics)，这里对属性的语义还不能清楚的表述，但是似乎也可以分成结构语义和其他的可以延伸HTML的语义类别。

　　HTML元素的语义类别

　　结构

　　这些元素的语义定义了他们在文档中扮演着的结构的角色

　　这些元素的语义定义了在文档中表示内容标记的语义

　　这些元素起到对内容的修饰和形容　

　　并无完全清楚的

　　不完全知道以下元素应该属于什么分类，看似三者都不是又或者都涵盖了

　　HTML属性的分类

　　这是比较难分类的部分，他可以作用在大部分的HTML元素中，通常属性是对元素语义的一个扩展和延伸

　　内容

你思考过每个元素名的全称问题吗？也许出于习惯，很少想这个问题，例如，p表示段落，那么p的本意是什么呢？它是什么词的缩写呢？也许你知道p是段落（paragraph）的缩写，那么其他元素的名称呢？
今天琢磨这个问题，故在网上狂找了半天，但是很遗憾居然没有找到相关资料，偶尔看到几个零散的提示，但是没有系统研究的资料，大家都在谈论HTML的语义性，但是连最基本的元素的原义是什么都没有搞清，何谈语义化。故下点功夫整理一下，最后汇集一个HTML元素名全称的原义表，仅作为参考，可能还很不全面，或者理解偏差，请有识之士PP。

div              语义：Division（分隔）
span          语义：Span（范围）
ol                 语义：Ordered List（排序列表）
ul                 语义：Unordered List（不排序列表）
li                   语义：List Item（列表项目）
dl                 语义：Definition List（定义列表）
dt                 语义：Definition Term（定义术语）
dd                语义：Definition Description（定义描述）
del               语义：Deleted（删除（的文本））
ins               语义：Inserted（插入（的文本））
h1~.h6      语义：Header 1 to Header 6（标题1到标题6）
p                   语义：Paragraph（段落）
hr                 语义：Horizontal Rule（水平尺）

a                   语义：Anchor（锚）
abbr            语义：Abbreviation（缩写词）
acronym   语义：Acronym（取首字母的缩写词）
address      语义：Address（地址）
dfn             语义：Defines a Definition Term（定义定义条目）
kbd           语义：Keyboard（键盘（文本））
samp       语义：Sample（示例（文本））
var            语义：Variable（变量（文本））
tt               语义：Teletype（打印机（文本））
code       语义：Code（源代码（文本））
pre          语义：Preformatted（预定义格式（文本））
blockquote    语义：Block Quotation（区块引用语）
cite          语义：Citation（引用）
q              语义：Quotation（引用语）
strong    语义：Strong（加重（文本））
em          语义：Emphasized（加重（文本））

strong              语义：Bold（粗体（文本））
i                语义：Italic（斜体（文本））
big           语义：Big（变大（文本））
small       语义：Small（变小（文本））
sup          语义：Superscripted（上标（文本））
sub          语义：Subscripted（下标（文本））
bdo          语义：Direction of Text Display（文本显示方向）
br             语义：Break（换行）
center     语义：Centered（居中（文本））
font          语义：Font（字体）
u              语义：Underlined（下划线（文本））
s              语义：Strikethrough（删除线）
strike       语义：Strikethrough（删除线）

strong是web标准中xhtml的标签，strong的意思是“强调”；b是html的，b的意思是bold（粗体）。为什么用strong代替b？其实这个问题不妨改问：xhtml和html有什么不同，为什么要用xhtml代替html？网上有很多详细的文章谈这个，可以找了看看简单地说：web标准主张xhtml不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用其它方式来强调，比如下划线，比如字体加大，比如红色，等等，可以通过css来改变strong的具体表现，这就是为什么b要改为strongstrong 代表其中内容文字的意义。b代表其中文字的样式是粗体。 在html规范中二者的区别基本上看不出来。在xhtml中由于强调“样式与内容的分离”所以代 表样式的b被掏汰了。取而代之的是其它标签。注意，不是strong代替了b。strong代表强调，你可以自定义任何样式来代表强调。只是strong 的默认样式与b相同而已。是加重语气标签;是粗体标签
它们起的均是加粗字体的作用。在大多数情况下，它们表现出来的效果也大致相同，所不同的是，标签是一个实体标签，它所包围的字符将被设为bold（粗体），而标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold （粗体）来实现的。但是在不同的HTML解释器下，情况也可能有所不同。
同样的一段代码，在Internet Explorer和Netscape中显示有可能不同，因为这两个标签涉及浏览器的兼容性的问题。在Netscape中，如果将字符集设为GB2312的话，和是不起作用的。要解决这个问题，我们可以将字符集改为885981，也就是将〈meta>标签所在行改为：

然后在Netscape中打开，两个标签就都起作用了！
忠告：在实际网页设计中，为使页面效果受客户端因素影响变为最小，应该尽量使用实体标签！

　　HTML为我们提供了相当丰富的标签，每个标签都有它各自的含义。我认为在设计时，除了遵循HTML语法以外，应该充分利用并遵守各标签的“语义”。如标题文字应该包含在h1-h6中，大段的文字内容应该由<p>进行分段而不是<br />，列表项应该放在ul或ol或dl中，表格形式的数据应该仍然用table布局。

　　为什么要这样做？一个很有说服力的原因是，保证在用户去掉CSS显示的情况下，网页能够尽量有效的将内容的结构层次显示出来。如果全部用div，当去掉CSS之后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。

　　我下面详细的列举一下我对一些标签的语义的理解：

p br
　　先说个最简单的。分段要用p标签而不是用br（甚至连续两个<br />）。这个似乎不用多说。但是有时候我们不得不放弃这个原则。一个常见的例子是论坛发帖，如果我想分段，便打回车。而如此传输到后台并显示出来的，显然就是用<br />分段的。

table th
　　由于大力宣扬div+css的结果，似乎现在谁用table布局谁就是未开化的土著。但我认为这种观点是不正确的。table的含义是表格，因此凡是应该以表格形式出现的数据，仍然应该用table布局。简单的例子是班级同学的花名册，包括姓名学号性别等等，这明显是一个表格形式的数据，因此应该用table布局。另一个比较值得探讨的例子是，blog里面的日历导航。我曾经有见过一个blog程序，它的日历导航里的各个日期，从1号到30号全用div套好，再使用float:left样式7个一排的排出当月的日历。当我取消浏览器的CSS显示之后，日历的那部分则从1号到30号一竖排下来。我认为这是不对的。因为日历应该是一个表格形式的数据，因此仍然应该用table布局。当取消css之后，应该仍然按照一排7个的样子归成一个表格。

　　th则是另一个会被忽视的标签。由于CSS的万能，所有的表格单元都可以用td加一个class属性搞定。但是从语义上讲，一些表格单元应该用th标签。比如上文说到的日历表格，里面的“MON TUE WED... SUN”这些标识星期的单元，就应该用th而不是td。

h1-h6
　　对于h1-h6标签，从语义上讲，它们应该适用于所有标题文字。因此，一些如<div class="diary-title>的写法都是多余的，直接写成<h1>，然后直接对h1而不是.diary-title定义CSS，不是一样的效果么？当然，这个规矩我也不能定得太死，因为有时候标题部分的结构元素并不能简单的用一个h1就能解决的。但我最多用类似<h1><span></span></h1>的方法将标题的结构嵌套得更复杂，以满足表现的需要。

　　但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题，一级标题下再有小标题就用h2。但是事实上回顾HTML设计之初，h1-h6后面的数字更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体，而并非它就是三级标题。否则一级标题全用h1，个个都是斗大的字，又不得不用CSS来控制字号，感觉很累赘。所以，这是一个待商榷的问题。

ul ol 
　　凡是需要罗列条款的，都应该用ul或者ol，而不是用p。比如招聘广告里的职位需求，比如注意事项，比如操作步骤说明。此外一个流行的用法是网页的导航菜单也用ul li来列举，然后再用CSS控制其排列方式。

　　应该要补充的是，别忘了li里面还可以再用ul或ol，形成第二级列表。

dl dt dd
　　这是一组几乎被人忘记的标签，但Jeffrey Zeldman在《网站重构》中大力推崇对它们的使用。dl应该是“defining list（或是definition list？有知道的朋友请告诉我）”的全称，一个典型的用法是字典的词条。单词的名字放在dt里面，单词的解释放在dd里面。而alistapart.com网站更加高明的，将右侧栏整个定义为dl，每个单元的标题用dt，而该单元的内容则用dd。

img
　　img标签本身也没啥好说的。只是想老生常谈一个，即只有当确实这个元素是内容里必须的图片的时候才使用img，否则应该用CSS定义为样式。如插图，头像，表情图标，这些是内容里必须出现的图片，用img。而其他的比如标题的背景图，列表项前面的小icon，这些都不应该用img标签。

span
　　span如今大有和div并驾齐驱的风头。但是事实上我认为我们还是应该遵从它最初的使用。我个人的理解，span最初就是用来带class或者style属性的。它本身不具有明确的语义。因此在文本流中，我们需要对某些文字做样式上的改变，就用span括起来。比如有些字需要加红，我就用<span class="red">。

　　但是值得注意的是，这样又有可能犯之前h1里面提到的问题。因为有些文字的样式其实是有现成的标签的，比如<strong>、<sub>等，我们也应该适当的给它们一些机会。

a
　　a是控制超连接的标签。但有些特殊的情况，我们不一定喜欢用它。比如需要弹出一个小窗口。我没怎么留心，但我想有些设计师会将onclick直接定义到“播放”小图标的<img>标签里。我个人认为还是应该在img外面加一个a，然后将onclick定义到a里面，并记住在js函数最后写上return false。如果可以，该a标签的href属性也应该写上弹出窗口的URL,保证用户在禁止JS的情况下仍能够有效的打开页面。

　　我暂时就列出这么多。总结一下遵循HTML标签语义的重要性。Web标准的其中一个要求是低配置的兼容性：当用户禁用图片、禁用CSS或禁用JS的时候，我们仍能够让他有效的浏览网页内容。众所周知强制alt属性就是为禁用图片时的兼容性作考虑。而正确的遵循HTML标签的语义，则是保证禁用CSS时的兼容性。只有当正确使用了HTML标签，我们的网页在“CSS裸奔”的时候，才会仍然让人看得出哪里是导航菜单，哪里是文章标题，日历表格也不会分崩离析。