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

StackOverflow https://stackoverflow.com/questions/2234960

Question

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.

Was it helpful?

Solution

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.

OTHER TIPS

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top