Too many H1s in Learn Typography by Building a Nutrition Label

I have just reached lesson 32 Learn Typography by Building a Nutrition Label in the RWD Beta and it is asking:

Below your .sm-text element, create a new h1 element with the text Calories 230 . Wrap the 230 portion of the text in a span element with the class set to right .

I always thought it was bad practise to have more than one H1 tag on a page (as also commented by Kevin Powell in his YouTube video There is already one on line 12 in the code. I haven’t completed the whole project yet but does step 32 need to be revised to make the HTML more semantic?

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Nutrition Label</title>
    <link href=",700,800" rel="stylesheet">
    <link href="./styles.css" rel="stylesheet">
    <div class="label">
        <h1 class="bold">Nutrition Facts</h1>         <!-- There is already a H1 Here -->
        <div class="divider"></div>
        <p>8 servings per container</p>
        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
       <!-- The lesson wants another H1 placed here -->

Technically, it is not a WCAG violation to have multiple <h1>s on a page, but it is considered a best practice by almost all accessibility experts to only have one <h1> near the top of the page.

So I would agree that only the “Nutrition Facts” heading should be an <h1> and then all other subheadings should decrement from there as appropriate. Also, I think this just makes logical sense since a heading like “Calories” does seem to be a sub set of “Nutrition Facts”.

1 Like

Hi @marks1974 !

Welcome to the forum!

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.