3

In a website that provides content which is divided into parts, what is the more correct way to use the H1 tag?

<div class='header'>
  <span>Episode 2</span>
  <h1 class='large'>Creative work name</h1>
</div>
<!-- content body -->

or:

<div class='header'>
  <h1>Episode 2</h1>
  <span class='large'>Creative work name</span>
</div>
<!-- content body -->
3
  • 3
    What is the title of your page? Is this a page for a single episode, or a page that lists multiple episodes? Generally you want your h1 to be similar to your page title. Oct 8 at 16:22
  • 1
    @MaximillianLaumeister it's only for a single episode, the page title is "Creative work name episode 2"
    – Bouh
    Oct 8 at 16:55
  • @MaximillianLaumeister +1 for pointing out the page title component Oct 8 at 21:43
5

You're going to run into duplicate <h1> tags across other episode pages if the <h1> only includes creative work name.

Speaking of semantics, why are we using <div class="header"> when we have the <header> element?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ep. 2, Creative Work Name - Example.com</title>
        <meta name="description" content="">
    </head>
    <body>
    <div>
        <span class="top-of-page-section">Episode 2</span>
    <div>
    <header>
        <h1>Creative Work Name - Ep 2</h1>
        <h2 class="subhead">The one about heading tags</h2>
    </header>

    <!-- Rest of page content + video, etc -->

    <footer></footer>    
    </body>
</html>

I added a couple other nuances as well.

Edit: Put the span in a div and added a header beneath. I kept the span to retain the format of your original example in your question, though it seems redundant to me (see below for what I would do. This should resolve the comments all of this without actually seeing the page is hard.

Personally, I'd probably do this and ditch the <span> if it's not necessary:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ep. 2, Creative Work Name - Example.com</title>
        <meta name="description" content="">
    </head>
    <body>
    <header>
        <h1>Creative Work Name - Ep 2</h1>
        <h2 class="subhead">The one about heading tags</h2>
    </header>

    <!-- Rest of page -->

    <footer></footer>    
    </body>
</html>
8
  • 2
    The body being the main section of your document, I don't believe the <header> and <footer> tags should be outside the main <body> tag semantically. Oct 9 at 3:26
  • @Howdy_McGee 100% nice catch. I tabbed boilerplate html in vscode and was going fast ¯_(ツ)_/¯ Oct 9 at 3:35
  • shouldn't h1 be inside header tag?
    – Bouh
    Oct 9 at 11:16
  • <h1> and <h2> should definetly go within the <header>. Oct 9 at 12:54
  • 1
    @Bouh I edited the answer to address your question. You can put the <h1> in the <header> if you want. The markup I provided is simply for the sake of example. Oct 9 at 15:03
1

The page should be constructed semantically with no consideration to layout or style at all. In my opinion the correct markup should be:

<div class='header'>
  <h1>Creative work name</h1>
  <span>Episode 2</span>
</div>

This makes the most sense to Google, and to screen-readers etc. Then simply use CSS to display the header however you like.

1

I would argue that the episode number and name are equally important since the user may know one or the other. Generally, in HTML, the document body is the main section of your HTML page and can only contain a single H1. In HTML5 the <section> element allows you to have multiple headers in the main document as long as they're within these section tags. If you plan on having numerous episodes on the same page you could use the following structure:

<body>
    <section id="episode1">
        <h1>Episode 1 <span style="display:block;">Creative work name</span></h1>
        <p>Description</p>
    </section>
    
    <section id="episode2">
        <h1>Episode 2 <span style="display:block;">Creative work name</span></h1>
        <p>Description</p>
    </section>
</body>

The section IDs could also be used as skip links for in-page navigation. You should also add rich snippets within each section that will provide more context on the series, season, and episode. For more information, see the TVEpisode Shema.

1
  • This could work for an "All Episodes" page, in fact, there are a ton of ways to structure this, but OP stated in the comments that for the case in question, the page is only for a single episode. Nevertheless, I agree on using episode schema. Oct 9 at 6:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.