Is it good practice to have <p> in <h>?

[icearch]

Is it good practice to have <p> in <h>?

I have benn using this when I didn't know better.
Now I am revisiting my old project, and found this:

<div style="text-align: center;">

<h2>
<p>奥克迪尼的恐怖</p>
<p>The Horror at Oakdeene</p>
</h2>

<p>译者：张三</p>
</div>

Is this just bad practice or can cause some serious problems?

[KevinH]

According to the html spec of allowable children of an h1-h6 tag, it includes "phrasing content tags" and things like div and p tags are discouraged.

[RbnJrg]

Originally Posted by icearch

Is it good practice to have <p> in <h>?

I have benn using this when I didn't know better.
Now I am revisiting my old project, and found this:

<div style="text-align: center;">

<h2>
<p>奥克迪尼的恐怖</p>
<p>The Horror at Oakdeene</p>
</h2>

<p>译者：张三</p>
</div>

Is this just bad practice or can cause some serious problems?

If you need that layout in your titles, then use <span> tags instead of <p>. And give those spans the property "display: block" (and all others styles you wish).

[Karellen]

Another approach could be...

PHP Code:

<h2 title ="Chapter 1 - The Horror at Oakdeene">Chapter 1</h2>
<p class="chapterh2">The Horror at Oakdeene</p> 


[Turtle91]

Or….

h2      {all your styling}
h2 span {display:block; even more different styling}


<h2>Chapter 1 <span>The Horror at Oakdeene</span></h2>

Sigil will read all of that when creating the ToC without the need of title= and they can be styled completely separately. You can even insert images before, after, or between!

Lots of different ways to achieve the visual result, a few of them achieve both visual and semantic effects.

[JSWolf]

Originally Posted by icearch

Is it good practice to have <p> in <h>?

I have benn using this when I didn't know better.
Now I am revisiting my old project, and found this:

<div style="text-align: center;">

<h2>
<p>奥克迪尼的恐怖</p>
<p>The Horror at Oakdeene</p>
</h2>

<p>译者：张三</p>
</div>

Is this just bad practice or can cause some serious problems?

epubcheck flags your <p> inside an <h2> as an error.

[JSWolf]

Originally Posted by Karellen

Another approach could be...

PHP Code:

<h2 title ="Chapter 1 - The Horror at Oakdeene">Chapter 1</h2>
<p class="chapterh2">The Horror at Oakdeene</p> 


<h2 title is only useful in Sigil.

[Karellen]

Originally Posted by JSWolf

<h2 title is only useful in Sigil.

Please explain why? Is this a Sigil only feature?
I find it very useful in Calibre, especially when generating the TOC as it saves a ton of work renaming the chapters in the TOC.
(but I suppose you are going to tell me that I shouldn't be renaming the toc??)

[JSWolf]

Originally Posted by Karellen

Please explain why? Is this a Sigil only feature?
I find it very useful in Calibre, especially when generating the TOC as it saves a ton of work renaming the chapters in the TOC.
(but I suppose you are going to tell me that I shouldn't be renaming the toc??)

Why would you not show the chapter's title in the actual chapter?

[KevinH]

title is a global attribute and therefore is a valid attribute for h1-h6 tags. There is nothing Sigil specific in its use.

Sigil does have an automatic TOC generator and gives the title attribute priority in constructing a toc. I am sure calibre can do something similar.

[Karellen]

Originally Posted by JSWolf

Why would you not show the chapter's title in the actual chapter?

What makes you say it's not?
It is clearly shown in the code I posted that it is there.
Anyway, I don't think this is going anywhere useful, so moving on.

[DNSB]

Originally Posted by JSWolf

Why would you not show the chapter's title in the actual chapter?

Have you never run into a book where the title is an image? I add the title="whatever" to the <h tag so I don't have to manually edit the ToC. It also helps when I just want the chapter in the ToC to read "Chapter 1" while the displayed chapter header would be "1".

[icearch]

Thanks for all your answers and solutions. After looking into my book, I found out that I don't need block in <h for now. So I just use <br/ to break the line.

Like this:

<div style="text-align: center;">

<h2>
姐妹之城<br/>
The Sister City
</h2>

<p class="no-ss">译者：李四</p>
</div>

I do think this is sufficient enough, and a more tighter line spacing is more visually pleasing too.

[icearch]

As for using title= attributes in <h , I use it when I need to auto generate Nav and Toc but don't want visible headings in that page.

[RbnJrg]

Originally Posted by icearch

As for using title= attributes in <h , I use it when I need to auto generate Nav and Toc but don't want visible headings in that page.

What pages? But whatever, use the property "display: none" to hide the element you want (and even so, title="..." still will be honored). You also coud be using "visibility: hidden", but with this last property, the space ocuped by the element will be visible.