HTML 标签:展示性与结构性
我在许多关于演示标签的文章中发现了许多不同的观点,有些人认为所有标签都是演示性的,但也有人不这么认为。
例如:在 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
元素使用 HEIGHT
和 WIDTH
属性?这不违反了分离的规则吗?关于这个问题的精彩辩论可以在此处找到。
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
W3C 决定标签的语义。 HTML5的规范文档给出了各种标签的使用条件。
要继续您的示例,使用
将某些文本加粗,除非:
加粗的文本是已由标签表示的单个实体:
<块引用>
错误:
<标签=“名称”>名称:
正确: (使用 CSS 设置元素样式)
标签 { 字体粗细:粗体; }
<标签=“名称”>名称:
文本被加粗,以增加对文本块中的某个部分或单词的强调和权重。< /p>
<块引用>
错误:
HTML 已创建为语义代表文档。
正确:(使用
)
HTML 已创建为语义代表文档。
以下是正确使用
标记的示例:
我意识到上面的示例与使用
作为正确示例的示例之间似乎没有太大区别。简单地解释一下,这个词在语义上在句子中起着重要的作用,并且通过粗体字体加强了它的重点,而 logout 只是为了演示目的而加粗。
以下是不正确的用法。
使用
具有标记气味,根本不应该被允许。
元素用于在通用表示标记(即:
不适用)时在内联元素上应用样式,例如一些绿色文本:
这里您想要使用
而不是
来表示绿色一词的原因是因为这里使用绿色是为了强调 ACME Corp 是一家经过认证的绿色公司这一事实。
以下是使用
标签的一个很好的示例:
在此示例中,单词 green 的样式为绿色,只是为了反映颜色,不要添加任何强调 (
) 或强烈强调 (
)。
W3C decides the semantics of tags. The specification documents of HTML5 gives conditions on the use of the various tags.
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:
The text is being bolded to put added emphasis and weight on a section or words of a block of text.
The following is an example of proper use of the
<b>
tag: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.
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: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: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>
).在我看来,“表示”元素与“结构”元素之间的整体区别是常识问题,而不是 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>
这并不是说应该避免表现性元素,而是标记应该尽可能具有语义性。在设计文档结构时,默认样式应被视为次要影响。如果一个元素仅用于表示,那么无论使用什么元素,它都不是语义的。
的示例用法不具有语义,因为
没有赋予任何含义。
也不是语义的。因此,它们的用法是将表示混合到结构中。
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.