Whats problem in my code?? Please Help Me !! Failed:Your #navbar should have exactly one header element within it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"/>
</head>
<nav id="navbar">
<header>Documentation</header>
<a class="nav-link" href="#Doc_1">Doc_1</a>
<a class="nav-link" href="#Doc_2">Doc_2</a>
<a class="nav-link" href="#Doc_3">Doc_3</a>
<a class="nav-link" href="#Doc_4">Doc_4</a>
<a class="nav-link" href="#Doc_5">Doc_5</a>
<main id="main-doc">
  <section class="main-section" id="Doc_1">
    <header>Doc_1</header>
    <code>Hello world</code>
    <code>How are you</code>
    <code>My name is Narendra</code>
    <code>I am from India</code>
    <code>Completed B.tech</code>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    
    <p>Tells about Doc 1</p>
    <p>contains In depth Information</p>
   
   
  </section>
  <section class="main-section" id="Doc_2">
    <header>Doc_2</header>
    <code>Java</code>
    <code>Python</code>
    <code>JavaScript</code>
    <code>C++</code>
    <code>C#</code>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    
    <p>Tells about Doc 2</p>
    <p>contains In depth Information</p>
  </section>
    <section class="main-section" id="Doc_3">
      <header>Doc_3</header>
    <code>What</code>
    <code>Where</code>
    <code>Was</code>
    <code>When</code>
    <code>Which</code>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
      
      <p>Tells about Doc 3</p>
    <p>contains In depth Information</p>
    </section>
    <section class="main-section" id="Doc_4">
      <header>Doc_4</header>
    <code>HTML</code>
    <code>CSS</code>
    <code>JavaScript</code>
    <code>React.js</code>
    <code>Node.js</code>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
      
      <p>Tells about Doc 4</p>
    <p>contains In depth Information</p>
    </section>
    <section class="main-section" id="Doc_5">
      <header>Doc_5</header>
    <code>Front End</code>
    <code>Back End</code>
    <code>Full Stack</code>
    <code>Hr</code>
    <code>PM</code>
    <li>9</li>
    <li>8</li>
    <li>7</li>
    <li>6</li>
    <li>5</li>
    <p>Tells about Doc 5</p>
    <p>contains In depth Information</p></section>
</main>
</html>

You need closing tag of navbar for it.

Another thing to consider is every <li> element should be wrapped in <ul> if you want it unordered or <ol> if you want it ordered element and rather than using <code> I believe there is more suitable element such as

<p>
<label>

And you can use <code> element in the more suitable context, such as the code it self.

Your <main> should be wrapped inside body element.

1 Like