在Web Standards Fans | x5's Blog 上看到的，收藏。

最近在看侯捷的《 Word 排版艺术》，在被他的文笔所吸引的同时，也感叹于排版中的学问。正好今天，看到了 Mark Boulton 写的一篇日志《 Semantic Typography: Bridging the XHTML gap 》，所以想介绍给大家。

本文主要讲的就是如何在排版中遵循语义的原则，任何道理如果去“干讲”都显得枯燥晦涩，所以，我们就直入主题，用他举的例子来给大家阐述一下：

如果你有一个客户，他是一个房产代理，你要为他做一个网站。站点中的大部分内容都是房产信息。现在，他交给了你一个文档（很可能就是一个 word 文件），里面都是些房产的具体信息，他让你用此来做这个网站，下面的这个，就是房产的具体信息：

正如你看到的，这是一个很“朴素”的文档，我们要做的第一项任务，是建立它的概念结构（Conceptual Structure），它的语义元素，以此，我们才能确定他的排版结构：

这步完成以后，让我们暂时忘记怎么去设计它的问题吧，我们先用对应的 XHTML 标签来标记上面的这些元素：

在保留了概念结构的同时，我们也拥有了 XHTML 结构（语义化的标记）。现在我们可以专注与排版了，使他去遵循概念结构（与此同时，我们也就遵循了 XHTML 的结构）。

完~

这种设计过程最大的好处就是，不再被代码所烦扰，而且它很“健康”。