[Turtle91]

Originally Posted by paperwhite13

There is one thing I was wondering about - new chapter pages, which are styled like this:

1.
Chapter Title

2.
Chapter Title

Saying I want to keep the number and the dot, which are styled differently (in terms of size, margins and font type) than the Chapter Title, how should that be tagged semantically? Should it also be an <h1 class="chapter-number"> with different properties? Before that, I thought about making it <h4>

I agree with much of nabsltd’s reasoning and answer, although I use a slightly different technique. I’ll put the basics here and provide a better example when I get home on my computer.

CSS:
h3 {yadda yadda}
h3 span {display:block; yadda yadda}

HTML:
<h3>1. <span>Chapter One Title</span></h3>
<h3>2. <span>Chapter Two Title</span></h3>
<h3>3. <span>Chapter Three Title</span></h3>

That keeps everything simple, clean, and semantically correct. It also lets automated table of contents generators do their thing because they ignore the <span>. You can also easily format any manner of heading, including the number and Title separately, using css. You can even include images in the header, if you wish, without cluttering up the header html.

There is no need to use a class in the heading because the css can positively identify each part without it.

I used an <h3> here because that is generally how my book levels work out, you could use any <h>:

h1 - cover
  h2 - front matter
    h3 - chapters
  h2 - back matter
h1 - back cover if there is one