I have been trying to debug this as the tests don’t pass saying that my headers must not be empty and that my nav-links should have a name corresponding to their child header.
however i can not for the life of me find any empty headers or figure out why it might be saying this, any help is appreciated
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<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">
<title>HTML Documentation</title>
<div class="navbar">
<nav id="navbar">
<header id="navbar_title">HTML Documentation</header>
<ul>
<li><a href="#Introduction_to_html" class="nav-link">Introduction to html</a></li>
<li><a href="#A_Simple_HTML_Document" class="nav-link">A Simple HTML Document</a></li>
<li><a href="#What_is_an_HTML_Element?" class="nav-link">What is an HTML Element?</a></li>
<li><a href="#Web_Browsers" class="nav-link">Web Browsers</a></li>
<li><a href="#HTML_Page_Structure" class="nav-link">HTML Page Structure</a></li>
<li><a href="#HTML_attributes" class="nav-link">HTML attributes</a></li>
</ul>
</nav>
</div>
<body>
<main id="main-doc">
<section id="Introduction_to_html" class="main-section">
<header id="Introduction_to_html_Header">Introduction to html</header>
<p>HTML is the standard markup language for creating Web pages.</p>
<h2>What is HTML?</h2>
<ul>
<li>HTML stands for Hyper Text Markup Language</li>
<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", "this is a paragraph", "this is a link",
etc.</li>
</ul>
</section>
<section id="A_Simple_HTML_Document" class="main-section">
<header id="A_Simple_HTML_Document_header">A Simple HTML Document</header>
<h2>Example</h2>
<div class="code-block">
<pre><code><br> *** EXAMPLE CODE ***<br>
<!DOCTYPE html>
<html>
<head>
<title><strong> Page Title Goes Here </strong></title>
</head>
<body>
<h1><strong> My First Heading </strong></h1>
<p><strong> My first paragraph. </strong><p>
</body>
</html>
</code><br></pre>
</div>
<h3>Example explained</h3>
<ul>
<li>The <code><!DOCTYPE html></code> declaration defines that this document is an HTML5 document</li>
<li>The <code><html></code> element is the root element of an HTML page</li>
<li>The <code><head></code> element contains meta information about the HTML page</li>
<li>The <code><title></code> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)</li>
<li>The <code><body></code> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.</li>
<li>The <code><h1></code> element defines a large heading</li>
<li>The <code><p></code> element defines a paragraph</li>
</ul>
</section>
<section id="What_is_an_HTML_Element?" class="main-section">
<header id="What_is_an_HTML_Element?_header">What is an HTML Element?</header>
<p>An HTML element is defined by a start tag, some content, and an end tag:<i>(there are a few self closing elements however)</i></p>
<h2><span class="tagname"><tagname></span> Content goes here... <span class="tagname"></tagname></span></h2>
<p>The HTML <b>element</b> is everything from the start to the end tag</p>
</section>
<section id="Web_Browsers" class="main-section">
<header id="Web_Browsers_header">Web Browsers</header>
<p>The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and render them.</p>
<p>The browser uses the tags to render the document properly. It does not display the HTML tags</p>
<img src="https://www.techspot.com/images2/news/bigimage/2021/10/2021-10-20-image-2.png" alt="Image of browser with code">
</section>
<section id="HTML_Page_Structure" class="main-section intro">
<header id="HTML_Page_Structure_header">HTML Page Structure</header>
<fieldset><HTML>
<fieldset><head>
<fieldset><title>Page title</title>
</fieldset>
</head>
</fieldset>
<fieldset><body>
<fieldset>
<fieldset><h1>Some text</h1>
</fieldset>
<fieldset>
<p>some text</p>
</fieldset>
</fieldset>
</body>
</fieldset>
</html></fieldset>
</section>
<section id="HTML_Attributes" class="main-section">
<header id="HTML_Attributes_header">HTML Attributes</header>
<p>HTML attributes provide additional information about HTML elements.
</p>
<ul>
<li>All HTML elements can have attributes</li>
<li>Attributes provide additional information about elements</li>
<li>Attributes are always specified in the start tag</li>
<li>Attributes usually come in name/value pairs like: name="value"</li>
</ul>
<h2>the Href Attribute</h2>
<p> <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
<div class="code-block">
<pre><code><a href="https://www.w3schools.com">visit w3schools</a></code></pre>
</div>
<h2>The src Attribute</h2>
<p>The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image.
</p>
<div class="code-block">
<pre><code><img src="img_girl.jpg></code></pre>
</div>
<p>There are two ways to specify the URL in the src attribute:</p>
<ol>
<li> Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".</li>
<p><b>Notes:</b> External images might be under copyright. If you do not get permission to use it you may be in
violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or
changed.</p>
<li>Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the
domain name. If the URL begins without a slash, it will be relative to the current page. Example:
src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".</li>
</ol>
<p>Tip: It is almost always best to use relative URLs. They will not break if you change domain.</p>
</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/116.0.0.0 Safari/537.36 Edg/116.0.1938.62
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: