Problem
What is the proper method for making text italic? I’ve seen four different approaches:
<i>Italic Text</i>
<em>Italic Text</em>
<span class="italic">Italic Text</span>
<span class="footnote">Italic Text</span>
.i> is a presentational effect that makes the text italic. It has no semantic meaning. This is definitely incorrect, as far as I can tell, because it is non-semantic.
For solely presentational objectives, semantic markup is used. Because em> produces text in italic by default, it is frequently used by persons who are aware that I should be avoided but are unfamiliar with its semantic significance. Because it is emphasised, not all italic text is italic. It can also be the polar opposite, such as a side note or a whisper.
The presentation is placed using a CSS class. This is frequently promoted as the correct method, however it appears to me to be incorrect. This appears to have no more semantic meaning than I However, proponents argue that it is much easier to modify all of your italic text afterwards if you want it bold, for example. However, this isn’t the case because I’d wind up with a class called “italic” that made text bold. Furthermore, I’m not sure why I’d ever want to modify all of my website’s italic text, or at the very least, we can think of reasons why this would not be desirable or essential.
For semantics, a CSS class is used. So far, this appears to be the greatest option, but it has two flaws.
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 attempt to separate style from structure has led to CSS being promoted as a replacement for I when it is actually less beneficial in some cases. So now I’m back to the humble I tag, and I’m wondering if this is why it’s still in the HTML5 spec.
Are there any more decent blog posts or articles on this topic? Maybe by people who were engaged in the decision to keep or establish the I tag?
Asked by Rupert Madden-Abbott
Solution #1
For different use situations, you should utilize different methods:
Answered by DisgruntledGoat
Solution #2
Because it is non-semantic, I is not incorrect. It’s incorrect (generally) because it’s only for show. Separation of concerns refers to the use of CSS to transmit presentational information.
Class names, like any other type of naming, might be difficult to get right, but it’s what you have to do. If you’re using italics to distinguish a block from the rest of the text, a class name like “flow-distinctive” could be appropriate. Consider the following: class names are used to categorize data; where else would you want to do the same thing? This should assist you in choosing a suitable name.
HTML5 includes the I element, however it has special semantics. If the rationale for making something italic corresponds to one of the semantics defined in the specification, you should use I Aside from that, no.
Answered by Alohci
Solution #3
I’m no expert, but I believe that vocabularies should be used if you truly want to be semantic (RDFa).
This should result in something like that:
<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>
The presentation is done using em (humans will see it in italic), and the property and href attributes go to a definition of italic (for machines).
You should see if there is a vocabulary for that, as properties might already exist.
http://www.alistapart.com/articles/introduction-to-rdfa/ For further information on RDFa, go to http://www.alistapart.com/articles/introduction-to-rdfa/
Answered by Guillaume Flandre
Solution #4
To make text italic, ignore the issue until you get to the CSS, then style according to presentational semantics. Depending on the circumstances, the first two options you provided may be appropriate. The final two are incorrect.
When writing the markup, don’t be concerned with presentation. It’s not necessary to think in italics. Consider the concept of semantics. It’s an im if it necessitates stress emphasis. It’s an aside if it’s unrelated to the primary material. It might be bold, it might be italic, it might be fluorescent green. When you’re writing markup, it doesn’t matter.
When you get to the CSS, you may already have a semantic element for which it makes sense to use italics throughout your site. em is an excellent example. However, you may want all sidebar > ul > li on your site to be italicized. You must separate your thoughts about markup from your thoughts about the presentation.
I is semantic in HTML5, as highlighted by DisgruntledGoat. However, the semantics appear to be a bit restricted to me. It is unlikely that it will be used.
HTML5 has modified the semantics of em to emphasize emphasis. Strong can also be used to convey prominence. If you want to style it that way, strong can be italic rather than bold. Don’t be limited by your browser’s stylesheet. You can also use a reset stylesheet to assist you break free from default thinking. (However, there are a few caveats.)
It’s not a good idea to use class=”italic.” It is not to be used. It isn’t semantic and isn’t at all adaptable. Semantics are still present in presentation, although they are of a different nature than markup.
class=”footnote” is a markup semantics emulation that is also erroneous. The CSS for your footnote should not be fully unique to it. If each section of your site is styled differently, it will appear cluttered. You should have some visual patterns that you can turn into CSS classes strewn around your pages. If your footnotes and blockquotes styles are quite similar, you should group them together rather than repeating yourself. You might want to consider adopting OOCSS’s practices (links below).
It’s the only area where semantics matters. There’s content semantics (HTML), presentational semantics (CSS), and behavioral semantics (JavaScript). They each have their own semantics that must be respected for maintainability and DRYness.
Answered by Eva
Solution #5
Why does it need to be split presentationally from the text before it if it has no unique meaning? This section of text appears to be italicized for no apparent reason.
However, I see your reasoning. It’s not uncommon for designers to create designs that differ visually but not in any way. Designers will often send us designs that have boxes with numerous combinations of colors, corners, gradients, and drop-shadows, with no relation between the styles and the meaning of the content.
We build classes like box-1 and box-2 to re-use the styles because they are quite complicated styles (with attendant Internet Explorer difficulties) re-used in multiple places.
However, the precise example of changing some text italic is far too insignificant to be concerned about. Leave little points like that to the Semantic Nutters to debate.
Answered by Paul D. Waite
Post is based on https://stackoverflow.com/questions/2108318/css-html-what-is-the-correct-way-to-make-text-italic