CSS HTML What is the correct way to make text italic

Question

What is the correct way to make text italic  I have seen the following four approaches    lt i gt Italic Text lt  i gt    lt em gt Italic Text lt  em gt    lt span class  italic  gt Italic Text lt  span gt    lt span class  footnote  gt Italic Text lt  span gt       lt i gt   This is the  old way    lt i gt  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      lt em gt   This uses semantic mark up for purely presentational purposes  It just happens that  lt em gt  by default renders text in italic and so it is often used by those who are aware that  lt i gt  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      lt span class  italic  gt   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  lt i gt   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      lt span class  footnote  gt   This uses a CSS class for semantics  So far this appears to be the best way but it actually has two problems    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  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  lt em gt  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  lt i gt  when there are occasions when this would actually be less useful  So this leaves me back with the humble  lt i gt  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  lt i gt  tag

User · Answer

TLDR

The correct way to make text italic is to ignore the problem until you get to the CSS, then style according to presentational semantics. The first two options you provided could be right depending on the circumstances. The last two are wrong.

Longer Explanation

Don't worry about presentation when writing the markup. Don't think in terms of italics. Think in terms of semantics. If it requires stress emphasis, then it's an em. If it's tangential to the main content, then it's an aside. Maybe it'll be bold, maybe it'll be italic, maybe it'll be fluorescent green. It doesn't matter when you're writing markup.

When you do get to the CSS, you might already have a semantic element that makes sense to put italics for all its occurrences in your site. em is a good example. But maybe you want all aside > ul > li on your site in italics. You have to separate thinking about the markup from thinking about the presentation.

As mentioned by DisgruntledGoat, i is semantic in HTML5. The semantics seem kind of narrow to me, though. Use will probably be rare.

The semantics of em have changed in HTML5 to stress emphasis. strong can be used to show importance as well. strong can be italic rather than bold if that's how you want to style it. Don't let the browser's stylesheet limit you. You can even use a reset stylesheet to help you stop thinking within the defaults. (Though there are some caveats.)

class="italic" is bad. Don't use it. It is not semantic and is not flexible at all. Presentation still has semantics, just a different kind from markup.

class="footnote" is emulating markup semantics and is incorrect as well. Your CSS for the footnote should not be completely unique to your footnote. Your site will look too messy if every part is styled differently. You should have some visual patterns scattered through your pages that you can turn into CSS classes. If your style for your footnotes and your blockquotes are very similar, then you should put the similarities into one class rather than repeat yourself over and over again. You might consider adopting the practices of OOCSS (links below).

Separation of concerns and semantics are big in HTML5. People often don't realize that the markup isn't the only place where semantics is important. There is content semantics (HTML), but there is also presentational semantics (CSS) and behavioral semantics (JavaScript) as well. They all have their own separate semantics that are important to pay attention to for maintainability and staying DRY.

OOCSS Resources

User · Answer

I think the answer is to use  lt em gt  when you intend emphasis   If when reading the text to yourself  you find that you use a slightly different voice to emphasise a point  then it should use  lt em gt  because you would want a screen reader to do the same thing   If it is purely a style thing  such as your designer has decided that all your  lt h2 gt  headings would look better in italic Garamond  then there is no semantic reason to include it in the HTML and you should just alter the CSS for the appropriate elements   I can t see any reason to use  lt i gt   unless you specifically need to support some legacy browser with no CSS

User · Answer

OK  the first thing to note is that  lt i gt  has been deprecated  and shouldn t be used  lt i gt  has not been deprecated  but I still do not recommend using it   see the comments for details  This is because it goes entirely against keeping presentation in the presentation layer  which you ve pointed out  Similarly   lt span class  italic  gt  seems to break the mold too   So now we have two real ways of doing things   lt em gt  and  lt span class  footnote  gt   Remember that em stands for emphasis  When you wish to apply emphasis to a word  phrase or sentence  stick it in  lt em gt  tags regardless of whether you want italics or not  If you want to change the styling in some other way  use CSS  em   font-weight  bold  font-style  normal     Of course  you can also apply a class to the  lt em gt  tag  if you decide you want certain emphasised phrases to show up in red  give them a class and add it to the CSS   Fancy some  lt em class  special  gt shiny lt  em gt  text   em   font-weight  bold  font-style  normal    em special   color  red      If you re applying italics for some other reason  go with the other method and give the section a class  That way  you can change its styling whenever you want without adjusting the HTML  In your example  footnotes should not be emphasised   in fact  they should be de-emphasised  as the point of a footnote is to show unimportant but interesting or useful information  In this case  you re much better off applying a class to the footnote and making it look like one in the presentation layer   the CSS

User · Answer

