HTML标签:演示与结构

时间:2010-02-14 05:06:56

标签: css xhtml w3c semantic-markup html5

我在很多关于演示标签的文章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,还是基于Web开发人员群体,即网络社区?另外,在两者之间,我们应该遵循哪些建议来决定哪些标签是呈现的?

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

用户/可用性/辅助功能观点

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

从开发人员的角度来看

如果我们在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}

每当我们想要更改font-weight时,我们只能在两个示例中更改css

如果w3c在其识别的文档类型中认为标记有效,那么不使用任何W3C或HTML规范无法直接识别的X / HTML表示标记的优点是什么?

我们可以更改任何设计参数而无需更改HTML中的任何内容吗?这是否符合内容和表达分离的模式?

如果任何HTML标记违反了分离规则,那么css属性Content也不会中断吗?

请参阅此article

为什么允许HEIGHT元素的WIDTHIMG属性?它不会打破分离规则吗?关于这个问题的辩论可以找到here

3 个答案:

答案 0 :(得分:7)

在我看来,“表现”元素与“结构”元素之间的整体区别是常识问题,而不是W3C或其他任何人定义的内容。 :-P

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

现在,我将回答你帖子的第二部分。我知道这是一个有争议的话题,但无论如何我都会说出自己的想法。

制作精良的HTML不应该关注它的外观。这是样式表的工作。它应该留给样式表的原因是你可以为桌面计算机提供一个样式表,为上网本提供另一个样式表,智能手机,“dumbphones”(缺乏更好的术语),Kindles,以及(如果你关心可访问性,你应该屏幕读者。

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

要使用您的示例,而不是使用<b>,您应该问自己大胆应该表达的。如果您尝试表达标题标题,请使用其中一个标题标记(<h1><h6>)。如果您想表达强调,请使用<strong>。你明白了。表达什么,而不是如何;离开如何到样式表设计师。

&LT; /肥皂盒&GT;

答案 1 :(得分:7)

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

  

HTML5

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

  • 正在加粗的文本是已由标记表示的单个实体:

      

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

         

    正确: (使用CSS设置元素的样式)
      label { font-weight: bold; }
      <label for="name">Name:</label>

  • 该文字正在加粗,以便在一个或多个文本块的一个或多个单词上增加重点和重量。

      

    <强>不正确:
      <p>HTML has been created to <b>semantically</b> represent documents.</p>

         

    正确: (使用<strong>
      <p>HTML has been created to <strong>semantically</strong> represent documents.</p>

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

  

<强>正确:
  <p>You may <b>logout</b> at any time.</p>

我意识到上面的示例与使用<strong>作为正确示例的示例之间似乎没有太大区别。为了简单地解释它,这个词在语义上在句子中扮演着重要的角色,它的重点是通过粗体字体加强,而注销只是为了演示目的而加粗。

以下是不正确的用法。

  

<强>不正确:
  <p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>

     

正确: (这用于强调,因此请使用<strong>
  <p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>


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

  

<强>不正确:
  <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>

     

正确: (以下说明)
  <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>标记的一个很好的例子:

  

<强>正确:
  <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以绿色样式,仅用于反映颜色,而不是添加任何强调(<em>)或强调(<strong>)。

答案 2 :(得分:0)

并不是应该避免表示元素,而是标记应尽可能保持语义。在设计文档结构时,默认样式应被视为次要影响。如果元素仅用于表示,则无论使用何种元素,它都不是语义的。

<b>的示例用法不是语义,因为<b>没有任何意义。 <span class="boldtext">也不是语义。因此,它们的用法是将表现混合到结构中。