在编写文档时，我们应该关注语义，而非样式。记住：请尽量使用 CSS 进行布局。在遵循 Web 标准的世界里，XHTML 标记与表现无关，它只与文档结构有关。

良好的文档结构可以向浏览器传达尽可能多的语义信息，无论是在掌上电脑还是桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了 CSS 的现代浏览器中。

并非所有站点都能立即放弃 HTML 表格布局。CSS 的发明者，W3C,直到 2002 年 11 月才将官方网站转换为 CSS 布局。然而，即使是顽固的唯标准主义者也不总是将表现从结构中完全分离处理，至少在 XHTML 1 中是做不到的。但是现在，我们可以向这个理想迈出重大的一步，通过将表现从结构中分离(或者说将数据从设计中),即使是混合的传统的布局也可从中受益。

以下是一些建议，可以帮助你以更结构化的方式进行思考：

- 在提纲内的色彩

- 在语法学校，我们中的大部分人都被迫使用标准的提纲格式来写文章。现在，我们成为了设计师，可以多么自由地摆脱提纲的限制，然后大胆地投身于独特的个人表达的自由领域(也许我们的宣传册和商业站点还不是那么独特和个人化)。但是至少我们不会再受到提纲的困扰了。

- 实际上，依照 HTML,我们应该将内容结构化为有组织的层级。在浏览器不支持 CSS 的时期，我们无法在交付可供销售的布局的同时做到这一点。但是今天，在将我们的设计不折不扣地实现的同时，我们有能力交付内在结构良好的文档。

当将供网络使用的文本进行标记，或者当你将已有的文本文档转换为网页时，请使用传统提纲的这些条目进行思考。

例如：

```html

我的主题

介绍性文字

补充性的观点

相关文字

```

同时，避免使用已被废弃的 HTML 元素(如 ``)或无语义的元素(如 `
`)来模拟其实不存在的逻辑结构。

我的主题

介绍性文字

补充性的观点
相关文字

根据它们的意义使用元素，而不是根据它们的外观

我们中一些人已经陷在了一个坏习惯中，当我们仅仅需要一个大号字的文本时使用 h1,或者在我们需要在前面加一个圆点符号时使用 li。就像我们在前面的章节讨论过的，浏览器一直都习惯于将设计属性强加于 HTML 元素之上。我们都一直习惯于认为，h1 意味着大号字，而li意味着圆点，或者 blockquote 意味着文本缩进。我们中的大多数人还在使用结构化元素模拟表现效果的方式来胡乱地写作 HTML。

同样地，假如设计师希望所有的标题使用相同的字号，她会将所有的标题设置为 h1,即使这么做毫无结构化语义可言。

```html

这是主标题，在我将文本按照提纲格式组织的情况下。

这不是主标题，但是我希望它与上面的标题使用一样的字体，但是我不知道该如何使用CSS。

这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体，以达到我希望的效果。如果我了解CSS,就可以在不打乱文档结构的情况下达到这个设计。

```

我们必须把我们的小把戏放到一边，然后开始根据元素的语义来使用它们，而不是根据它们看上去的样子。实际上，h1 可以成为你希望的任何样子。通过 CSS,h1 可以成为非粗体的小号的罗马字体，而 p 文本可以成为粗体的大号字，li 也可以没有圆点(你或者可以使用小猫小狗或者公司标志的 PNG、GIF 或者 JPEG 图片取而代之)等等。

从今天开始，我们将要使用 CSS 来决定元素的外观。我们甚至可以根据元素在页面中或者在站点中所在的位置来改变它们的外观。CSS 可以将表现从结构中彻底抽离，并且允许你按照你喜欢的样式来格式化任何元素。

标题1

标题2

标题3

标题4

标题5

标题6

这样做的目的是为了在图形浏览器中获得品牌化的外观和感觉，同时在文本浏览器、无线设备和 HTML 格式的电子邮件中保留文档的结构。我们不希望在关于 XHTML 的章节讲述更多 CSS 方面的技术，而是希望展示文档结构和可视表达是两个完全不同的事物，并且结构化元素应该用来转换文本，而不是强制性地呈现视觉效果。

由于许多 HTML 争论者已经忘记或者根本不知道 HTML 和 XHTML 的用途是传达结构化的意义，他们使用标签来插入列表，例如：项目一
项目二
项目三
。然而，可以考虑使用有序或无序列表替代这些标签，如：<ul>

  • 项目一
  • 项目二
  • 项目三
    • </ul>。

    你可能会说：“但是 li 给我一个圆点，而我不需要圆点！”根据前面的章节，CSS 不对元素被期望的外观做任何假设。它等待你来告诉它你所期待的元素外观。关闭圆点是 CSS 最基本的能力之一。它有能力使列表看起来和普通文本没有两样，也可以使列表看起来像图形导航栏，具有完整的反转效果。

    因此，请使用列表元素来标记列表。类似地，可以使用 strong 代替 b,使用 em 代替 i 等。在大多数桌面浏览器的默认状态下，strong 的显示效果与 b 相同，而 em 和 i 也具有相似的效果。这样可以在不破坏文档结构的情况下创建你期望的视觉效果。

    尽管CSS不会为任何元素的显示作假设，但浏览器却会进行许多假设，并且我们尚未遇到一个将strong显示为其他效果而非粗体字的浏览器(除非是被设计师创建的CSS指示以其他方式显示)。如果你担心某个陌生的浏览器不会将strong显示为粗体字，你可以考虑编写以下这条CSS规则：

    ```css

    strong {

    font-weight: bold;

    font-style: normal;

    }

    ```

    这样可以确保在大多数情况下，strong元素都会以粗体字的形式展示。但是请注意，这种方法并不能保证在所有浏览器中都能完全兼容。