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 -->
Improve this question
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.
    – Maximillian Laumeister ♦
    Commented Oct 8, 2021 at 16:22
  • 1
    @MaximillianLaumeister it's only for a single episode, the page title is "Creative work name episode 2"
    – Bouh
    Commented Oct 8, 2021 at 16:55
  • @MaximillianLaumeister +1 for pointing out the page title component
    – Mike Ciffone
    Commented Oct 8, 2021 at 21:43

4 Answers 4

Reset to default
6

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>
Improve this answer
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.
    – Howdy_McGee
    Commented Oct 9, 2021 at 3:26
  • @Howdy_McGee 100% nice catch. I tabbed boilerplate html in vscode and was going fast ¯_(ツ)_/¯
    – Mike Ciffone
    Commented Oct 9, 2021 at 3:35
  • shouldn't h1 be inside header tag?
    – Bouh
    Commented Oct 9, 2021 at 11:16
  • <h1> and <h2> should definetly go within the <header>.
    – toastrackengima
    Commented Oct 9, 2021 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.
    – Mike Ciffone
    Commented Oct 9, 2021 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.

Improve this answer
1

I think Creative work name because,

It would be ridiculous for Google to crawl the website and see the title as Episode 2. The H1 title should be whatever that page is. The Episode 2 here might be H2 but it would be ridiculous if it was H1.

So this is my answer:

<div class='header'>
 <span>Episode 2</span>
 <h1 class='large'>Creative work name</h1>
</div>
Improve this answer
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.

Improve this answer
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.
    – Mike Ciffone
    Commented Oct 9, 2021 at 6:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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