HTML 标签：展示性 vs 结构性答案

【问题标题】：HTML Tags: Presentational vs StructuralHTML 标签：展示性 vs 结构性
【发布时间】：2010-02-14 05:06:56
【问题描述】：

我在很多关于演示标签的文章中发现了许多不同的观点，with some people thinking all tags are presentational，但有些人不这么认为。

例如：在 HTML 5 规范中，他们不认为  是展示性的。

在这个标签列表中 - 所有的 HTML 5 都支持 - 哪个标签是展示性的，哪个不是？

<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>

谁来决定哪个 HTML 标签是展示性的，哪个不是 - 他们是如何做出这个决定的？它是一个特别大的团体，例如 W3C，还是基于 Web 开发人员团体，即 Web 社区？另外，在这两者之间，我们应该遵循哪些建议来决定哪些标签是展示性的？

如果根据 W3C 在接受的文档类型中标签是有效的，那么从任何角度来看，不使用任何 xhtml 标签的优点是什么？

从用户/可用性/可访问性的角度来看

如果我们使用更多的 HTML 标签，那么没有 CSS 的页面会更好。

从开发者的角度来看

如果我们在 HTML 中使用更多可用标签，则不需要使用

与 HTML 和 CSS 中的标签相比，它需要更多的时间来编写并且使用更多的章程空间。

例如：

而不是使用：

<span class="boldtext">Some text<span>

.boldtext {font-weight:700}

我们可以使用：

<b>Some text<b>

b  {font-weight:700}

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

我们也可以这样做：

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

b.important  {font-weight:700}

并且每当我们想要更改字体粗细时，我们只能在这两个示例中更改css。

如果一个标签在其认可的文档类型中被 w3c 认为是有效的，那么不使用任何未被 W3C 或 HTML 规范直接识别的 X/HTML 表示性标签的优点是什么？

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

如果任何 HTML 标记破坏了分隔规则，那么 css 属性 Content 是否也破坏了？

看到这个article。

为什么允许IMG 元素的HEIGHT 和WIDTH 属性？它不破坏分离规则吗？关于这个问题的一个很好的辩论可以找到here。

【问题讨论】：

标签： css xhtml w3c semantic-markup html

【解决方案1】：

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

HTML5

继续您的示例，使用 将某些文本加粗没有任何问题，除非：

加粗的文本是一个已经用标签表示的单一实体：

不正确：
<label for="name">Name:</label>

正确： （使用 CSS 设置元素样式）
label { font-weight: bold; }
<label for="name">Name:</label>
文本被加粗，以增加文本块的部分或单词的重点和权重。

不正确：
HTML has been created to semantically represent documents.

正确： （使用）
HTML has been created to semantically represent documents.

以下是正确使用标签的示例：

正确：
You may logout at any time.

我意识到上述示例与使用 作为正确示例的示例之间似乎没有太大区别。简单的解释一下，这个词在语义上在句子中起着重要的作用，它的重点被粗体加强了，而注销只是为了演示目的而加粗。

以下是不恰当的用法。

不正确：
Warning: Following the procedure described below may irreparably damage your equipment.

正确： （这用于强调强调，因此使用）
Warning: Following the procedure described below may irreparably damage your equipment.

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

不正确：
You will also be happy to know ACME Corp is a certified green company.

正确： （解释如下）
You will also be happy to know ACME Corp is a certified green company.

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

以下是使用 标签的一个很好的例子：

正确：
You may press <kbd>CTRL+G</hbd> at any time to change your pen color to green.

在本例中，绿色一词只是为了反映颜色，而不是添加任何强调 () 或强调强调 ()。

【讨论】：

即使将 用于“（必需）”或“ACME Corp”也是错误的。它应该分别类似于 和，它描述了这些字符串是什么；他们不是“大胆的”，不管那是什么。 :-)
至于“鸭子”，这就是<dfn> 的用途。 :-) 如果您愿意，可以使用粗体来设置样式，但说真的，我不会使用 wiki 标记作为“正确标记”的模型。
@Chris Jester-Young： 绝不是语义化的。它是在表示的元素不适合任何其他类别时使用的通用元素。虽然我同意 是去这里的正确方式，但我不得不不同意该公司，因为它只使用过一次。在公司列表或公司具有特定含义的特定页面的情况下， 将是要走的路。你对<dfn> 也是正确的，我忘记了那个元素。寻找另一个例子...
@Andrew： 本身没有语义。您附加到它的类是语义的。  和 <div> 的意义在于它们（应该）没有过多的表现假设。
@Chris Jester-Young：正确，但是附加到它们的类需要具有与其中包含的数据相关的含义。通过使用，您暗示该公司在文档的数据结构中具有重要性，而在这种情况下，它只是文本的一部分而不是有意义的实体。

【解决方案2】：

在我看来，“表示”元素与“结构”元素之间的全部区别是常识问题，而不是 W3C 或其他任何人定义的问题。 :-P

一个描述什么其内容的元素（与它应该看起来如何相反）是一个结构元素。根据定义，其他所有内容都不是结构性的，因此是表示元素。

现在，我将回答您帖子的第二部分。我知道这是一个有争议的话题，但我还是会说出我的想法。

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

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

要使用您的示例，而不是使用，您应该问自己大胆应该表达什么。如果您要表达节标题，请使用标题标签之一（<h1> 到 <h6>）。如果您想表达强烈的强调，请使用。你明白了。表达什么，而不是如何；将如何做留给样式表设计者。

【讨论】：

对我来说， 不是语义的（我不同意“接受的答案”；精美的印刷品可以有自己的类，它不称为“小”），但是，我明白这是合理的人们对此持不同意见。我仍然会避免使用。对于您的第一点，我同意 比 更邪恶。但无论在何种程度上可以修改类以指定“什么”，甚至更好。
@Jitendra:   是语义如果由父实体表示的数据包含一个换行符，  用于表示它。 <hr /> 是语义的，如果父实体表示的数据包含分节符或分页符并且<hr /> 用于表示它（这是有争议的）。如果纯粹用于显示目的，则标签没有语义价值。我仍然会将<hr /> 归类为展示性，但不是 
@Jitendra：我认为  和<hr> 在结构标记中都有一席之地。（例如，换行符用于以某种方式表达诗歌。想想人们如何布置俳句。）不过，我尽量少用它们。
@Jitendra：在查看文档语义时，请始终查看实体/属性表示的数据是否对文档的数据结构有意义。使用content: 在位于<q> 元素中的文本周围添加引号不会影响数据结构（毕竟" 是纯显示元素，引号本身就是数据，它是一个引号）。当图像的宽度/高度在数据结构中有意义时，使用width 和height 属性会影响数据结构。因此，在对文档有意义时使用属性是语义...
... 例如，border 属性永远不会添加到文档的数据含义中。这同样适用于<body> 元素的fgcolor 和bgcolor 属性。如果width 和height 属性对元素的数据含义没有内在价值并且纯粹用于演示目的，则应使用CSS 对其进行样式设置。

【解决方案3】：

并不是应该避免表现性元素，而是应该尽可能地语义化标记。在设计文档结构时，应将默认样式视为次要影响。如果一个元素仅用于表示，那么无论使用什么元素，它都不是语义的。

 的示例用法没有语义，因为 没有任何意义。  也不是语义的。因此，它们的用法是将表示混合到结构中。

【讨论】：