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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.