Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I can’t pass these two tests

Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.

Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documentation</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com"  crossorigin>
    <link href="https://fonts.googleapis.com/css2?    family=Nunito:wght@700&display=swap" rel="stylesheet">
  </head>
  <body>
    <!--Navbar-->
    <nav id="navbar">
      <header><h1>Introduction To HTML</h1></header>
       <a href="#Introduction" class="nav-link">Introduction</a>
       <a href="#Example" class="nav-link">Example</a>
       <a href="#Element" class="nav-link">Element</a>
       <a href="#Hello_World" class="nav-link">Hello World</a>
       <a href="#HTML_History" class="nav-link">HTML History</a>
    </nav>
    <main id="main-doc">
      <!--Introduction-->
      <section class="main-section" id="Introduction">
        <header>Introduction<header>
          <hr>
          
          <p>HTML is the standard markup language for creating Web pages.</p>
          <ul>
            <li>HTML is the standard markup language for creating Web pages</li>
            <li>HTML describes the structure of a Web page</li>
            <li>HTML consists of a series of elements</li>
            <li>HTML elements tell the browser how to display the content</li>
            <li>HTML elements label pieces of content such as "this is a heading",<br> "this is a paragraph", "this is a link", etc.
         </li>
          </ul>
          <code>
x = 5;
y = 6;
z = x + y;
</code>

      </section>
      <!--Example-->
      <section id="Example" class="main-section">
        <header>Example<header>
          <hr>
          <h3>Example of HTML document</h3>
          <div id="html-example">
          <p><<span>!DOCTYPE html</span> <br>
             <<span>html</span>> <br>
             <<span>head</span>> <br>
             <<span>title>Page Title</span><  /title> <br>
             <<span>/head</span>><br>
             <<span>body</span>><br>
             <<span>h1>My First Heading< /h1></span><br>
             <<span>p>My first paragraph.< /p></span><br>
             < /body><br>
             < /html></p>
          <h3>Example Explained</h3>
          <p>
The <<span>!DOCTYPE html> declaration defines that this document is an HTML5 document <br>
The <<span>html</span>> element is the root element of an HTML page <br>
The <<span>head</span>> element contains meta information about the HTML page<br>
The <<span>title</span>> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)<br>
The <<span>body</span>> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.<br>
The <<span>h1</span>> element defines a large heading<br>
The <<span>p</span>> element defines a paragraph<br></p>
          
          </div>
          <code>
          x = 5;<br>
          y = 6;<br>
          z = x + y;
          </code>
      </section>
      <!--Element-->
      <section id="Element" class="main-section">
        <header>Element<header>
          <hr>
          <p>An HTML element is defined by a start tag, some content, and an end tag:

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

<<span>h1>My First Heading< /h1></span><br>
<<span>p>My first paragraph.< /p></span><br> 
<code>
x = 5;
y = 6;
z = x + y;
</code>
      </section>
      <!--HELLOWORLD-->
      <section id="Hello_World" class="main-section">
        <header>Hello World<header>
          <hr>
          <p>
            <<span>!DOCTYPE html></span> <br>
              <<span>html></span><br>
              <<span>head></span><br>
              <<span>title>Page Title<<span>/title></span><br>
              <<span>/head></span><br>
              <<span>body></span><br>
              <<span>h1>My First Heading<<span>/h1</span>><br>
              <<span>p>My first paragraph.<<span>/p></span>
              <<span>/body><br></span>
            <<span>/html>
          </p>
         <code>
         x = 5;<br>
         y = 6;<br>
         z = x + y;
         </code>
      </section>
      <!--HTML HISTORY-->
      <section id="HTML_History" class="main-section">
        <header>HTML History<header>
          <hr>
          <br>
          <p id="history">Year	Version
<p><b><i>1989</i></b>	Tim Berners-Lee invented www</p>
<p><b><i>1991</i></b>	Tim Berners-Lee invented HTML</p>
<p><b><i>1993</i></b>	Dave Raggett drafted HTML+</p> 
<p><b><i>1995</i></b>	HTML Working Group defined HTML 2.0</p>
<p><b><i>1997</i></b>	W3C Recommendation: HTML 3.2</p> 
<p><b><i>1999</i></b>	W3C Recommendation: HTML 4.01</p> 
<p><b><i>2000</i></b>	W3C Recommendation: XHTML 1.0</p> 
<p><b><i>2008</i></b>	WHATWG HTML5 First Public Draft</p> 
<p><b><i>2012</i></b>	WHATWG HTML5 Living Standard</p> 
<p><b><i>2014</i></b>	W3C Recommendation: HTML5</p> 
<p><b><i>2016</i></b>	W3C Candidate Recommendation: HTML 5.1</p> 
<p><b><i>2017</i></b>	W3C Recommendation: HTML5.1 2nd Edition</p>
<p><b><i>2017</i></b>	W3C Recommendation: HTML5.2</p>
       <code>
        x = 5;
        y = 6;
        z = x + y;
        </code>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Run your HTML through a validator. You have several errors that you aren’t catching with your own eyes. A validator will find them for you.