Electric Book Works Publishing reinvented for the digital age

Change heading tags to structured HTML (optional, CS3 only)

This is optional, but highly recommended. If you’re working from InDesign CS3, when InDesign creates an epub’s XHTML, it tags every paragraph with the <p> tag. Since InDesign CS3 doesn’t know which of your paragraph styles are used for headings and which are for other kinds of text, both headings and other pieces of text are tagged as <p>. InDesign then includes your style name as a class, so that the CSS file can distinguish between them. (For example: <p> and <p>.)

Ideally, InDesign would be able to distinguish (if you could tell it the difference) which of your paragraph styles were headings, and at what level those headings fall (whether they are A-heads, B-heads or C-heads, and so on). If it could do this, it would tag those headings as <h1><h2><h3> and so on, and not as <p>.

Some epub reading systems ignore your CSS. And if they ignore your CSS, they don’t know the difference between one class of <p> and another. They do know the difference between standard HTML tags (sometimes referred to as structured HTML), such as <h1> and <p>, and apply their own CSS to those. But all <p>s will look the same, regardless of their class. In these reading systems, your headings will just look like body text.

InDesign CS4 correctly tags (with h1, h2, etc.) those levels of heading you’ve included in your TOC style. If you’re using CS4, skip the rest of this section.

So, if you’re working from CS3, it’s best if you replace <p> tags around headings with standard head tags, (h1, h2, h3, etc.). You have to do this manually in the XHTML file, and adjust your CSS file accordingly.

Open each XHTML file(s) and change your headings’ tags from <p> tags to standard HTML heading tags: <h1><h2><h3> and so on. So, for example, <p> would become <h1> or (especially if you have different kinds of A-head) <h1>.

Remember also to reflect this change in the epub’s CSS file. For example:

p.head_a {
}

should change to

h1 {
}

or

h1.head_a {
}
Arthur Attwell 17 February 2010
This information is more than two years old, and may no longer be accurate.