What is the best option to show Heading in italics only on some pages?

12,682

Solution 1

It depends on what your rule for italic headings is. Which headings should be italic?

If it’s headings on a specific set of pages, then the accepted way to do that would be to put a class on the body tag of those pages:

<body class="italic-headings-page">

Then style those headings via CSS:

body.italic-headings-page h5 {
    font-style: italic;
}

On the other hand, if the site is being edited by non-technical editors, and they want to be able to make arbitrary headings italic, and they can’t give headings classes in their CMS, then I’d go for <i>:

<h5><i>Heading text in italic</i></h5>

When the intention is purely presentational, you might as well express that intention, and <i> does it better than <em>.

Without knowing what your rule is for which headings are italic, it’s impossible to know what the best way is to implement that rule in HTML and CSS.

Solution 2

You don't have to use a class, you can simply define the traits of a h5 (or whichever you want) header:

h5 {
  font-style: italic;
}

Unless by "I don't want to use class" you meant you do not wish to use CSS.

Solution 3

If you don't want to use class, I definately think <h5><em> is the better (if it passes a HTML validation). <h5>indicates the header level, <em> that the browser should put emphasis on it (typically italics).

But if your desire is the graphical apperance of italics, you should stick to CSS. The HTML part should describe the document structure, not its apperance.

Try <h5 style="font-style:italic;"> if you cannot define a specific class.

Share:
12,682
Jitendra Vyas
Author by

Jitendra Vyas

Hi, I am Jitendra a front-end developer from India specializing in web standards, accessibility, and usability based development.

Updated on June 04, 2022

Comments

  • Jitendra Vyas
    Jitendra Vyas almost 2 years

    I have to show headings in italics, Is it OK to do it like this?

    <h5><em>Heading text in italic</em></h5>
    

    Or should I use a <p> tag like this:

    <p><em>Heading text in italic</em></p>
    

    If I use the <h5> tag then how will screen readers read this and is it semantically correct?

    I don't want to use a class.

  • Jitendra Vyas
    Jitendra Vyas about 14 years
    i don't want to use h5 { font-style: italic;} because all H5 are not italic on site
  • Erik
    Erik about 14 years
    Okay, then you should edit your question to read you don't wish to use CSS; but a screen reader can't determine its a heading without a heading tag so <h5><em>Heading text in italic</em></h5> would be the "most correct" in this situation.
  • Anders Lindahl
    Anders Lindahl about 14 years
    +1 for the screen reader comment, that's the key thing to understand here. Not all browsers are graphical.
  • Joe Dargie
    Joe Dargie about 14 years
    (And it hopefully goes without saying that you don’t use <p> for headings. <p> is for paragraphs. <h1><h6> is for headings.)
  • Jitendra Vyas
    Jitendra Vyas about 14 years
    Yes <i> would be appropriate. but future browsers will support this tag
  • Joe Dargie
    Joe Dargie about 14 years
    “but future browsers will support this tag” — sorry, that doesn’t quite make sense. Are you asking if future browsers will support the <i> tag? It’s in the HTML 5 spec, so it’s got as good a chance as any other tag of being supported.
  • Jitendra Vyas
    Jitendra Vyas about 14 years
    ok if it's in a HTML 5 spec then all browser will support. Thanks for answer.
  • Joe Dargie
    Joe Dargie about 14 years
    “if it's in a HTML 5 spec then all browser will support” — Heh! Yeah, just like the <video> tag. Naw, I see your point though: browsers will most likely continue to support it.