内容和呈现分离的实际含义是什么？

StackOverflow https://stackoverflow.com/questions/2260391

题

内容和呈现分离的实际含义是什么？

这只是为了避免内联CSS吗？

这是否意味着设计应该能够在不更改 HTML 的情况下进行操作？

我们真的可以仅从 CSS 进行设计上的改变吗？

  • 如果我们想改变 图像，那么我们将不得不去 HTML 代码
  • 如果我们想在段落中再添加一个换行符，那么我们将再次 必须在 HTML 代码中转到
  • 如果我们想再添加一个分隔符 在某个地方，我们将再次拥有 在 HTML 代码中转到

我们应该避免使用哪个 X/HTML 标签来保持内容和表示的分离？

内容和呈现的分离对于辅助功能/屏幕阅读器用户也有帮助吗？...对于程序员/开发人员/设计师来说？

有帮助吗？

解决方案

在定义内容和表示形式时，请将 HTML 文档视为数据容器。然后针对每个元素和属性询问自己以下问题：

  • 属性/元素是否代表我的数据中有意义的实体？
    例如，之间的单词是 <b> 标签以粗体显示只是为了显示目的，还是我想强调该数据？

  • 我是否使用正确的属性/元素来表示我想要表示的数据类型？
    因为我想强调该特定部分，所以我应该使用 <em> （它并不意味着斜体，它意味着强调并且可以加粗）或 <strong> 取决于想要的重点程度。

  • 我是否仅将属性/元素用于显示目的？如果是，是否可以删除该元素并使用 CSS 设置父元素的样式？
    有时，演示标签可以简单地替换为父元素上的 CSS 规则。在这种情况下，需要删除展示标签。

问自己这三个简单的问题后，您通常能够做出明智的决定。一个例子：

原始代码： <label for="name"><b>Name:</b></label>

检查 <b> 标签...

属性/元素是否代表我的数据中有意义的实体？
不，标签不代表数据节点。它纯粹是为了展示而存在的。

我是否使用正确的属性/元素来表示我想要表示的数据类型？
<b> 用于呈现粗体元素。

我是否仅将属性/元素用于显示目的？如果是，是否可以删除该元素并使用 CSS 设置父元素的样式？
自从 <b> 是演示性的，我用它来演示，是的。并且自从 <b> 元素影响整体 <label>, ，可以将其删除并将样式应用于 <label>.

语义 HTML 的目标不是简化设计和重新设计或避免内联样式，而是帮助解析器理解文档中特定标记所代表的内容。 这样，就可以创建应用程序（即：搜索引擎）智能地决定您的内容的含义并相应地对其进行分类。

因此，使用 CSS 属性是有意义的 content: 在位于 a 的文本周围添加引号 <q> 标签（除了演示文稿之外，它对文档中包含的数据没有任何价值），但使用相同的 CSS 属性在页脚中添加 © 符号是没有意义的，因为它在数据中确实有值。

这同样适用于属性。使用 width 和 height 上的属性 <img> 代表大小为 16x16 的图标的标签具有语义意义，因为理解该图标的含义很重要 <img> 标签（图标可以有不同的表示形式，具体取决于其显示的大小）。在 a 上使用相同的属性 <img> 代表较大图像缩略图的标签则不然。

有时您需要添加非语义元素才能实现您想要的演示，但通常这些是可以避免的。

没有错误的元素。特定元素的使用存在错误。 <b> 不应在强调时使用。 <small> 应用于合法的子文本，而不是使文本变小（请参阅 HTML5 - 第 4.6.4 节 为什么），等等...所有元素都有特定的使用场景，并且它们都代表数据（减去表示元素，但它们在某些情况下确实有用）。任何元素都不应被搁置。

属性是另一回事。大多数属性本质上都是表象的。属性如 <img border> 和 <body fgcolor> 在您所代表的数据中很少有意义，因此您不应该使用它们（除非在极少数情况下）。

搜索引擎是说明语义文档为何如此重要的一个很好的例子。 微格式 是一组预定义的元素和类，您可以使用它们来表示搜索引擎将以某种方式理解的数据。 Google 搜索中的产品价格信息 是语义工作的一个例子。

通过使用设定标准中的预定义规则在文档中存储信息，第三方程序可以理解看似文本墙的内容，而无需使用可能容易失败的启发式算法。它还可以帮助屏幕阅读器和其他辅助功能应用程序更轻松地理解信息呈现的上下文。它还极大地有助于标记的可维护性，因为一切都与一组定义相关联。

其他提示

最好的例子可能是 CSS禅意花园.

该网站的目标是展示仅基于 CSS 的设计的可能性，并将内容与设计严格分离。由各种图形设计师贡献的样式表用于改变视觉呈现 单个 HTML 文件的, ，生产数百种不同的设计。HTML 标记本身在不同的设计之间永远不会改变。

在每个设计页面上，您都会有一个链接来查看该设计的 CSS 文件。

内容和呈现分离的实际含义是什么？

它更像是一种设计理念，而不是具体的。一般来说，这意味着您应该保留内容的语义，将您的内容视为一条结构化信息。这也意味着您应该将所有美学细节远离这些结构化信息。

这只是为了避免内联CSS吗？

如上所述，内联样式与内容的语义无关，应该不惜一切代价避免。但事实并非如此 只是 那。

这是否只是意味着如果根据设计编写了html之后，那么如果我们想要对设计进行任何更改，那么它应该只使用css，不需要html

不幸的是，在不修改底层标记的情况下并不总是能够实现一些具体的美学目标；CSS3 尽力解决这些问题。

我们应该避免使用哪个 X/HTML 标签来保持内容和表示的分离？

查找已弃用的标签 W3C HTML 4.01 / XHTML 1.0 参考

内容和呈现的分离对于辅助功能/屏幕阅读器用户也有帮助吗？

一定。即使某些浏览器错误地呈现样式（或根本不呈现样式），更好的结构化信息通常仍然可读。此类内容在印刷媒体上看起来也可能更合适（尽管可以应用印刷样式来实现更好的美学效果——同样，它们与内容语义无关）。

内容和表示的分离对程序员/开发人员/设计师也有帮助吗？

当然。内容和表示的分离源于更普遍的哲学，即关注点分离。每个人都从分离中受益：内容供应商不一定是优秀的设计师，反之亦然。

在某些点上换行是不可避免的，通常会出现一些重叠的演示和内容。不过，您应该始终以完美分离为目标。

走另一个极端：包含大量表格的页面，仅用于布局目的。这是绝对应该不惜一切代价避免的反模式。内容在此处的布局之后扮演了第二个角色；它的顺序通常不正确，因此很难被机器读取。机器可读的内容不利于可访问性，也不利于页面的搜索引擎排名。

通过标记内容而不关心演示，您首先要使其成为机器可读的。然后，您还可以以不同的格式（例如移动优化版本）向不同的客户提供相同的内容。您还可以轻松更改演示文稿，而无需弄乱 HTML 文件（例如进行大规模重新设计）。

分离内容和表示（HTML - CSS 文件）自然带来的另一个好处是，您需要输入的内容和维护的内容都更少，而且您的页面可以非常轻松地应用一致的样式。对比数千种内联样式与非内联样式一个 CSS 文件中的一种样式定义，“自然”地应用于具有相同“含义”（标记）的所有元素。

理想情况下，您的 (X)HTML 仅包含有意义的语义标记和使用此标记作为选择器的 CSS 样式。在现实世界中，您经常会将类和 ID 混合到标记中，而不会添加额外的含义，因为您需要这些额外的“挂钩”来按照您想要的方式设置所有内容的样式。但即使在这里也有区别 class="blue right-aligned" 和 class="contact-info secondary". 。总是尝试添加 意义 注重内容，而不是风格。平衡这一点本身就是一门艺术。:)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top