Cannot pass empty header in tech doc project

HTML-CSS
1

I am having trouble understand why my code is not passing the required mark for " None of your header elements should be empty." I have text inside my header elements and yet its still marked as an X, would anyone be able to help me out here?

<!DOCTYPE html>
<html lang="en">
  <header>
    <title>Granblue Fantasy Versus Rizing</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0"/>
    <link href="styles.css" rel="stylesheet." />
  </header>
  <body>
    <main id="main-doc">
      <section class="main-section" id="GBFVR_1">
        <header>
          <h1>GBFVR 1</h1>
        </header>
        <p>Text 1</p>
        <p><code>Text 1</code></p>
        <ul>
          <li>Text 1</li>
        </ul>
      </section>

      <section class="main-section" id="GBFVR_2">
        <header>
          <h1>GBFVR 2</h1>
        </header>
        <p>Text 2</p>
        <p><code>Text 2</code></p>
        <ul>
          <li>Text 2</li>
        </ul>
      </section>

      <section class="main-section" id="GBFVR_3">
        <header>
          <h1>GBFVR 3</h1>
        </header>
        <p>Text 3</p>
        <p><code>Text 3</code></p>
        <ul>
          <li>Text 3</li>
        </ul>
      </section>

      <section class="main-section" id="GBFVR_4">
        <header>
          <h1>GBFVR 4</h1>
        </header>
        <p>Text 4</p>
        <p><code>Text 4</code></p>
        <ul>
          <li>Text 4</li>
        </ul>
      </section>

      <section class="main-section" id="GBFVR_5">
        <header>
          <h1>GBFVR 5</h1>
        </header>
        <p>Text 5</p>
        <p><code>Text 5</code></p>
        <ul>
          <li>Text 5</li>
        </ul>
      </section>
      <nav id="navbar">
        <header>GBFVR</header>
        <a href="#GBFVR_1" class="nav-link">GBFVR 1</a>
        <a href="#GBFVR_2" class="nav-link">GBFVR 2</a>
        <a href="#GBFVR_3" class="nav-link">GBFVR 3</a>
        <a href="#GBFVR_4" class="nav-link">GBFVR 4</a>
        <a href="#GBFVR_5" class="nav-link">GBFVR 5</a>
      </nav>
    </main>
  </body>
</html>
2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

Are you sure you mean to use the header element here? There is another element that is close to header but is intended to be used before the body element.

If you can’t remember, look at the finished HTML on some of the previous courses you have completed.

4

I managed to figure out my mistake thanks to you, I accidentally made a typo naming the head tag as header and fixing that typo fixed the error, thank you.

1 Like