重构之美－走在Web标准化设计的路上[深入结构：理解h系列的不合理。]

回头看上篇文章，确实有点乱，感觉自己像个愤青，怨妇一样。我的意思是不要过多的把关注投向Css，Css并非Web标准的最核心的东西。我认为Web标准的核心在从html到xhtml这个看似变化很小确意义非凡的事情上。Web标准更多的是思想的变革，思想的重构，而不是技术，而这一点则几乎全部体现在xhtml上。

菩提树朋友在评论中做了个比喻：

XHTML像是一块白肉,不能吃,就算能吃,吃起来,也是十一分难吃。CSS就是那酱料，沾着吃，才有味，SCRIPT就好比加了一道火，烤一下，再吃，原来，完全不一样。

非常感谢你，这个比喻非常好，不过理解重心不一样。

还是这个比喻，我把xhtml视为牛排好不好？一份牛排好吃与否关键在牛肉本身的品质，其价值也体现在这里。甚至牛肉本身的品质可以好到任何外部因素都显多余，生吃是最好的选择。不知道你喜欢烹饪吗？我比较喜欢。首先要肉好菜好，新鲜，其次才是调料、火候、技巧。一堆好菜，不用费什么功夫就能得到很好的效果，而一堆烂菜，怎么掩饰都掩饰不住本质的缺陷。任何厨师都最重视原材料的筛选，事半功倍。话说回来，生存第一位，所以一块白肉哪怕再难吃也强过调料，没别的意思，只是为了说明轻重，应该首先重视xhtml的品质，其次才是css的技巧。By The Way，我很喜欢吃牛排，而且只要3成熟。^_^

我还是继续说下去吧，或许听完后再回头看，就能理解我为什么说：Css, Stop!并非要否定Css，而是指对Css的过度追捧，Stop。

问题：HTML中的六个标题Tag（h1/h2/h3/h4/h5/h6），设计是否合理？理由？解决办法？

这是我在培训中提出的两个问题之一，不知道大家有没有考虑过？或许你要说这个不是我们该考虑的问题，这个是W3的工作。我承认，其实我最初也没主动去考虑过，直到有一天接触了xhtml2.0，我才知道h系列标题的设计是不合理的，在xhtml2.0中，不推荐使用<hx>系列Tag，理由是结构不好，推荐使用这样更合理的结构进行代替：

嗯，好像答案都有了，不合理，结构不好，解决如上。其实我想问的是为什么hx系列结构不好？为什么要这样改？现在你先别急着向下看，试试想想。

琢磨这个问题是因为我想试着去理解W3到底想干什么？现在我们清楚了为什么在xhtml1.1中不认可类似font之类的Tag，xhtml1.1是2001年的产物，如果当时我们就理解了，那么Web标准早就推广开来了。现在W3如法炮制，在2.0中不推荐现有的h系列Tag，那么会不会在“2.1”中完全抛弃它，如同抛弃font一样。xhtml2.0尚处于草稿和提议当中，还未被W3正式推荐。当然我无意从中引出Web大标准、超标准之类的东西，我只是希望能对目前的Web标准加深理解有所帮助，实际上我认为我得到了较大启发或者说之前的一些模糊的，不确定的感觉变清晰了，所以我认为这是一个对于目前Web标准非常经典的问题。

好，现在说说我的理解。

首先我们想想h1/h2/h3/h4/h5/h6这六个Tag是什么东西，当然是标题Tag。它们有什么不同？h1页面唯一（一个页面只能存在一个h1），并且字体最大。h2~h6可以多个，字体逐步减小。曾经有个朋友说他认为h系列都是和表现相关的东西，有可能在以后的xhtml中被删除，所以他从来不用也搞不懂为什么那么多人用。其实他搞错了开头，却猜中了结局。确实已经在2.0中不被推荐，却不是因为表现而是因为结构。不知道还有没有人和他有同样看法？h系列绝对不是类似font的表现Tag，如果因为粗体和大小就算的话，那么所有标签都属于表现标签了，ul还有点，ol还有数字呢，p有间距，div会换行，……那么还需要xhtml干嘛呢？直接XML好了。

xml里的X是指可扩展，也就是可以随意定制标签。而xhtml中的X虽然也叫Extensible可扩展，但是并非可扩展，你不能为xhtml自定义标签，它更多是指xml化，也就是xml化的html。所以，xhtml每个标签都需要有默认的样式来支撑它的语义化，这些样式是最基础的样式，为什么h1和h2不一样？因为它们默认样式不一样。为什么2个div会形成2行，而2个span却在一行上？因为div默认一个display:block的样式。具体的大家有兴趣可以查一下。好了，hx系列Tag的不合理就出在这里，语义和结构。h1~h6的语义通通都是一样的，那就是标题。他们之间有没有结构？有的。同样的语义却设计了6个Tag，为什么？因为结构的存在。hx系列之间的结构（节，俗点叫上下级关系）是靠123456（不同的默认样式来决定），但是这些数字并没有语义的，你说1大还是6大？不同的环境下截然相反，人的判断都如此，作为程序是无法理解凭什么2就是1的子级，3就是2的子级。再有，假如一篇极端的文档需要用到h7，h8……怎么办呢？所以有了以上的改变，语义用h表示，把结构分离出来用section表示，这样一来，程序喜欢不喜欢，我想不用多说了。^_^

