View Single Post
Old 05-01-2019, 09:22 PM   #8
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,361
Karma: 20212223
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
The <h?> tags are more semantically correct when used to define/differentiate what level 'header' you are using. You can style your headers however way you wish, or no way at all. Some devices might apply default styles to a header when that device doesn't use the publisher's css. As mentioned previously, some programs like Sigil and Calibre Editor can auto create TOC based on the header tags.

I use them in a heirarchy like this:
Spoiler:

Code:
<h1> cover </h1>
   <h2>front matter like dedication, synopsis, title page, etc.</h2>
      <h3>Chapters</h3>
      <h3>Graphics, epigraphs, maps, etc.</h3>
   <h2>Appendix Title</h2>
      <h3>Appendix 1</h3>
      <h3>Appendix 2</h3>
      <h3>Appendix 3</h3>
   <h2>back matter like 'about the author', acknowledgements, author notes, etc.</h2>
<h1> back cover (if there is one) </h1>

 - OR - 

<h1> cover </h1>
   <h2>front matter like dedication, synopsis, title page, etc.</h2>
      <h3> Parts, Books, etc</h3>
         <h4>Chapters</h4>
         <h4>Graphics, epigraphs, maps, etc.</h4>
      <h3> Parts, Books, etc</h3>
         <h4>Chapters</h4>
         <h4>Graphics, epigraphs, maps, etc.</h4>
   <h2>Appendix Title</h2>
      <h3>Appendix 1</h3>
      <h3>Appendix 2</h3>
      <h3>Appendix 3</h3>
   <h2>back matter like 'about the author', acknowledgements, author notes, etc.</h2>
<h1> back cover (if there is one) </h1>


I also use css similar to the example provided by DNSB, but mine relies a little more on the rules of CSS to define styling rather than giving everything a class name. This approach is perfectly valid and, IMO, provides a little cleaner html code:

Spoiler:
Code:
<h3>Chapter 1 <span>The Ending of the Beginning</span></h3>

/* (however you want to style it:) */
h3 {
	font-size: .75em;
	margin: 2em 0;
	text-align: center;
	font-weight: bold;
        font-family: sans-serif
    }

h3 span {
	display: block;
        font-size: 2em;
        margin-top: 1em;
        font-weight: normal;
        font-family: serif;
        font-variant: small-caps
   }


I don't particularly use the <section> tag. I haven't needed it - but I haven't really gotten into ePub3 spec. I break up each chapter into its own file so really don't need another tag to say it's a chapter. I do use <div> tags to give special formatting to a section of the file. To me that serves the same purpose.

Spoiler:
Code:
CSS:
p           {text-indent: 1.2em}
div.verse   {margin: 2em}
div.verse p {font-style: italic; font-size:.8em; text-indent:0}
div + p     {text-indent: 0}


HTML:
<p>normal paragraph</p>
<p>normal paragraph</p>
<p>normal paragraph</p>
<p>normal paragraph</p>

<div class="verse">
   <p>Line of verse</p>
   <p>Line of verse</p>
   <p>Line of verse</p>
   <p>Line of verse</p>
</div>

<p>normal paragraph after div = no indent</p>
<p>normal paragraph</p>
<p>normal paragraph</p>
<p>normal paragraph</p>
Turtle91 is offline   Reply With Quote