Tell us what’s happening:
Hi, I keep failing the same 3 tests even after checking multiple times.
- None of your header elements should be empty.
- 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”)
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java Documentation Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<nav id="navbar">
<header class="main-header"> HTML Documentation </header>
<div class="table-of-content">
<div>
<span class="dropdown-title"> <a href="#Getting_started_with_HTML" class="nav-link">Getting started with HTML</a> </span>
<ul class="dropdown-content">
<li><a href="#What_is_HTML?">What is HTML?</a></li>
<li><a href="#Anatomy_of_an_HTML_element">Anatomy of an HTML element</a></li>
<li><a href="#HTML_comments">HTML comments</a></li>
</ul>
</div>
<div>
<span class="dropdown-title"><a href="#What's_in_the_head?" class="nav-link">What's in the head?</a></span>
<ul class="dropdown-content">
<li><a href="#What_is_the_HTML_head?">What is the HTML head?</a></li>
<li><a href="#Adding_a_title">Adding a title</a></li>
<li><a href="#Metadata:_the_<meta>_element">Metadata: the <meta> element</a></li>
<li><a href="#Applying_CSS_and_JavaScript_to_HTML">Applying CSS and JavaScript to HTML</a></li>
</ul>
</div>
<div>
<span class="dropdown-title"><a href="#HTML_text_fundamentals" class="nav-link">HTML text fundamentals</a></span>
<ul class="dropdown-content">
<li><a href="#The_basics:_headings_and_paragraphs">The basics: headings and paragraphs</a></li>
<li><a href="#Lists">Lists</a></li>
<li><a href="#Emphasis_and_importance">Emphasis and importance</a></li>
</ul>
</div>
<div>
<span class="dropdown-title"><a href="#Creating_hyperlinks" class="nav-link">Creating hyperlinks</a></span>
<ul class="dropdown-content">
<li><a href="#What_is_a_hyperlink?">What is a hyperlink? </a></li>
<li><a href="#Anatomy_of_a_link">Anatomy of a link</a></li>
<li><a href="#Link_best_practices">Link best practices</a></li>
</ul>
</div>
<div>
<span class="dropdown-title"><a href="#Reference" class="nav-link">Reference</a>
</span>
</div>
</div>
</nav>
<main id="main-doc">
<section class="main-section" id="Getting_started_with_HTML">
<header class="topic-title">
<h2>Getting started with HTML</h2>
<p>In this article, we cover the absolute basics of HTML. To get you started, this article defines elements, attributes, and all the other important terms you may have heard. It also explains where these fit into HTML. You will learn how HTML elements are structured, how a typical HTML page is structured, and other important basic language features.</p>
</header>
<div id="What_is_HTML?">
<h3>What is HTML?</h3>
<p>
HTML (HyperText Markup Language) is a <em>markup language</em> that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on. For example, if we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph (<span class="word-with-background-color"><p></span>) element:
</p>
<pre>
<code><p>My cat is very grumpy</p></code></pre>
</div>
<div id="Anatomy_of_an_HTML_element">
<h3>Anatomy of an HTML element</h3>
<p>Let's further explore our paragraph element from the previous section:</p>
<img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png" alt="Anatomy of an HTML element" width: "67%" height:"30%" />
<p>
The anatomy of our element is:
<ul>
<li>
<p>
<strong>The opening tag:</strong> This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This opening tag marks where the element begins or starts to take effect. In this example, it precedes the start of the paragraph text.
</p>
</li>
<li>
<p>
<strong>The content:</strong> This is the content of the element. In this example, it is the paragraph text.
</p>
</li>
<li>
<p>
<strong>The closing tag:</strong> This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.
</p>
</li>
</ul>
The element is the opening tag, followed by content, followed by the closing tag.
</p>
</div>
<div id="HTML_comments">
<h3>HTML comments</h3>
<p>
HTML has a mechanism to write comments in the code. Browsers ignore comments, effectively making comments invisible to the user. The purpose of comments is to allow you to include notes in the code to explain your logic or coding. This is very useful if you return to a code base after being away for long enough that you don't completely remember it. Likewise, comments are invaluable as different people are making changes and updates.
</p>
<p>
To write an HTML comment, wrap it in the special markers <span class="word-with-background-color"><!--</span> and <span class="word-with-background-color">--></span>. For example:
</p>
<pre><code><p>I'm not inside a comment</p>
<br>
<span style="color:#6a6a6a"> <!-- <p>I am!</p> --></span></code></pre>
</div>
</section>
<section class="main-section" id="What's_in_the_head?">
<header class="topic-title">
<h2>What's in the head?</h2>
<p>
The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <span class="word-with-background-color"><title></span>, links to CSS (if you choose to style your HTML content with CSS), links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document). Web browsers use information contained in the head to render the HTML document correctly. In this article we'll cover all of the above and more, in order to give you a good basis for working with markup.
</p>
</header>
<div id="What_is_the_HTML_head?">
<h3>What is the HTML head?</h3>
<p>
The HTML head is the contents of the <span class="word-with-background-color"><head></span> element. Unlike the contents of the <span class="word-with-background-color"><body></span> element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. Instead, the head's job is to contain metadata about the document. In the example below, the head is quite small:
</p>
<pre><code> <head>
<meta charset="utf-8" />
<title>My test page</title>
</head></code></pre>
</div>
<div id="Adding_a_title">
<h3>Adding a title</h3>
<p>
We've already seen the <span class="word-with-background-color"><title></span> element in action — this can be used to add a title to the document. This however can get confused with the h1 element, which is used to add a top level heading to your body content — this is also sometimes referred to as the page title. But they are different things!
</p>
<ul>
<li>
<p>The h1 element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.)
</p>
</li>
<li>
<p>The <span class="word-with-background-color"><title></span> element is metadata that represents the title of the overall HTML document (not the document's content.)
</p>
</li>
</ul>
</div>
<div id="Metadata:_the_<meta>_element">
<h3>Metadata: the <meta> element</h3>
<p>Metadata is data that describes data, and HTML has an "official" way of adding metadata to a document — the <span class="word-with-background-color"><meta></span> element. There are a lot of different types of <span class="word-with-background-color"><meta></span> elements that can be included in your page's <span class="word-with-background-color"><head></span>, but we won't try to explain them all at this stage, as it would just get too confusing. Instead, we'll explain a few things that you might commonly see, just to give you an idea.
</p>
<pre><code><meta charset="utf-8" /></code></pre>
<p>
This element specifies the document's character encoding — the character set that the document is permitted to use. <span class="word-with-background-color">utf-8</span> is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:
</p>
<div class="img-meta">
<img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/correct-encoding.png" width="600" height="350" />
</div>
<p>
If you set your character encoding to <span class="word-with-background-color">ISO-8859-1</span>, for example (the character set for the Latin alphabet), your page rendering may appear all messed up:
</p>
<div class="img-meta">
<img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bad-encoding.png" width="600" height="350">
</div>
</div>
<div id="Applying_CSS_and_JavaScript_to_HTML">
<h3>Applying CSS and JavaScript to HTML</h3>
<p>
Just about all websites you'll use in the modern day will employ CSS to make them look cool, and JavaScript to power interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the <span class="word-with-background-color"><link></span> element and the <span class="word-with-background-color"><script></span> element, respectively.
</p>
<ul>
<li>
<p>The <span class="word-with-background-color"><link></span> element should always go inside the head of your document. This takes two attributes, <span class="word-with-background-color">rel="stylesheet"</span>, which indicates that it is the document's stylesheet, and <span class="word-with-background-color">href</span>, which contains the path to the stylesheet file: </p>
</li>
<pre><code> <link rel="stylesheet" href="my-css-file.css" /></code></pre>
<li>
<p>The <span class="word-with-background-color"><script></span> element should also go into the head, and should include a <span class="word-with-background-color">src</span> attribute containing the path to the JavaScript you want to load, and <span class="word-with-background-color">defer</span>, which basically instructs the browser to load the JavaScript after the page has finished parsing the HTML. This is useful as it makes sure that the HTML is all loaded before the JavaScript runs, so that you don't get errors resulting from JavaScript trying to access an HTML element that doesn't exist on the page yet.
</p>
</li>
</ul>
<pre><code><script src="my-js-file.js" defer></script></code></pre>
</div>
</section>
<section class="main-section" id="HTML_text_fundamentals">
<header class="topic-title">
<h2>HTML text fundamentals</h2>
<p>
One of HTML's main jobs is to give text structure so that a browser can display an HTML document the way its developer intends. This article explains the way HTML can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.
</p>
</header>
<div id="The_basics:_headings_and_paragraphs">
<h3>The basics: headings and paragraphs</h3>
<p>
Most structured text consists of headings and paragraphs, whether you are reading a story, a newspaper, a college textbook, a magazine, etc.
</p>
<img class="newspaper-img" src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals/newspaper_small.jpg" width="400px" length="200px" />
<p>
Structured content makes the reading experience easier and more enjoyable. <br><br> In HTML, each paragraph has to be wrapped in a <p> element, like so:
</p>
<pre><code><p>I am a paragraph, oh yes I am.</p></code></pre>
<p>
Each heading has to be wrapped in a heading element:
</p>
<pre><code><h1>I am the title of the story.</h1></code></pre>
<p>
There are six heading elements: h1, h2, h3, h4, h5, and h6. Each element represents a different level of content in the document; <span class="word-with-background-color"><h1></span> represents the main heading, <span class="word-with-background-color"><h2></span> represents subheadings, <span class="word-with-background-color"><h3></span> represents sub-subheadings, and so on.
</p>
</div>
<div id="Lists">
<h3>Lists</h3>
<p>
Now let's turn our attention to lists. Lists are everywhere in life—from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! On the web, we have three types of lists: unordered, ordered, and description.
<br><br>
Unordered and ordered lists are very common, and they're covered in this section.
</p>
<h3 class="not-bold">Unordered</h3>
<p>Unordered lists are used to mark up lists of items for which the order of the items doesn't matter. Let's take a shopping list as an example:
</p>
<pre><code>milk
eggs
bread
hummus</code></pre>
<p>Every unordered list starts off with a <span class="word-with-background-color"><ul></span> element—this wraps around all the list items:</p>
<pre><code><ul>
milk
eggs
bread
hummus
</ul></code></pre>
<p>The last step is to wrap each list item in a <span class="word-with-background-color"><li></span> (list item) element:</p>
<pre><code>
<ul>
<li>milk</li>
<li>eggs</li>
<li>bread</li>
<li>hummus</li>
</ul>
</code></pre>
<br>
<h3 class="not-bold">Ordered</h3>
<p>
Ordered lists are lists in which the order of the items does matter. Let's take a set of directions as an example:
</p>
<pre>
Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road</pre>
<p>
The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <span class="word-with-background-color"><ol></span> element, rather than <span class="word-with-background-color"><ul></span>:
</p>
<pre><code><ol>
<li>Drive to the end of the road</li>
<li>Turn right</li>
<li>Go straight across the first two roundabouts</li>
<li>Turn left at the third roundabout</li>
<li>The school is on your right, 300 meters up the road</li>
</ol> </code></pre>
</div>
<div id="Emphasis_and_importance">
<h3>Emphasis and importance</h3>
<p>
In human language, we often emphasize certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.
</p>
<h3 class="not-bold">Emphasis</h3>
<p>
When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.
</p>
<code class="not-code">
I am glad you weren't late.
I am <i>glad</i> you weren't <i>late</i>.</code>
<p>
The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one, with both the words "glad" and "late" in italics, sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.
</p>
<p>
In HTML we use the <span class="word-with-background-color"><em></span> (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognized by screen readers, which can be configured to speak them in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a <span class="word-with-background-color"><span></span> element and some CSS, or perhaps an <span class="word-with-background-color"><i></span> element (see below).
</p>
<pre><code><p>I am <em>glad</em> you weren't <em>late</em>.</p></code></pre>
<h3 class="not-bold">Strong importance</h3>
<p>
To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:
</p>
<pre>
This liquid is <strong>highly toxic</strong>.
I am counting on you. <strong>Do not</strong> be late!</pre>
<p>
In HTML we use the <span class="word-with-background-color"><strong></span> (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers, which can be configured to speak them in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a <span class="word-with-background-color"><span></span> element and some CSS, or perhaps a <span class="word-with-background-color"><b></span> element (see below).
</p>
<pre><code><p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>
</code></pre>
<p>You can nest strong and emphasis inside one another if desired:</p>
<pre><code><p>This liquid is <strong>highly toxic</strong> — if you drink it,
<strong>you may <em>die</em></strong>.</p>
</code></pre>
<pre class="not-code">
This liquid is <strong>highly toxic</strong>.
I am counting on you. <strong>Do not</strong> be late!
This liquid is highly toxic — if you drink it, <strong>you may <em>die</em></strong>.</pre>
</div>
</section>
<section class="main-section" id="Creating_hyperlinks">
<header class="topic-title">
<h2>Creating hyperlinks</h2>
<p>Hyperlinks are really important — they are what makes the Web a web. This article shows the syntax required to make a link, and discusses link best practices.</p>
</header>
<div id="What_is_a_hyperlink?">
<h3>What is a hyperlink?</h3>
<p>
Hyperlinks are one of the most exciting innovations the Web has to offer. They've been a feature of the Web since the beginning, and are what makes the Web a web. Hyperlinks allow us to link documents to other documents or resources, link to specific parts of documents, or make apps available at a web address. Almost any web content can be converted to a link so that when clicked or otherwise activated the web browser goes to another web address (URL).
</p>
<p>
For example, the BBC homepage contains many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more.
</p>
<img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/updated-bbc-website.png" class="bbc-homepage-img" />
</div>
<div id="Anatomy_of_a_link">
<h3>Anatomy of a link</h3>
<p>
A basic link is created by wrapping the text or other content inside an <span class="word-with-background-color"><a></span> element and using the <span class="word-with-background-color">href</span> attribute, also known as a <strong>Hypertext Reference</strong>, or <strong>target</strong>, that contains the web address.
</p>
<code>
<pa>
I'm creating a link to
<a href="https://www.mozilla.org/en-US/"a>the Mozilla homepage</a>.
</pa>
</code>
<p>
This gives us the following result: <br>
I'm creating a link to the <a href="https://www.mozilla.org/en-US/">Mozilla homepage</a>.
</p>
<h3 class="not-bold">Block level links</h3>
<p>
As mentioned before, almost any content can be made into a link, even block-level elements. If you want to make a heading element a link then wrap it in an anchor (<span class="word-with-background-color"><a></span>) element as shown in the following code snippet:
</p>
<code>
<a href="https://developer.mozilla.org/en-US/">
<h1>MDN Web Docs</h1>
</a>
<p>
Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
</p> </code>
<p>
This turns the heading into a link:
</p>
<div class="code-example">
<a href="https://developer.mozilla.org/en-US/">
<h1>MDN Web Docs</h1>
</a>
<p>
Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
</p>
</div>
<h3 class="not-bold">Image links</h3>
<p>
If you have an image you want to make into a link, use the <span class="word-with-background-color"><a></span> element to wrap the image file referenced with the <span class="word-with-background-color"><img></span> element. The example below uses a relative path to reference a locally stored SVG image file.
</p>
<code>
<a href="https://developer.mozilla.org/en-US/">
<img src="mdn_logo.svg" alt="MDN Web Docs" />
</a> </code>
<p>
This makes the MDN logo a link:
</p>
<div class="code-example">
<a href="https://developer.mozilla.org/en-US/">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKv3YhvtA35R4QoWjhTKbMvP6ZdxcsdnoeaQ&s" alt="MDN Web Docs" /></a>
</div>
</div>
<div id="Link_best_practices">
<h3>Link best practices</h3>
<p>
There are some best practices to follow when writing links. Let's look at these now.
</p>
<h3 class="not-bold">Use clear link wording</h3>
<p>
It's easy to throw links up on your page. That's not enough. We need to make our links <em>accessible</em> to all readers, regardless of their current context and which tools they prefer. For example:
</p>
<ul>
<li>
<p>
Screen reader users like jumping around from link to link on the page, and reading links out of context.
</p>
</li>
<li>
<p>
Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.
</p>
</li>
<li>
<p>
Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.
</p>
</li>
</ul>
<p>Let's look at a specific example:</p>
<br>
<p>
<strong>Good</strong> link text: <a href="https://www.mozilla.org/firefox/">Download Firefox</a>
</p>
<pre class="good-code-example"><code><p><a href="https://www.mozilla.org/firefox/">Download Firefox</a></p></code></pre>
<p>
<strong>Bad link</strong> text: <a href="https://www.mozilla.org/firefox/">Click here</a> to download Firefox
</p>
<pre class="bad-code-example"><code><p>
<a href="https://www.mozilla.org/firefox/">Click here</a> to download Firefox
</p></code></pre>
<p>Other tips:</p>
<ul>
<li>
<p>
Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.
</p>
</li>
<li>
<p>
Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different color and underlined (this convention generally shouldn't be broken, as users are used to it).
</p>
</li>
<li>
<p>
Keep your link text as short as possible — this is helpful because screen readers need to interpret the entire link text.
</p>
</li>
<li>
<p>
Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screen reader users, if there's a list of links out of context that are labeled "click here", "click here", "click here".
</p>
</li>
</ul>
</div>
</section>
<section class="main-section" id="Reference">
<header class="topic-title">
<h3>Reference</h3>
<ul>
<li>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" class="mdn">MDN</a></li>
</ul>
</header>
</section>
</main>
</div>
</body>
</html>
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.2 Safari/605.1.15
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page