2006 2 27 Create

很久以前，我第一次看到IBM网站上《Web 的未来：XHTML 2.0》这篇译文时，第一个反应是怎么把标题Tag搞得这么复杂，再定睛一看，马上就联想到自己的迷惑和一直在追求的东西，真的立刻就有一种醍醐灌顶、豁然开朗、近视眼带上眼镜的感觉。其实早在一年多前，我就有过这样的迷惑：如何固定xhtml文档？后来还在重构之美－迎接Web标准化设计的来临[总结一：网页设计回归？]中对这个问题曾做过这样的总结：

...2、根据规划完成XHTML文档，组织好文档结构，设计纯文档。这里我要提醒，纯文档同样具有UE，它只是没有了UI而已，所以需要仔细推敲标记的选用并确定下最简洁的XHTML文档。...4、根据设计稿为XHTML文档添加样式进行还原，通过样式表的设计技巧尽可能的不修改XHTML，如果UI实在是复杂，则可以在不影响XHTML文档结构的情况下加入一些额外的标记或者进行一些嵌套。...

可以看到当时的我其实是迷惑的，怎样选用标记？怎样的xhtml文档最简洁又灵活？我一直在努力，去始终好像很难找到一个方法固定xhtml。对于一个页面，不同的人有不同的分析，不同的分析又将产生不同的xhtml文档。哪怕两人在不加载样式表情况下设计出浏览界面完全一样的页面，背后也可能因为分析的不同是两份不同结构的xhtml，也就是语义一样，但结构不一样。语义含有部分结构的概念，却不等于是结构。

现在举个例子吧，可能都希望看见实例。下面这个图很简单，大家先试试写出xhtml来，如果懒，构思一下也好。

2006 2 28 Update

很早就开始关心纯文档的结构，从最初的关注浏览器中xhtml的浏览结构，慢慢也开始关注xhtml的代码结构。简单说明一下这两个结构吧，希望大家能够多关注一下浏览结构，更多关注一下代码结构，而不是仅仅把目光注视在应用了css后的最终页面效果上。比如：

< h1 > 文档名 </ h1 >
< h2 > 标题1 </ h2 >
< h3 > 标题1.1 </ h3 >
< h3 > 标题1.2 </ h3 >
< h4 > 标题1.2.1 </ h4 >
< h4 > 标题1.2.2 </ h4 >
< h3 > 标题1.3 </ h3 >
< h2 > 标题2 </ h2 >
< h3 > 标题2.1 </ h3 >

这段代码的浏览效果如下：

我们可以看到，浏览已经完整了，有了结构，这种结构是通过语义而产生，然而代码结构完整吗？所以我说过，语义带有部分结构的含义，却不等于结构。完整的代码结构我认为如下：

这有没有觉得这段代码眼熟？回头看看开头xhtml2.0中推荐的标题表达形式。是的，当我看见xhtml2.0的时候马上想起的就是我的这种写法，然后更加坚定的将这种写法延伸使用下去，并且发现似乎找到了固定xhtml的方法：用标题划分代码结构。这样对于同一个页面，不同的人都能写出同样的xhtml结构。例如，对于大部分页面，都可以视为页头，内容，页脚三部分，那么好了，每个人都能写出一模一样的xhtml大结构，而不管页面具体如何设计的，看看：

或许你会说，这样简单了，那么你可以去看我在[复杂表格]中的几段代码，或者看《粗略整理博客圆的页面Xhtml代码》。统统是这样的结构。

这样写优势太多了，因为它不论在哪一方面都吻合xml的要求，不论在写法上还是结构上，程序会非常喜欢，比如无论通过js还是后台编程，我们都可以很轻松的通过xpath查询提出所有的h3或者任何部分。我想这也是xhtml的目标，让html尽可能的靠向xml。xhtml会代替html，但是我想xml不会代替xhtml，至少在浏览器没变革前，xml没有直接的语义，只有结构。xml的语义需要通过程序或者xsl来转换成有直接语义的xhtml来体现，关于xml这里就不多说了。 这种写法是有缺点的，那就是会感觉h不够用，6个h标签，只有3个可用，h4已经显小。那么当我们的结构层次高于3层或者高于4层的时候就麻烦了，所以开始向往xhtml2.0，可以无限层的表达下去，虽然还不清楚它怎么来区分每个h标签。

这样的写法很接近一个结构很好的Word文档，对，就是以写Word文档的方式来写xhtml页面，固定下来。

好了，现在你理解了吗？认可吗？

下一篇继续深入结构，咱们聊聊关于div和span。