CSS / HTML：什么是使文本斜体的正确方法？ [英] CSS/HTML: What is the correct way to make text italic?

问题描述

什么是正确的方式使文字斜体？我已经看到以下四种方法：

 < i>斜体文本< / i> 
 
< em>斜体文本< / em> 
 
< span class =italic>斜体文本< / span> 
 
< span class =footnote>斜体文本< / span> 
  

< i>

这是旧方式。 < i> 没有语义，仅传达使文本变为斜体的表现效果。就我所见，这显然是错误的，因为这是非语义的。

< h1> < em>

这使用语义标记纯粹表示目的。它只是发生，< em> 默认渲染文本为斜体，所以它经常被那些知道< i& / code>应该避免，但谁不知道它的语义意义。不是所有的斜体文本都是斜体的，因为它是强调的。

< span class =italic>

这经常被称为正确的方式，但再次，这似乎是我错了。这似乎没有传达任何更多的语义意义，< i> 。但是，它的支持者哭泣，更容易更改所有的斜体文本，如果你，说，希望它是大胆的。然而这不是这样的，因为我会留下一个称为斜体的类，使文本加粗。此外，不清楚为什么我会改变我的网站上的所有斜体文本，或至少我们可以想到的情况下，这是不可取的或必要的。

< span class =footnote>

这使用了一个用于语义的CSS类。到目前为止，这似乎是最好的方法，但它实际上有两个问题。

1. 不是所有的文本都有足够的意义，标记。例如，页面底部的斜体文本是否是一个脚注？还是放在一边？或者其他完全。




2. 语义意义可以改变，当它不是以足够的强度存在。让我说，我根据没有什么比只有文本在页面底部的脚注。几个月后，我想在底部添加更多的文本会发生什么？它不再是脚注。我们如何选择一个比< em> 更少通用的语义类，但是避免这些问题？

摘要

语义的要求在许多情况下似乎是过于沉重的，在这种情况下，使某事倾斜的愿望并不意味着带有语义意义。

此外，分离样式和结构的愿望使CSS被替换为< i> 当有时候，这实际上会不太有用。所以这让我回到谦逊的< i> 标签，并想知道这种思路是否是为什么它留在HTML5规范？

有没有关于这个问题的好的博客文章或文章？

解决方案 / div>

对于不同的用例，应该使用不同的方法：

1. 如果要强调一个短语，请使用<$ c =http://www.w3.org/TR/html5/text-level-semantics.html#the-i-element =nofollow noreferrer>在HTML5中的新含义，表示一个跨度在替代声音或情绪中的文本。所以你应该使用这个标签的东西，如思想/旁白或习语短语。该规范还建议船名（但不再建议书/歌曲/电影名称;使用< cite> 代替）。


2. 如果斜体文本是较大上下文的一部分，比如一个介绍性段落，应该将CSS样式附加到较大的元素，即 p.intro {font-style：italic; }

What is the correct way to make text italic? I have seen the following four approaches:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

This is the "old way". <i> has no semantic meaning and only conveys the presentational effect of making the text italic. As far as I can see, this is clearly wrong because this is non-semantic.

<em>

This uses semantic mark up for purely presentational purposes. It just happens that <em> by default renders text in italic and so it is often used by those who are aware that <i> should be avoided but who are unaware of its semantic meaning. Not all italic text is italic because it is emphasised. Sometimes, it can be the exact opposite, like a side note or a whisper.

<span class="italic">

This uses a CSS class to place presentation. This is often touted as the correct way but again, this seems wrong to me. This doesn't appear to convey any more semantic meaning that <i>. But, its proponents cry, it is much easier to change all your italic text later if you, say, wanted it bold. Yet this is not the case because I would then be left with a class called "italic" that rendered text bold. Furthermore, it is not clear why I would ever want to change all italic text on my website or at least we can think of cases in which this would not be desirable or necessary.

<span class="footnote">

This uses a CSS class for semantics. So far this appears to be the best way but it actually has two problems.

1. Not all text has sufficient meaning to warrant semantic markup. For example, is italicised text at the bottom of the page really a footnote? Or is it an aside? Or something else entirely. Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it.

2. Semantic meaning can change when it is not present in sufficient strength. Lets say I went along with "footnote" based upon nothing more than the text being at the bottom of the page. What happens when a few months later I want to add more text at the bottom? It is no longer a footnote. How can we choose a semantic class that is less generic than <em> but avoids these problems?

Summary

It appears that the requirement of semantics seems to be overly burdensome in many instances where the desire to make something italic is not meant to carry semantic meaning.

Furthermore, the desire to separate style from structure has led CSS to be touted as a replacement to <i> when there are occasions when this would actually be less useful. So this leaves me back with the humble <i> tag and wondering whether this train of thought is the reason why it is left in the HTML5 spec?

Are there any good blog posts or articles on this subject as well? Perhaps by those involved in the decision to retain/create the <i> tag?

解决方案

You should use different methods for different use cases:

1. If you want to emphasise a phrase, use <em>.
2. The <i> tag has a new meaning in HTML5, representing "a span of text in an alternate voice or mood". So you should use this tag for things like thoughts/asides or idiomatic phrases. The spec also suggests ship names (but no longer suggests book/song/movie names; use <cite> for that instead).
3. If the italicised text is part of a larger context, say an introductory paragraph, you should attach the CSS style to the larger element, i.e. p.intro { font-style: italic; }

这篇关于CSS / HTML：什么是使文本斜体的正确方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！