The test “None of your header elements should be empty” is failing, even though they are clearly not empty. I even tried it with the example document and this test still failed. I think the test is broken.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Documentation</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav id="navbar">
<header>Technical Documentation</header>
<a href="#Getting_Started" class="nav-link">Getting Started</a>
<a href="#Learning_the_Structure" class="nav-link">
Learning the Structure
</a>
<a href="#Running_HTML" class="nav-link">Running HTML</a>
<a href="#Basic_HTML_Elements" class="nav-link">Basic HTML Elements</a>
<a href="#Learn_More" class="nav-link">Learn More</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Getting_Started">
<header>Getting Started</header>
<article>
<p>
HTML, or HyperText Markup Language, is base structure for webpages, and
can be used in conjuntion with other programming languages, including
JavaScript and CSS, Cascading Stylesheet. For those looking to get started
learning HTML, this document is a great start. Before we start, it's best
to know what your getting yourself into. This document contains the
following:
</p>
<ul>
<li>Code Examples</li>
<li>Basic HTML Structure Guide</li>
<li>Step by Step Instructions</li>
<li>How to run HTML</li>
<li>Basic HTML Elements</li>
</ul>
<code class="block"><!DOCTYPE></code>
<p>
To start coding in HTML, HTML requires a declaration, used to tell the
browsers what version of HTML to run. In previous versions, this was quite
difficult, but in the most recent version, HTML5, all you need is the
above <strong>element</strong>. An element tells the browser how to
display whatever is inside of it, although this can be modified by adding
or changing CSS code, thought that will not be taught here. The above
element is <strong>self-closing</strong>, meaning it doesn't have a
closing <strong>tag</strong>, such as <code></element></code>. In
previous versions, these types of elements needed a forward-slash
(<code>/</code>) at the end to declare they had no closing tag, thought
that is not nessiccary here. Note That some companies may require you to
make use of it so that others know it is self-closing, especially for
elements that can either be self-closing or not, depending on how it is
being used.
</p>
</article>
</section>
<section class="main-section" id="Learning_the_Structure">
<header>Learning the Structure</header>
<article>
<p>
Once you have declared the document, you'll need somewhere to put all of
your new code! introducing the
<code><html></code> element. Unlike the previous element, this does
have a closing tag, so you'll want to add a closing tag afterwards so your
browser knows when your document has ended. Before you start typing your
dream document, have you noticed that on other websites, they have titles
that show up on the tabs. Not only would that be useful for viewers, but
it's also useful for search engines so they understand the page better. To
get a title up, however, type yourself the
<code><head></code> element. From here on out, you'll be told if
elements are self-closing, as most aren't, including this one. Now, you
can utilize the <code><title></code> element, and type in your
title. If it or any other plain text you type uses symboles that are often
used when coding, such as those angled brackets, you'll have to look up
HTML Entities online, as they won't be covered here. Not using them
instead of plain text may confuse your code. Also, insert the below code
into your <code>head</code> element, which will help clarify some
technicalities for your browsers.
</p>
<code class="block">
<meta name="viewport" contents="width=device-width,
initial-scale=1.o"><br />
<meta charset="utf-8">
</code>
<p>
What this does is tell the browser how to display both the webpage and the
characters inside the webpage. Also in the opening
<code>html</code> add the <code>lang</code>
<strong>attribute</strong> with the <strong>value</strong>
<code>en</code>. Attributes and values use the folllowing
<strong>sytax</strong>: <code>attribute="value"</code>. A syntax is a
template of sorts, used to describe how to write code. Make sure there is
a space between the opening tag and the attribe-value pair, and they
should all be inside those angle brackets. Now you can create a
<code><body></code> element. This will be where all of the
displayable code will be. Also, none of the <code>meta</code> elements
were needed, or the <code>lang</code> attribute. However, is best practice
to include them, both for accessibility and to optimize your webpage for
search engines, should you decide to publish it. Your HTML will run fine
without them on most browsers.
</p>
</article>
</section>
<section class="main-section" id="Running_HTML">
<header>Running HTML</header>
<article>
<p>
Before we get into the nitty-gritty of all the different elements you can
use to customize your webpage to your heart's content, you need to
actually get your page to show up on screen. There are two methods to
doing this. One is to use your favorite text editor or code editor on a
HTML document, and open it in your browser, but this won't auto reload
after adding new code. Instead, download Visual Studio Code and open up a
new folder with it. Create a new HTML document in the Explorer tab, and
name it what you like. It won't show up to others. Go to the Extensions
tab, and search for "Prittier". Install it, and you may have to restart
Code. Go to Preferences, and search for "Format". Check the option that
allows you to format on save. Now close preferences, and install "Live
Server". Right click your mouse or touchpad on or inside your HTML
document, and select "Start Live Server". This will open up your page in
your defult browser. If you use chrome, it will open on the most recently
used user, if you have multiple. Now, it will auto reload when you save
your decument. Also, no one else can access the displayed URL except you.
What you created earlier is called a boiler plate. To recreate it in an
instant, type
<code>!</code> in your document and press your Tab key. Rename your
document in your title contents as you wish. Now type the code below in
the body element. Save your document, and go to the browser window, and a
message should be displayed. If it's not, re-read this sectioon Before you
continue.
</p>
<code class="block"><h1>Hello, World!</h1></code>
<p>
If you wish, you can delete that after you've confirmed you can see it in
your browser. Now you can start learning all fun new elements of the HTML.
Enjoy!
</p>
</article>
</section>
<section class="main-section" id="Basic_HTML_Elements">
<header>Basic HTML Elements</header>
<article>
<p>
The element we used above are called heading elements, and there are six
of them, from <code>h1</code> to <code>h6</code>, each getting smaller. In
most cases, you should only use one <code>h1</code>
element. This helps both screen readers and seach engines better
understand your webpage. You can style them however you like in your CSS
file. To link it, use the bellow code, and replace
<code>name</code> with your CSS file name. CSS is used to style HTML
documents, while <strong>JavaScript</strong> is used to apply behavior to
them. Also, ensure that all related files are in the same folder.
</p>
<code class="block"><link rel="stylesheet" href="name.css"></code>
<p>
You can also link external online stylesheets this way, or other fonts.
Just use the appropriate URL as a value for the
<code>href</code> attribute. Ensure that you start it with
<code>http://</code> or, preferably, <code>https://</code>, which means
the website is secure. If your source does not have these, don't use it.
That advice goes in general with any websites you may visit on a regular
basis.
</p>
<p>
For normal text, use the <code><p></code> element. To break up text,
you can either use multiple of these, add a
<code><br></code> element, which is self-closing, or do both. To
break text with a horizontal line, you can do as before but with the
<code><hr></code> element instead, also self-closing. To add a
comment to your document only those editing or inspecting the actual code
can see, use the bellow code, called a comment tag. It is self-closing,
and can be placed anywhere. Your browser does not read these tags, so they
should be used more as explanations to snibits of code, which you may need
for more complex HTML.
</p>
<code class="block"><!--comment--></code>
<p>
Also to style your text as code, similar to what you've seen so far, use
the <code><code></code> element.
</p>
</article>
</section>
<section class="main-section" id="Learn_More">
<header>Learn More</header>
<article>
<p>
For more on coding HTML and other languages, visit these helpful websites
below!
</p>
<ul>
<li><a href="https://www.freecodecamp.org/">Free Code Camp</a></li>
<li>
<a href="https://www.grasshopper.com/">
Grasshopper - A Free Google Product
</a>
</li>
<li>
<a href="https://www.codewithmosh.com/">
Code With Mosh - A Perffessional Programming Instructor.*
</a>
</li>
<li>
<a href="https://www.google.com/"> The World Wide Web (Google)</a>
</li>
</ul>
<p>
* Hosts free course samples on his YouTube channel, otherwise you'll have
to cough up a small fee for a full course. If your just looking for
something to start on, though, the free samples should be fine, usually
being atleast an hour in length, often much more.
</p>
</article>
</section>
</main>
</body>
</html>
Browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: