什么是内容与表现分离的实际意义？内容和表示分离的实际含义是什么？
这是只是为了避免内联的CSS？
这是否意味着设计应该能够在不更改HTML的情况下进行操作？
我们能否真正做到只从CSS设计什么变化吗？
，其中x/HTML标签，我们应该避免给我们e保持内容和演示的分离？
是内容分离，演示也可访问/屏幕阅读器的用户有帮助吗？ ...和程序员/开发人员/设计师？
在定义什么是内容和形式，看看你的HTML文档的数据容器。然后问自己每个元素和属性在以下方面：
是否属性/元素代表了我的数据有意义的实体？
例如，<b>标记之间的词语是粗体显示，还是我想强调这些数据？
我使用正确的属性/元素属性表示我想表示的数据类型？
由于我想强调该特定部分，因此我应该使用<em>（它并不意味着斜体，这意味着重点并可以做成粗体）或<strong>，具体取决于所需强调的级别。
我是仅仅将属性/元素用于显示目的吗？如果是的话，该元素可以被删除，父元素使用CSS样式？
有时候，表象的标签可以简单地通过父元素的CSS规则代替。在这种情况下，表示标签需要被移除。
在问自己这三个简单的问题后，你通常可以做出一个非常明智的决定。举个例子：
原始代码：
<label for="name"><b>Name:</b></label>检查
<b>标签...是否属性/元素代表了我的数据有意义的实体？
不，标签不代表数据节点。它纯粹是为了演示。我使用正确的属性/元素属性表示我想表示的数据类型？
<b>用于呈现粗体元素。我是否仅将属性/元素用于显示目的？如果是的话，该元素可以被删除，父元素使用CSS样式？
由于<b>是呈现，我用它来演示，是的。由于<b>元素影响整个<label>，因此可以将其删除，并将样式应用于<label>。
语义HTML的目的不是为了简化设计和重新设计或避免内联样式，而是要帮助一个解析器明白什么特定的标记您的文档中。通过这种方式，可以创建应用程序（即：搜索引擎）来智能地决定您的内容是什么意思，并相应地进行分类。
因此，使用CSS属性content:在位于<q>标签中的文本添加引号是有意义的（对其他文档中包含的文档中包含的数据没有任何价值），但没有意义CSS属性在脚注中添加一个©符号，因为它在数据中具有值。
同样适用于属性。在表示16×16大小的图标的<img>标签上使用width和height属性具有语义意义，因为了解<img>标签的含义很重要（图标可以根据显示的大小具有不同的表示形式）。在代表较大图像的缩略图的<img>标签上使用相同的属性不会。
有时您需要添加非语义元素才能实现想要的演示文稿，但通常这些元素是可以避免的。
没有错误的元素。特定元素有错误的用途。添加重点时不应使用<b>。 <small>应该用于合法的子文本，而不是使文本变小（请参阅HTML5 - Section 4.6.4为什么）等等...所有元素都有一个特定的使用场景，它们都代表数据（减去表示元素，但它们确实可用于一些案例）。没有内容应该被搁置。
属性是不同的东西。大多数属性都是表象性的。诸如<img border>和<body fgcolor>之类的属性在您所表示的数据中很少有意义，因此您不应该使用它们（除非是在极少数情况下）。
搜索引擎是一个很好的例子，为什么语义文档如此重要。 Microformats是一组预定义的元素和类，可以用来表示搜索引擎将以某种方式理解的数据。 The product price information in Google Searches是工作语义的一个例子。
通过使用一套标准的预定义的规则来存储你的文档中的信息允许第三方程序来了解什么似乎是文本的一堵墙，而无需使用启发式算法，这可能是容易失败。它还帮助屏幕阅读器和其他辅助功能应用程序更容易地理解信息呈现的环境。它也极大地帮助您的标记的可维护性，因为所有内容都与一组定义相关联。
最好的例子可能是CSS Zen Garden。
本网站的目标是展示只有基于CSS的设计才能实现的功能，并将内容与设计严格区分开来。由各种平面设计师贡献的样式表被用于改变视觉呈现of a single HTML file，产生数百种不同的设计。 HTML标记本身在不同设计之间永远不会改变。
在每个设计页面上，您都有一个链接来查看该设计的CSS文件。
在某些地方放置换行是不可避免的，通常会有一些表现和内容的重叠。你应该始终追求完美的分离。另一个极端：包含仅用于布局目的的表和负载表的页面。这是不惜一切代价应该避免的确定的反模式。内容在布局之后播放第二个小提琴;它往往不是正确的顺序，因此几乎没有机器可读性。不可机读的内容对可访问性不利，对页面的搜索引擎排名不利。
通过对内容进行标记而不用担心呈现内容，您首先要做到机器可读。然后，您还可以为不同格式的不同客户提供相同的内容，例如在移动优化版本中。您还可以轻松地更改演示文稿，而不必混淆HTML文件，例如进行重新设计。
，通过分离内容和形式（HTML - CSS文件）顺其自然的另一个好处是，你有更少的输入和更少的维护，再加上你的页面可以有一个一致的造型应用变得非常容易。在一个CSS文件中将数千种内联样式与一种样式定义进行对比，这种样式“自然”适用于具有相同“含义”（标记）的所有元素。
理想情况下，您的（X）HTML仅包含有意义的语义标记以及使用此选择器标记的CSS样式。在现实世界中，您经常会将类和ID混合到您的标记中，因为您需要这些额外的“钩子”以您想要的方式创建所有样式。但即使在这里，class="blue right-aligned"和class="contact-info secondary"之间也有区别。总是尝试将的含义添加到内容中，而不是样式。平衡这本身就是一门艺术。 :)
+1有帮助的答案 – 2010-03-07 05:54:06
什么是内容与表现分离的实际意义？
这是相当一个设计理念比有所混凝土。通常，这意味着您应该保留内容的语义，将您的内容视为一段结构化信息。这也意味着你应该保留所有审美细节，远离这种结构化信息。
是它仅仅意味着避免内联CSS？
如上所述，内联样式与您的内容的语义无关，应该不惜一切代价避免。但它不是只是那。
是它只是意味着，如果按照设计那么如果那么如果我们想要做的任何设计变更，那么它应该是只用CSS编写HTML后，无需到HTML
不幸的是，并不总是可以在不修改底层标记的情况下实现一些具体的审美目标; CSS3尝试最好解决这些问题。
我们应该避免使用哪个X/HTML标签来保持内容和表示的分离？
查找过时标签W3C HTML 4.01/XHTML 1.0 Reference
是内容和形式的分离也可访问/屏幕阅读器的用户有帮助吗？
当然。即使某些浏览器呈现不正确的样式（或根本不呈现它们），更好的结构化信息通常仍然可读。这些内容在印刷媒体上看起来也可能更加适合（尽管印刷风格可能被用来实现更好的美学 - 他们再次与内容语义无关）。
内容和表示的分离对程序员/开发人员/设计人员还有帮助吗？
当然。内容和表达的分离源于更一般的哲学，关注的分离。每个人都从分离中受益：内容供应商不一定要成为一名优秀的设计师，反之亦然。
+1有帮助的答案 – 2010-03-07 05:54:34
但它只有背景图像。你的意思是我们不应该使用![]()
，如果我们想要保持内容和演示文稿的分离 –
2010-02-14 07:10:50
在CSS禅园花园画廊中的所有设计都使用相同的HTML文件，你可以在这里看到：http://www.csszengarden.com/ zengarden-sample.html。每个设计之间没有任何变化。只有对正确的CSS文件的引用。有超过200个设计，变化是激烈的。 – 2010-02-14 07:25:59
@Jitendra：不，不，不......没有人说你必须避免任何特定的标签。我们的目标是让它理智而合理，尽可能让它们分离。 CSS Zen是一个很棒的演示站点，但是试图通过Web应用程序获得这种级别的分离效果。 – slugster 2010-02-14 07:29:07