HTML 标签:展示性与结构性

发布于 2024-08-21 00:02:30 字数 2258 浏览 4 评论 0原文

我在许多关于演示标签的文章中发现了许多不同的观点,有些人认为所有标签都是演示性的,但也有人不这么认为。

例如:在 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}

每当我们想要更改 font-weight 时,我们都可以更改 css。 仅在两个示例中。

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

我们可以在不更改 HTML 中的任何内容的情况下更改任何设计参数吗?

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

请参阅此 文章

为什么允许 IMG 元素使用 HEIGHTWIDTH 属性?这不违反了分离的规则吗?关于这个问题的精彩辩论可以在此处找到。

I found many different views on many articles on presentation tags, with some people thinking all tags are presentational, but some others do not think so.

For example: in the HTML 5 specification, they do not think <small> is presentational.

In this list of tags - which are all HTML 5 supported - which tag is presentational and which is not?

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

Who decides which HTML tag is presentational and Which is not - and how do they make that decision? Is it a particularly large group such as the W3C or is it based on groups of web developers, i.e. the web community? Also, between the two, which advice we should follow for deciding which tags are presentational?

If a tag is valid as according to the W3C in accepted doctypes, then what are the pros to not using any xhtml tag from any point of view?

in user/usability/accessibility point of view

if we use more HTML tags then pages without CSS will better.

in developer point of view

if we make use of more available tags in HTML, than we do not need to use <span class=className">

it takes more time to write and it uses more charter space than tags in HTML and CSS both.

For example:

instead of using:

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

.boldtext {font-weight:700}

We can use:

<b>Some text<b>

b  {font-weight:700} 

it looks cleaner, it is easier to use , it uses less characters - which will reduce the page size - and it is more readable in source. It also does not break the rule of content and presentation separation.

We can also do this:

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

b.important  {font-weight:700}

and whenever we want to change font-weight then we can change css only in both examples.

If a tag is considered valid by w3c in their recognized doctypes, then what are the pros to not using any X/HTML presentational tags which are not directly recognized by either the W3C, or by the HTML specifications?

Can we change any design parameters without changing anything in HTML? Does this fit within the meme of content and presentation separation?

If any HTML tag breaks the rule of separation, then does not the css property Content break as well?

see this article.

Why are the HEIGHT and WIDTH attributes for the IMG element permitted?. does it not break the rule of separation? A good debate on this matter can be found here.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

痴情 2024-08-28 00:02:30

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

HTML5

要继续您的示例,使用 将某些文本加粗,除非:

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

    <块引用>

    错误:
    <标签=“名称”>名称:

    正确: (使用 CSS 设置元素样式)
    标签 { 字体粗细:粗体; }
    <标签=“名称”>名称:

  • 文本被加粗,以增加对文本块中的某个部分或单词的强调和权重。< /p>
    <块引用>

    错误:

    HTML 已创建为语义代表文档。

    正确:(使用

    HTML 已创建为语义代表文档。



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

正确:

您可以注销随时。

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

以下是不正确的用法。

错误:

警告:遵循下述步骤可能会对您的设备造成不可挽回的损坏。

正确: (这用于强调重点,因此使用

警告:遵循下述步骤可能会对您的设备造成不可挽回的损坏。



使用 具有标记气味,根本不应该被允许。 元素用于在通用表示标记(即: 不适用)时在内联元素上应用样式,例如一些绿色文本:

错误:

您也会很高兴了解ACME Corp经过绿色认证的公司。

正确: (解释如下)

您也会很高兴了解 ACME Corp经过认证的绿色公司。

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

以下是使用 标签的一个很好的示例:

正确:

您可以按CTRL+G随时将笔颜色更改为绿色

在此示例中,单词 green 的样式为绿色,只是为了反映颜色,不要添加任何强调 () 或强烈强调 ()。

W3C decides the semantics of tags. The specification documents of HTML5 gives conditions on the use of the various tags.

HTML5

To continue with your example, there is nothing wrong with using <b> to bold some text unless:

  • The text being bolded is a single entity already represented by a tag:

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

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

  • The text is being bolded to put added emphasis and weight on a section or words of a block of text.

    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>

The following is an example of proper use of the <b> tag:

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

I realize that there doesn't seem to be a lot of difference between the above example and the one using <strong> as the proper example. To simply explain it, the word semantically plays an important role in the sentence and its emphasis is being strengthened by bold font, while logout is simply bolded for presentation purposes.

The following would be an improper usage.

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>


Using <span class="bold"> is markup-smell and simply shouldn't be allowed. The <span> element is used to apply style on inline elements when a generic presentation tag (ie.: <b> doesn't apply) For example to make some text green:

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>

The reason here why you would want to use <em> as opposed to <span> for the word green is because the color green here is used to add emphasis on the fact that ACME Corp is a certified green company.

The following would be a good example of the use of a <span> tag:

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>

In this example, the word green is styled in green simply to reflect the color, not to add any emphasis (<em>) or strong emphasis (<strong>).

九命猫 2024-08-28 00:02:30

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

描述其内容是什么(而不是其外观如何)的元素是结构元素。根据定义,其他所有内容都不是结构性的,因此都是表示元素。

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

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

通过在 HTML 中使用演示标记,您可以在所有这些不同类型的媒体中强制某种“外观”,从而使设计人员无法选择最有效的外观对于此类设备。这是最糟糕的微观管理,设计师会因此讨厌你。 :-)

要使用您的示例,您应该问自己粗体应该表达什么,而不是使用 。如果您尝试表达节标题,请使用标题标记之一(

)。如果您想表达强烈的强调,请使用 。你明白了。表达什么,而不是如何;将如何操作留给样式表设计者。

The whole distinction between "presentation" elements versus "structure" element is, in my opinion, a matter of common sense, not something defined by W3C or anyone else. :-P

An element that describes what its content is (as opposed to how it should look) is a structure element. Everything else is, by definition, not structural, and therefore a presentation element.

Now, I'll answer the second part of your post. I understand this is a contentious topic, but I'll speak my mind anyway.

Well-made HTML should not concern itself with how it should look. That's the job of the stylesheet. The reason it should leave it to the stylesheet, is so you can deliver one stylesheet for desktop computers, another one for netbooks, smartphones, "dumbphones" (for lack of a better term), Kindles, and (if you care about accessibility, and you should) screen readers.

By using presentation markup in your HTML, you force a certain "look" across all these different types of media, removing the ability of the designer to choose a look that works best for such devices. This is micromanagement of the worst sort, and designers will hate you for it. :-)

To use your example, instead of using <b>, you should ask yourself what the boldness is supposed to express. If you're trying to express a section title, use one of the header tags (<h1> through <h6>). If you're trying to express strong emphasis, use <strong>. You get the idea. Express the what, not the how; leave the how to the stylesheet designers.

</soapbox>

稳稳的幸福 2024-08-28 00:02:30

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

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

It's not that presentational elements should be avoided, it's that markup should be as semantic as possible. When designing a document structure, default styling should be considered a secondary affect. If an element is used solely for presentation, it's not semantic, no matter what element is used.

The example usage of <b> isn't semantic, because <b> imparts no meaning. <span class="boldtext"> also isn't semantic. As such, their usage is mixing presentation into the structure.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文