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: