Headings
What does it mean?
Historically, it was common practice to use h1, h2, h3, etc whenever you wanted any larger, centered text. This included the book title and chapter headings, but also typically other text on the title page. However, it is now strongly recommended that the structure defined by the headings matches the structure of the book.
Why should I do it?
The reason related to e-readers is that the ebookmaker software uses heading markup (h1 to h4) to create a Table of Contents (ToC). On the e-reader the user will typically have quick access to this ToC to aid navigation.
However, this is not just a requirement for epubs: it affects anyone who uses screen-readers or other aids to navigation on their computer. Such aids typically allow the user to jump between headings and may announce the level and title of the heading.
How do I see what I have at the moment?
Even without converting your HTML to epub/mobi format, you can easily see the structure your headings currently form. When you validate your HTML at W3C Markup Validator, you can tick Show Outline under More Options. Below the report that your HTML has validated successfully, you will see a Document Outline, looking something like this:
- [h1] My Book Title
- [h2] Contents
- [h2] Chapter 1 - The First
- [h2] Chapter 2 - The Next
- [h3] Section A
- [h3] Section B
- [h2] Chapter 3 - The Last
- [h2] Index
Below it you will see the following statement: "If this does not look like a real outline, it is likely that the heading tags are not being used properly. (Headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size.)"
Alternatively, if you have converted to epub or Kindle format, then you will be able to see the automatically generated ToC via a Contents button or link on your e-reader. Alternatively, you can see it on the navigation panel of ADE or the Kindle viewer on your computer (see Easy Epub/Viewing for how to get these).
How can I fix it?
If this simple guide does not deal with your situation, there is more detail and examples in the Headings and Title Pages sections of the Best Practices document.
There are two parts to fixing it. The first is making sure the correct things are inside heading markup. The second is dealing with other things that now should not be in heading markup, but you want to be formatted in a similar way.
What to put inside heading markup
- Put the whole book title, and only the book title (not the author) inside h1 markup. Make sure this is the first use of heading markup in the book. Also, just use h1 once, even if the title appears more than once in the book (see below for formatting subsequent appearances).
Here are a couple of examples:
<h1>My Book Title</h1>
<h1>My Book<br /> <small>A Model of Perfection</small></h1>
- Put each whole chapter title (and extras like Contents and Index) inside h2 markup.
<h2>Chapter 1 - The First</h2>
<h2>Chapter 1<br /> <small>The First</small></h2>
- Use h3 similarly for section headings if you have them, and you want them to appear in the generated ToC
- If your book has higher level divisions, such as Parts, then you may make them h2, and chapters h3, but you will possibly want more sophisticated page-break handling.
How to format the rest
So, you've sorted the things that should be in heading markup, and now you need to deal with the things that shouldn't be.
One simple solution
You can define classes ph1, ph2, etc. that format a paragraph more or less like the default h1, h2, etc. How closely the size and margins match will depend on the browser. Then where a heading was being used wrongly, you can replace it with <p class="...">...</p>. You can of course change the sizes and/or margins as you please.
To do this, add to your CSS:
.ph1, .ph2, .ph3, .ph4 { text-align: center; text-indent: 0em; font-weight: bold; }
.ph1 { font-size: xx-large; margin: .67em auto; }
.ph2 { font-size: x-large; margin: .75em auto; }
.ph3 { font-size: large; margin: .83em auto; }
.ph4 { font-size: medium; margin: 1.12em auto; }
Then where the book title is repeated using h1, instead you can use
<p class="ph1">My Book<br /> <small>A Model of Perfection</small></p>
or if the author on the title page was marked up as
<h3>By<br /> A. Writer</h3>
replace it with
<p class="ph3">By<br /> A. Writer</p>
etc.
Another simple solution for your title page
You can set up classes to give you the defined text sizes. You only need to define the ones you want to use:
.xxsmall {font-size: xx-small;}
.xsmall {font-size: x-small;}
.small {font-size: small;}
.medium {font-size: medium;}
.large {font-size: large;}
.xlarge {font-size: x-large;}
.xxlarge {font-size: xx-large;}
Then define a class for a div to hold your titlepage, with a page-break before and after it. You also want all paragraphs on that titlepage to have a bigger line spacing, and a gap at the top, as well as being centered and bold.
div.titlepage {
text-align: center;
page-break-before: always;
page-break-after: always;
}
div.titlepage p {
text-align: center;
text-indent: 0em;
font-weight: bold;
line-height: 1.5;
margin-top: 3em;
}
Then in the HTML, write
<div class="titlepage"> <h1>My Book Title</h1> <p> <span class="small">By</span><br /> <span class="large">A. Writer</span> </p> <p>LONDON<br /> <span class="large">1888</span> </p> </div>
If you want more control, e.g. for only some of the paragraphs to have the gap at the top, remove that part from the "div.titlepage p" above, and put it in its own class.
.topspace {margin-top: 3em;}
then use that class on those specific paragraphs:
<p class="topspace">LONDON<br /> <span class="large">1888</span> </p>
What about page breaks?
Even with the code above, particularly around the title pages you will probably find that the e-reader versions have page-breaks in annoying places. To help avoid this, you can tell the e-reader to force a page-break just before (or after) any of your HTML elements.
To your CSS, add
.break-before {
page-break-before: always;
}
Then use something like
<p class="break-before">Copyright 1901</p>
Formatting Chapter Headings to Avoid unwanted page breaks mid-chapter
Ebookmaker breaks your file into chunks for epub. These chunks have a limited size, and have a page break at the start of every one. This means that when a chunk gets full mid-chapter, you sometimes get an unwanted page break there. To help avoid this, you can force ebookmaker to start a new chunk at the start of every chapter, using a div with a class of "chapter" or "section". Note it must be a div and the class name must be one of these words, not "chap", "section1", etc.
Although usage of <div class="chapter"></div> or <div class="section"></div> (with nothing between <div...> and </div>) may cause little problem with browser behavior, the W3 Schools "page-break-before" documentation states that it should not be used on an empty div, so it's better to have the div to surround the heading coding as shown below. This code has the advantage of generating a page break in conforming html browsers (if the html edition is to be printed) as well as in epub/mobi readers.
In your CSS add:
div.chapter {page-break-before: always;}
h2.nobreak {page-break-before: avoid;}
In your HTML, surround the h2 for your chapter with the div.
<div class="chapter"> <span class="pagenum">...[27]...</span> <h2 class="nobreak">Chapter 2</h2> </div> <p>Etc., etc....</p>
There's a slightly more technical explanation of this here.
If you decide to add margin or padding to the "chapter" or "section" CSS settings and possibly extend them beyond the <h2> heading, please be aware that nesting of chapter/section elements should be avoided since that the margins of the nested classes are added together for the epub edition and would result in much larger spacing than planned.
Since page-break-before is not respected by all epub readers, the only way to ensure a page break is to cause the file to be split by using a "chapter" or "section" div. This guarantees a page break on any epub reader. You may wish to use this to force a page break at other places in your book, e.g. in the front matter. Simply add <div class="section"></div> where you want the page break, and close the div at a suitable point below, e.g. after a heading or a paragraph or at the end of that page. Very rarely (e.g. a page which only contains a few words) you may find you have a chapter/section div following soon after a previous one. Since there is a minimum chunk size of 256 characters, this would mean that ebookmaker would not start a new chunk for the second div, and you would not get the page break you wanted. To force the second div to cause a new chunk to be created, you need to pad the first div with enough characters to exceed the 256 byte minimum. Do not use HTML comments or hidden text to do this. The recommended method is to use some spaces, e.g.
<div class='section'>
A few words of actual text.
{250 or so space characters to pad out the div size}
</div>
<div class='section'>.....