Css HTML标记：表示性与结构性

我在演示标签上的许多文章上发现了许多不同的观点，但其他一些人不这么认为

例如：在HTML5规范中，他们不认为

是表示性的

在这个标签列表中，哪些是HTML5支持的，哪些是表示性的，哪些不是

<abbr>

<address>

<area>

<b>

<bdo>

<blockquote>

<br>

<button>

<cite>

<dd>

<del>

<dfn>

<dl>

<dt>

<em>

<hr>

<i>

<ins>

<kbd>

<map>

<menu>

<pre>

<q>

<samp>

<small>

<span>

<strong>

<sub>

<sup>

<var>

我们可以使用：

<b class="important">Some text<b>

b.important  {font-weight:700}

一些文本
b{字体大小：700}

它看起来更干净，更容易使用，使用更少的字符-这将减少页面大小-并且在源代码中更可读。它也没有打破内容和表示分离的规则

我们也可以这样做：

一些文本
b、 重要信息{字体重量：700}

无论何时我们想要改变字体的重量，那么我们只能在两个例子中改变

css

如果w3c认为标记在其已识别的doctype中有效，那么不使用w3c或HTML规范未直接识别的任何X/HTML表示标记的好处是什么

我们可以在不改变HTML任何内容的情况下改变任何设计参数吗？这是否符合内容和表达分离的模因

如果任何HTML标记违反了分隔规则，那么

css

属性

Content

是否也会中断？

看这个

---

为什么允许

IMG

元素的

高度

和

宽度

属性？。它不违反分离的规则吗？在这个问题上可以找到一个很好的争论。

在我看来，“表示”元素和“结构”元素之间的整个区别是一个常识问题，而不是W3C或其他任何人定义的东西：-P

描述其内容的元素（与其外观相反）是结构元素。根据定义，其他一切都不是结构化的，因此是表示元素

现在，我来回答你文章的第二部分。我知道这是一个有争议的话题，但我还是要说出我的想法

制作良好的HTML不应该关心它的外观。这就是样式表的工作。它应该留给样式表处理的原因是，您可以为台式计算机提供一个样式表，为上网本、智能手机、“哑巴手机”（缺少更好的术语）、Kindle和（如果您关心可访问性，您应该）屏幕阅读器提供另一个样式表

通过在HTML中使用表示标记，您可以在所有这些不同类型的媒体上强制使用某种“外观”，从而消除了设计师选择最适合此类设备的外观的能力。这是最糟糕的微观管理，设计师会因此讨厌你。：-）

要使用您的示例，而不是使用

，您应该问问自己粗体应该表达什么。如果您试图表达章节标题，请使用标题标记之一（

至

）。如果您试图表达强烈的强调，请使用

。你明白了。表达什么，而不是如何表达；将how留给样式表设计者

---

W3C决定标记的语义。HTML5的规范文档给出了使用各种标签的条件

为了继续您的示例，使用

加粗一些文本没有什么错，除非：

• 粗体文本是已由标记表示的单个实体：
  不正确：
  

  名称：

  正确：（使用CSS设置元素样式）
  

  标签{font-weight:bold；}

  
  

  名称：

• 文本被加粗，以便在文本块的某个部分或单词上增加强调和权重
  不正确：
  

  HTML已创建为语义上表示文档。
  

  正确：（使用
  ）
  

  HTML已创建为语义上表示文档。
  

以下是正确使用

标记的示例：

正确：

您可以随时注销。

我意识到上面的示例与使用

作为正确示例的示例之间似乎没有太大区别。简单地说，这个词在句子中起着重要的语义作用，加粗字体加强了它的重点，而注销只是为了表示目的而加粗

以下是不正确的用法

不正确：

警告：按照下述步骤操作可能会对您的设备造成不可修复的损坏。

正确：（这用于增加强调，因此使用

）

警告：遵循以下步骤可能会对您的设备造成无法修复的损坏。


使用
是一种标记气味，不应该被允许。
元素用于在通用表示标记（即：
不适用）不适用时对内联元素应用样式，例如，使某些文本变为绿色：

不正确：

您也会很高兴知道ACME Corp是一家经过认证的绿色公司。

正确：（解释如下）

您也会很高兴知道ACME Corp是一家经过认证的绿色公司。

这里之所以要使用
而不是
来表示绿色，是因为这里的绿色用于强调ACME Corp是一家经过认证的绿色公司这一事实

下面是使用
标记的一个很好的例子：

正确：

您可以随时按CTRL+G更改笔的颜色
<b>Some text<b>

b  {font-weight:700} 

<b class="important">Some text<b>

b.important  {font-weight:700}