I am having trouble completing the technical document project

I have passed every test except this one:

10. Additionally, the navbar should contain link (a) elements with the class of “nav-link”. There should be one for every element with the class “main-section”.

<header id="title-header">
  <nav id="navbar">
    <div id="title">
    <header id="nav-title">HTML 5 introduction</header><hr>
      <ul>
      <li><class="nav-link" href="#basics">BASICS
        </li><hr id="hr-div">
      <li><class="nav-link" href="#elements">ELEMENTS
        </li><hr id="hr-div">
      <li><class="nav-link" href="#semantics">SEMANTICS
        </li><hr id="hr-div">
      <li><class="nav-link" href="#classes">CLASSES</li><hr id="hr-div">
      <li><class="nav-link" href="#forms">FORMS
        </li>
    </nav>

All of the links i’ve created work perfectly but for some reason this doesn’t pass .
Any ideas?

Note: I removed the anchor link {a} because I am unable to post links as a new member.

Hello there,

I’ve edited your post 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.

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

To answer your question:

  1. Additionally, the navbar should contain link (a) elements with the class of “nav-link”. There should be one for every element with the class “main-section”.

I do not see a single a element with a class of nav-link.
For future posts, it would help for you to link to your project.

Hope this helps

So I’m guessing the problem is not with the links but possibly with the text not matching or something.

We really need to see the full project so we can have a look at it. Please post a link to your Codepen or wherever you are planning to have it online for the submission.

I think you might need to add anchor tags; basically add the letter a to those href tags
Something like this?

<li><a class="nav-link" href="#basics">BASICS</a>
        </li><hr id="hr-div">```

in the previous post i removed the anchors so i would be allowed to post the code. This is the entire html

<html class="container">
<header id="title-header">
  <nav id="navbar">
    <div id="title">
    <header id="nav-title">HTML 5 introduction</header><hr>
      <ul>
      <li><a class="nav-link" href="#basics">BASICS
        </li><hr id="hr-div">
      <li><a class="nav-link" href="#elements">ELEMENTS
        </li><hr id="hr-div">
      <li><a class="nav-link" href="#semantics">SEMANTICS
        </li><hr id="hr-div">
      <li><a class="nav-link" href="#classes">CLASSES</li><hr id="hr-div">
      <li><a class="nav-link" href="#forms">FORMS
        </li>
    </nav>
    </div>
</header>
<main id="main-doc">
  <section id= "basics" class="main-section">
    <header>BASICS</header>
    <p>
      All HTML documents must start with a document type declaration: <code>!DOCTYPE html</code>.

      The HTML document itself begins with <code>html</code> and ends with <code>/html</code>.

The visible part of the HTML document is between <body> and </body>.
    </p>
    <p>
      Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
    </p>
    </section>
  <section class="main-section" id="elements">
<header>ELEMENTS</header>
    <p>
      An HTML element is defined by a start tag, some content, and an end tag:

      <code>tagname</code>Content goes here...
The HTML element is everything from the start tag to the end tag:

      <code>h1</code>My First Heading<code>/h1</code>
      <code>p</code>My first paragraph.<code>/p</code>
    </p>
    <p>
      HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.
    </p>
    </section>
  <section class="main-section" id="semantics">
    <header>SEMANTICS</header>
    <p>
      A semantic element clearly describes its meaning to both the browser and the developer.
    </p>
    <p>
      Many web sites contain HTML code like: <code>div id="nav"</code> div <code>class="header"</code> <code>div id="footer"</code> to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different parts of a web page:
    <ul>
      <li>article</li>
      <li>aside</li>
      <li>header</li>
      <li>footer</li>
      <li>main</li>
    </ul>
    </p>
    </section>
  <section class="main-section" id="classes">
    <header>CLASSES</header>
    <p>
      The <code>class</code> attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.
    </p>
    <p>
      To create a class; write a period <code>(.)</code> character, followed by a class name. Then, define the CSS properties within curly braces <code>{}</code>:
    </p>
    </section>
  <section class="main-section" id="forms">
    <header>FORMS</header>
    <p>
      An HTML form is used to collect user input. The user input can then be sent to a server for processing.
    </p>
    <p>
      The <code>action</code> attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a page on the server when the user clicks on the submit button.

In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data:
    </p>
    </section>
  </main>
  </html>``

I am just making sure, but the above does not contain any closing tags for your a elements. Is this in your live code?

1 Like

That definitely may be the issue. I thought the anchor tag was self closing. I’ll let you guys know in a few.

The problem was the tags not being closed. Thank you all for responding.

3 Likes