Home / Community Hub / Ebook Production / Questions / What is the most up to date use of the header/hgroup tags for a title page?

What is the most up to date use of the header/hgroup tags for a title page?

  • This topic has 1 reply, 2 voices, and was last updated 2 years, 4 months ago by APLN Moderator.
Viewing 2 posts - 1 through 2 (of 2 total)
What is the most up to date use of the header/hgroup tags for a title page? thread
Author Posts
FrancisLepage

Hello!

We’ve been using the following structure for our books’ title pages for some time, and I’m wondering if it’s still OK, or if we should be starting to use the hgroup tags as well?

Here’s what we basically use today:

<section epub:type="titlepage" aria-labelledby="titleid">
<p class="author">Author</p>

<header id="titleid">
<h1 class="title" epub:type="fulltitle" title="My Title">MY TITLE</h1>
<p class="subtitle" epub:type="subtitle" role="doc-subtitle">A subtitle for this book</p>
</header>

<figure class="publisher">
A publishing house
</figure>
</section>

Would something along these lines be preferable, and more accurately reflect how the header/hgroup tags have “evolved” ?

<section epub:type="titlepage" aria-labelledby="titleid">
<header>
<p class="author">Author</p>

<hgroup id="titleid">
<h1 class="title" epub:type="fulltitle" title="My Title">MY TITLE</h1>
<p class="subtitle" epub:type="subtitle" role="doc-subtitle">A subtitle for this book</p>
</hgroup>

<figure class="publisher">
A publishing house
</figure>
</header>
</section>
May 14, 2024 at 10:11 am
APLN Moderator

Hi FrancisLepage,

Thank you for this topic!

Yes, it is recommended to use <hgroup> to wrap a heading and a subtitle together. If the header contains more than just a heading and subtitle, for example, an epigraph or an image, then you can use the <header> tag within which there can be an <hgroup> for the heading and subtitle, followed by other header components.

Example from DAISY Knowledge Base:

<section id="c01" aria-labelledby="c01-hd">
<header>
<img src="graphics/chapter-marker.png" alt=""/>
<hgroup>
<h2 id="c01-hd">Chapter 1<h2>
<p role="doc-subtitle">Let there be light</p>
</hgroup>
<p role="doc-epigraph">Now the earth was formless and void,
and darkness was over the surface of the deep.</p>
</header>
…
</section>

 

Your second example looks good! However, I’m unsure about the use of the title attribute in the <h1> tag. “title=”My Title” can likely be omitted as a screen reader will read out the value within the <h1> tag: “MY TITLE”

In the case where there are non-visual headings, an aria-label attribute is used and read out by assistive technology to announce the start of a new section.

More info on headings here: https://kb.daisy.org/publishing/docs/html/headings.html

 

May 29, 2024 at 4:54 pm
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Want to join the discussion?

Create an Account
a wooden table with a white keyboard on top, and a persons hand writing on a piece of paper

View our current resources

View Resources