css - HTML 标签 : Presentational vs Structural

Question

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

例如:在HTML 5规范中，他们不认为<small>是介绍性的。

在这个标签列表中——所有 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 这样特别大的团体，还是基于网络开发者团体，即网络社区？此外，在这两者之间，我们应该遵循哪些建议来决定哪些标签是展示性的？

如果根据 W3C 接受的文档类型，标签是有效的，那么不使用任何 xhtml 的优点是什么？从任何 Angular 标记？

从用户/可用性/可访问性的 Angular 来看

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

从开发者的 Angular 来看

如果我们在 HTML 中使用更多可用的标签，那么我们就不需要使用 <span class=className">

与 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 不会属性(property)Content也断了？

看这个article .

为什么 HEIGHT和 WIDTH IMG 的属性允许的元素？这不是违反了分离规则吗？可以找到关于这个问题的很好的辩论here .

Answer 1

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

HTML5

继续您的示例，使用 <b> 没有任何问题将一些文本加粗，除非:

• 加粗的文本是一个已经由标签表示的实体:

  Incorrect:
  <label for="name"><b>Name:</b></label>

  Correct: (Use CSS to style the element)
  label { font-weight: bold; }
<label for="name">Name:</label>

• 文本被加粗是为了强调和强调文本 block 中的某个部分或单词。

  Incorrect:
  <p>HTML has been created to <b>semantically</b> represent documents.</p>

  Correct: (Use <strong>)
  <p>HTML has been created to <strong>semantically</strong> represent documents.</p>

以下是正确使用 <b> 的示例标签:

Correct:
<p>You may <b>logout</b> at any time.</p>

我意识到上面的例子和使用 <strong> 的例子似乎没有太大区别。作为正确的例子。简单地解释一下，语义这个词在句子中起着重要的作用，它的重点是通过粗体来加强的，而注销只是为了表达目的而加粗。

以下是不正确的用法。

Incorrect:
<p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>

Correct: (This is used to add strong emphasis, therefore use <strong>)
<p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>

---

使用 <span class="bold">是标记气味，根本不应该被允许。 <span>元素用于在通用表示标记(即:<b> 不适用)时在内联元素上应用样式例如使一些文本变为绿色:

Incorrect:
<p>You will also be happy to know <span class="bold">ACME Corp</span> is a <span class="eco-green">certified green</span> company.</p>

Correct: (Explanation below)
<p>You will also be happy to know <b>ACME Corp</b> is a <em class="eco-green">certified green</em> company.</p>

这里是您想要使用 <em> 的原因而不是 <span>绿色这个词是因为这里的绿色是用来强调 ACME Corp 是一家经过认证的绿色公司这一事实。

以下是使用 <span> 的一个很好的例子标签:

Correct:
<p>You may press <kbd>CTRL+G</hbd> at any time to change your pen color to <span class="pen-green">green</span>.</p>

在这个例子中，单词 green 被设置为绿色只是为了反射(reflect)颜色，而不是添加任何强调 (<em>) 或强烈强调 (<strong>)。