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.
Having an issue putting a matching child title to the ID.
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<main id=main-doc>
<section class="main-section" id=Rocketships>
<header>Rocketships<p>1</p><p>2</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id=Exploration>
<header>Exploration<p>1</p><p>2</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id=Milky_Way>
<header>Milky Way<p>1</p><p>2</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id=Planets>
<header>Planets<p>1</p><p>2</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id=Aliens>
<header>Aliens<p>1</p><p>2</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<nav id=navbar>
<header>Navigator</header>
<a class = "nav-link" href="#Rocketships">Rocketships</a>
<a class = "nav-link" href="#Exploration">Exploration</a>
<a class = "nav-link" href="#Milky_Way">Milky Way</a>
<a class = "nav-link" href="#Planets">Planets</a>
<a class = "nav-link" href="#Aliens">Aliens</a>
</nav>
</html>
</main>
/* file: styles.css */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15
Technical Documentation Page - Build a Technical Documentation Pagehttps://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page`Preformatted text`
All HTML values of attribute need quotes.
<img alt="This is a photo">
Read more about the id attribute here https://www.w3schools.com/htmL/html_id.asp
1 Like
Fixed for the IDs. Still getting an error though for (8.)
Please share your updated code.
<!DOCTYPE html>
<html>
<main id=main-doc>
<section class="main-section" id="Rocketships">
<header>Rocketships<p style="font-size: 0.8em;">Are they able to reach Mars?</p><p style="font-size: 0.8em;"">What country is the most successful builder of them?</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id="Exploration">
<header>Exploration<p>1</p><p>2</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id="Milky_Way">
<header>Milky Way<p>1</p><p>2</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id="Planets">
<header>Planets<p>1</p><p>2</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<section class="main-section" id="Aliens">
<header>Aliens<p>1</p><p>2</p></header>
<ul>
<li><code><h1></code></li>
<li><code><p></code></li>
<li><code><div></code></li>
<li><code><span></code></li>
<li><code><a></code></li>
</ul>
</section>
<nav id=navbar>
<header>Navigator</header>
<a class = "nav-link" href="#Rocketships">Rocketships</a>
<a class = "nav-link" href="#Exploration">Exploration</a>
<a class = "nav-link" href="#Milky_Way">Milky Way</a>
<a class = "nav-link" href="#Planets">Planets</a>
<a class = "nav-link" href="#Aliens">Aliens</a>
</nav>
</html>
</main>
Your failing test
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.
And the User Story
Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it.
<section class="main-section" id="Exploration">
<header>Exploration<p>1</p><p>2</p></header>
Look at your code and what’s in the header. Does it match the user story?
If I take out the quotes for Exploration, I’d still get an error.
ILM
December 10, 2025, 4:26pm
9
do not remove quotes from around values of attributes, that’s not the issue
what’s inside your header?
Exploration<p>1</p><p>2</p>
1 Like
ILM
December 11, 2025, 12:33pm
11
and is all that text in the id?
Yes, I believe that’s the only text within the header.
ILM
December 22, 2025, 6:15pm
13
pkdvalis:
id="Exploration"
I do not see the 1 and 2 in the id, so you have not put all the text that is in the header in the id
id="Exploration">
<header>Exploration<p>1</p><p>2</p></header>
This is how a test is going to see it:
"Exploration" == "Exploration<p>1</p><p>2</p>"
or maybe
"Exploration" == "Exploration12"
Depending on how it works.
Can you see how the content of the header and the id do not match?
On top of that, does having 2 paragraphs in your heading with just 1 and 2 in them make sense semantically?