每个元素都使用合适的标签
今天在cnbeta上看到一片作者评论div+css的文章，标题为“DIV+CSS 请不要再出来忽悠人了！”，文章的大致内容如下：
<blockquote>今天，尽管提到DIV+CSS，还会有很多人热情高涨，但是我会对他摇头了：DIV+CSS不是一切，更不是某些人所谓的“神话”！创造神话的是CSS，不是DIV+CSS。我想，是时候纠正这个问题了。
CSS的要义，是各个标签要各尽用，盲目推崇DIV+CSS只会让小白误入歧途的。
1、DIV只是HTML最常用的标签之一
显然HTML并不只是一个DIV标签有用，每个标签都有它的用途，只是DIV是其中最有用的一个罢了。如果DIV可以实现所有其它标签的功能，那么W3C早就把HTML精简了！
Table也不是一无是处，只是用table比较简单、容易上手才在早期被人错误的广泛推广。但是table在处理网页数据的表现上，是其他标签无法替代的，只是，它不适合用来做整个页面的布局。
2、代码的可读性
纯DIV+CSS的网站的代码的可读性无疑是非常差的，甚至table还可以通过tr和td来区分行和列，一堆DIV堆砌在一起，如果没有注释，你根本不知道某个部分是做什么用的。
3、语义化与结构化
现在，在开发CSS的时候，提的越来越多的是语义化，语义化归根到底其实还是代码的可读性问题。语义化就是让代码更易读，更加易懂，比如，.text_01{color:red} 就没有.text_red{color:red} 容易理解。
HTML同样如此，比如我们看到<ol>就知道这是个有序列表；看到<p>标签就知道这是一个段落，内容为文字；看 到<span>就知道这个是比<p>还小的文字单位；看到<h1>、<h2>之类的就知道他们是标题。
显然，全部是div的页面，是看不出来这些的。
页面的结构化亦是如此，比 如<div><div><div><div>…..</div>< /div></div></div>这样的代码，显然是很难理解其DOM结构的，但 是<div><p><h2><span>…..</span>< /h2></p></div>就比上面的那个结构要清晰很多。
相信做开发的人对代码的语义化和结构化的理解会更加深刻。
4、团队合作
可读性低、结构化和语义化差，团队的其他成员的学习和维护难度就会提高，这对于一个团队来说，是很浪费时间和精力的。
其实，DIV+CSS的说法，已经把我们从table带到了另外的一个极端，正确的网页设计不是一个标签雄霸天下，而是每个元素都使用合适的标签。
所以说，DIV+CSS要换一种说法了，(X)HTML+CSS不更合适吗？
请不要再特意提DIV了。小白们真的会把它当作宝贝的！
其实回头看看国内普及标准化的过程，已然走错路了，就在国外同行研究CSS Sprites和网格（Grid）等技术时，我们在做什么？就在国外CSS框架遍地开花的时候，我们在做什么？到现在我们还是只能去国外的东西，依然跟在别人后面。</blockquote>
作者提到的“每个元素都使用合适的标签”这一点，还是非常正确的！但作者说div+css的学习和使用者是走错了路，走了极端，这点我个人认为是有问题的，写出这类代码的人他应该只是处于过度阶段，对于xhtml的标签的特点和不是十分了解，以至于只能反复用到一些常用的标签，如作者提到的div标签，但随着对xhtml标签的理解逐步加深，他们慢慢认识到用合理的标签，不仅能让代码结构简化，而且还能是代码易读；
为了能让正处在这一过度阶段的朋友更好了解到xhtml标签，我简单介绍下各标签：
Document Outline
<!DOCTYPE>Version of (X)HTML
<html>HTML document
<head>Page information
<body>Page contents
PageInfomation
<base />Base URL
<meta />Meta data
<title>Title
<link />Relevant resource
<style>Style resource
<script>Script resource
Document Structure
<h[1-6]>Heading
<div>Page section
<span>Inline section
<p>Paragraph
<br />Line break
<hr />Horizontal rule
Lists
<ol>Ordered list
<ul>Unordered list
<li>List item
<dl>Definition list
<dt>Definition term
<dd>Term description
Forms
<form>Form
<fieldset>Collection of fields
<legend>Form legend
<label>Input label
<input />Form input
<select>Drop-down box
<optgroup>Group of options
<option>Drop-down options
<textarea>Large text input
<button>Button
Text Markup
<strong>Strong emphasis
<em>Emphasis
<blockquote>Long quotation
<q>Short quotation
<abbr>Abbreviation
<acronym>Acronym
<address>Address
<pre>Pre-formatted text
<dfn>Definition
<code>Code
<cite>Citation
<del>Deleted text
<ins>Inserted text
<sub>Subscript
<sup>Superscript
<bdo>Text direction
Tables
<table>Table
<caption>Caption
<thead>Table header
<tbody>Table body
<tfoot>Table footer
<colgroup>Column group
<col />Column
<tr>Table row
<th>Header cell
<td>Table cell
Images and Image Maps
<img />Image
<map>Image Map
<area />Area of Image Map
Object
<object>Object
<param />Parameter
<blockquote>今天，尽管提到DIV+CSS，还会有很多人热情高涨，但是我会对他摇头了：DIV+CSS不是一切，更不是某些人所谓的“神话”！创造神话的是CSS，不是DIV+CSS。我想，是时候纠正这个问题了。
CSS的要义，是各个标签要各尽用，盲目推崇DIV+CSS只会让小白误入歧途的。
1、DIV只是HTML最常用的标签之一
显然HTML并不只是一个DIV标签有用，每个标签都有它的用途，只是DIV是其中最有用的一个罢了。如果DIV可以实现所有其它标签的功能，那么W3C早就把HTML精简了！
Table也不是一无是处，只是用table比较简单、容易上手才在早期被人错误的广泛推广。但是table在处理网页数据的表现上，是其他标签无法替代的，只是，它不适合用来做整个页面的布局。
2、代码的可读性
纯DIV+CSS的网站的代码的可读性无疑是非常差的，甚至table还可以通过tr和td来区分行和列，一堆DIV堆砌在一起，如果没有注释，你根本不知道某个部分是做什么用的。
3、语义化与结构化
现在，在开发CSS的时候，提的越来越多的是语义化，语义化归根到底其实还是代码的可读性问题。语义化就是让代码更易读，更加易懂，比如，.text_01{color:red} 就没有.text_red{color:red} 容易理解。
HTML同样如此，比如我们看到<ol>就知道这是个有序列表；看到<p>标签就知道这是一个段落，内容为文字；看 到<span>就知道这个是比<p>还小的文字单位；看到<h1>、<h2>之类的就知道他们是标题。
显然，全部是div的页面，是看不出来这些的。
页面的结构化亦是如此，比 如<div><div><div><div>…..</div>< /div></div></div>这样的代码，显然是很难理解其DOM结构的，但 是<div><p><h2><span>…..</span>< /h2></p></div>就比上面的那个结构要清晰很多。
相信做开发的人对代码的语义化和结构化的理解会更加深刻。
4、团队合作
可读性低、结构化和语义化差，团队的其他成员的学习和维护难度就会提高，这对于一个团队来说，是很浪费时间和精力的。
其实，DIV+CSS的说法，已经把我们从table带到了另外的一个极端，正确的网页设计不是一个标签雄霸天下，而是每个元素都使用合适的标签。
所以说，DIV+CSS要换一种说法了，(X)HTML+CSS不更合适吗？
请不要再特意提DIV了。小白们真的会把它当作宝贝的！
其实回头看看国内普及标准化的过程，已然走错路了，就在国外同行研究CSS Sprites和网格（Grid）等技术时，我们在做什么？就在国外CSS框架遍地开花的时候，我们在做什么？到现在我们还是只能去国外的东西，依然跟在别人后面。</blockquote>
作者提到的“每个元素都使用合适的标签”这一点，还是非常正确的！但作者说div+css的学习和使用者是走错了路，走了极端，这点我个人认为是有问题的，写出这类代码的人他应该只是处于过度阶段，对于xhtml的标签的特点和不是十分了解，以至于只能反复用到一些常用的标签，如作者提到的div标签，但随着对xhtml标签的理解逐步加深，他们慢慢认识到用合理的标签，不仅能让代码结构简化，而且还能是代码易读；
为了能让正处在这一过度阶段的朋友更好了解到xhtml标签，我简单介绍下各标签：
Document Outline
<!DOCTYPE>Version of (X)HTML
<html>HTML document
<head>Page information
<body>Page contents
PageInfomation
<base />Base URL
<meta />Meta data
<title>Title
<link />Relevant resource
<style>Style resource
<script>Script resource
Document Structure
<h[1-6]>Heading
<div>Page section
<span>Inline section
<p>Paragraph
<br />Line break
<hr />Horizontal rule
Lists
<ol>Ordered list
<ul>Unordered list
<li>List item
<dl>Definition list
<dt>Definition term
<dd>Term description
Forms
<form>Form
<fieldset>Collection of fields
<legend>Form legend
<label>Input label
<input />Form input
<select>Drop-down box
<optgroup>Group of options
<option>Drop-down options
<textarea>Large text input
<button>Button
Text Markup
<strong>Strong emphasis
<em>Emphasis
<blockquote>Long quotation
<q>Short quotation
<abbr>Abbreviation
<acronym>Acronym
<address>Address
<pre>Pre-formatted text
<dfn>Definition
<code>Code
<cite>Citation
<del>Deleted text
<ins>Inserted text
<sub>Subscript
<sup>Superscript
<bdo>Text direction
Tables
<table>Table
<caption>Caption
<thead>Table header
<tbody>Table body
<tfoot>Table footer
<colgroup>Column group
<col />Column
<tr>Table row
<th>Header cell
<td>Table cell
Images and Image Maps
<img />Image
<map>Image Map
<area />Area of Image Map
Object
<object>Object
<param />Parameter