lt i gt  is not wrong because it is non-semantic  It s wrong  usually  because it s presentational  Separation of concern means that presentional information should be conveyed with CSS   Naming in general can be tricky to get right  and class names are no exception  but nevertheless it s what you have to do  If you re using italics to make a block stand out from the body text  then maybe a class name of  flow-distinctive  would be in order  Think about reuse  class names are for categorization - where else would you want to do the same thing  That should help you identify a suitable name    lt i gt  is included in HTML5  but it is given specific semantics  If the reason why you are marking something up as italic meets one of the semantics identified in the spec  it would be appropriate to use  lt i gt   Otherwise not

User · Answer

DO   Give the class attribute a value indicating the nature of the data  i e  class  footnote  is good  Create a CSS style sheet for the page Define a CSS style that is attached to the class that you assign to the element   footnote       font-style italic      DO NOT   Don t use  lt i gt  or  lt em gt  elements - they re unsupported and ties the data and presentation too close  Don t give the class a value that indicates the presentation rules  i e  don t use class  italic

User · Answer

I d say use  lt em gt  to emphasize inline elements  Use a class for block elements like blocks of text  CSS or not  the text still has to be tagged  Whether its for semantics or for visual aid  I m assuming you d be using it for something meaningful     If you re emphasizing text for ANY reason  you could use  lt em gt   or a class that italicizes your text    It s OK to break the rules sometimes

User · Answer

Use  lt em  if you need some words characters in italic in content without other styles  It also helps make content semantic   text-style is better suited for multiple styles and no semantic need

User · Answer

HTML italic text displays the text in italic format    lt i gt HTML italic text example lt  i gt    The emphasis and strong elements can both be used to increase the importance of certain words or sentences    lt p gt This is  lt em gt emphasized  lt  em gt  text format  lt em gt example lt  em gt  lt  p gt    The emphasis tag should be used when you want to emphasize a point in your text and not necessarily when you want to italicize that text   See this guide for more  HTML Text Formatting

User · Answer

The i element is non-semantic  so for the screen readers  Googlebot  etc   it should be some kind of transparent  just like span or div elements   But it s not a good choice for the developer  because it joins the presentation layer with the structure layer - and that s a bad practice   em element  strong as well  should be always used in a semantic context  not a presentation one  It has to be used whenever some word or sentence is important  Just for an example in the previous sentence  I should use em to put more emphasis on the  should be always used  part  Browsers provides some default CSS properties for these elements  but you can and you re supposed to override the default values if your design requires this to keep the correct semantic meaning of these elements    lt span class  italic  gt Italic Text lt  span gt  is the most wrong way  First of all  it s inconvenient in use  Secondly  it suggest that the text should be italic  And the structure layer  HTML  XML  etc   shouldn t ever do it  Presentation should be always kept separated from the structure    lt span class  footnote  gt Italic Text lt  span gt  seems to be the best way for a footnote  It doesn t suggest any presentation and just describes the markup  You can t predict what will happen in the feature  If a footnote will grow up in the feature  you might be forced to change its class name  to keep some logic in your code    So whenever you ve some important text  use em or strong to emphasis it  But remember that these elements are inline elements and shouldn t be used to emphasis large blocks of text    Use CSS if you care only about how something looks like and always try to avoid any extra markup

User · Answer

You should use different methods for different use cases    If you want to emphasise a phrase  use  lt em gt   The  lt i gt  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  lt cite gt  for that instead   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

User · Answer

I m no expert but I d say that if you really want to be semantic  you should use vocabularies  RDFa    This should result in something like that    lt em property  italic  href  http   url to a definition of italic  gt  Your text  lt  em gt    em is used for the presentation  humans will see it in italic  and the property and href attributes are linking to a definition of what italic is  for machines    You should check if there s a vocabulary for that kind of thing  maybe properties already exist   More info about RDFa here  http   www alistapart com articles introduction-to-rdfa

User · Answer

Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it    If it has no special meaning  why does it need to be separated presentationally from the text preceding it  This run of text looks a bit weird  because I   ve italicised it for no reason   I do take your point though  It   s not uncommon for designers to produce designs that vary visually  without varying meaningfully  I   ve seen this most often with boxes  designers will give us designs including boxes with various combinations of colours  corners  gradients and drop-shadows  with no relation between the styles  and the meaning of the content   Because these are reasonably complex styles  with associated Internet Explorer issues  re-used in different places  we create classes like box-1  box-2  so that we can re-use the styles   The specific example of making some text italic is too trivial to worry about though  Best leave minutiae like that for the Semantic Nutters to argue about

[html] CSS/HTML: What is the correct way to make text italic?

TLDR

Longer Explanation

OOCSS Resources

Examples related to html

Examples related to css

Examples related to semantic-markup