内容与呈现分离的实际意义是什么？
它只是意味着避免内联css吗？
这是否意味着设计应该能够在不更改 HTML 的情况下进行操作？
我们真的可以仅从 CSS 对设计进行任何更改吗？
我们应该避免使用哪个 X/HTML 标记来保持内容和表示的分离？
内容和演示的分离对可访问性/屏幕阅读器用户也有帮助吗？...对于程序员/开发人员/设计师？
在定义什么是内容和表示时，将您的 HTML 文档视为数据容器。然后在每个元素和属性上问自己以下问题：
属性/元素是否代表我的数据中有意义的实体？
例如，<b>标记之间的单词是否只是为了显示目的而以粗体显示，还是我想强调该数据？
我是否使用正确的属性/元素来属性表示我想要表示的数据类型？
因为我想强调那个特定的部分，所以我应该使用<em>（这并不意味着斜体，它意味着强调并且可以加粗）或<strong>取决于想要的强调程度。
我是否仅将属性/元素用于显示目的？如果是，是否可以删除元素并使用 CSS 设置父元素样式？
有时一个展示标签可以简单地被父元素上的 CSS 规则替换。在这种情况下，需要删除演示标签。
在问自己这三个简单的问题之后，您通常能够做出非常明智的决定。一个例子：
原始代码：
<label for="name"><b>Name:</b></label>检查
<b>标签...属性/元素是否代表我的数据中有意义的实体？
不，标签不代表数据节点。它纯粹是为了展示。我是否使用正确的属性/元素来属性表示我想要表示的数据类型？
<b>用于呈现粗体元素。我是否仅将属性/元素用于显示目的？如果是，是否可以删除元素并使用 CSS 设置父元素样式？
因为<b>是展示性的，我用它来展示，是的。并且由于该<b>元素影响整个<label>，因此可以将其删除并将样式应用于<label>.
语义 HTML 的目标不是简化设计和重新设计或避免内联样式，而是帮助解析器理解特定标记在文档中表示的内容。这样，可以创建应用程序（即：搜索引擎）以智能地决定您的内容表示什么并相应地对其进行分类。
content:因此，使用 CSS 属性在位于标签中的文本周围添加引号是有意义的<q>（它对文档中包含的数据没有任何价值，而不是演示文稿），但使用相同的 CSS 属性添加 © 没有意义页脚中的符号，因为它在您的数据中确实具有值。
同样适用于属性。在表示大小为 16x16 的图标的标签上使用widthandheight属性具有<img>语义意义，因为理解<img>标签的含义很重要（图标可以有不同的表示形式，具体取决于它显示的大小）。在表示较大图像的缩略图的标签上使用相同的属性<img>不会。
有时您需要添加非语义元素才能实现您想要的演示，但通常这些是可以避免的。
没有错误的元素。特定元素的错误使用。<b>添加强调时不应使用。<small>应该用于合法的子文本，而不是使文本变小（请参阅HTML5 - 4.6.4 节了解原因）等...所有元素都有特定的使用场景，它们都表示数据（减去表示元素，但它们确实在某些情况下有用）。任何元素都不应放在一边。
属性是另一回事。大多数属性本质上是表现性的。诸如<img border>和<body fgcolor>很少在您所代表的数据中具有意义的属性，因此您不应使用它们（除非在极少数情况下）。
搜索引擎是一个很好的例子，说明了为什么语义文档如此重要。微格式是一组预定义的元素和类，您可以使用它们来表示搜索引擎将以某种方式理解的数据。谷歌搜索中的产品价格信息是工作语义的一个例子。
通过使用设定标准中的预定义规则在文档中存储信息，第三方程序可以理解似乎是一堵文本的内容，而无需使用可能容易出错的启发式算法。它还可以帮助屏幕阅读器和其他可访问性应用程序更轻松地理解呈现信息的上下文。它还极大地有助于标记的可维护性，因为所有内容都与集合定义相关联。
最好的例子可能是CSS Zen Garden。
该站点的目标是展示仅使用基于 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"。始终尝试为内容添加意义，而不是风格。平衡这本身就是一门艺术。:)