curriculum/challenges/english/blocks/workshop-blog-page/669fdfc9a5e3da42d2376609.md
Now that you have added the about section, try clicking on the About link to see the page jump down to that section.
The next section in the blog page will be a list of posts talking about Mr. Whiskers.
Add another section element with an id set to "posts".
Inside the section element, add an h2 element with the text of Posts.
Your code should have an opening section tag.
assert.match(code, /<section.*>/i);
Your code should have a closing section tag.
assert.match(code, /<\/section>/i);
Your section element should have an id set to "posts".
assert.match(code, /<section.*id="posts".*>/i);
Your section element should be within your main element.
const sectionElement = document.getElementById('posts');
assert.strictEqual(sectionElement?.parentElement.tagName, 'MAIN');
Your h2 element should be inside the section element.
const h2Element = document.querySelector('#posts h2');
assert.strictEqual(h2Element?.parentElement.tagName, 'SECTION');
Your h2 element should have the text of Posts.
const h2Element = document.querySelector('#posts h2');
assert.strictEqual(h2Element?.innerText.trim(), 'Posts');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mr. Whiskers' Blog</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Welcome to Mr. Whiskers' Blog Page!</h1>
<figure>
<figcaption>Mr. Whiskers in the Garden</figcaption>
</figure>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About</h2>
<p>
Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers.
</p>
<p>
His playful nature and boundless energy keeps me on my toes. I love him so much.
</p>
</section>
--fcc-editable-region--
--fcc-editable-region--
</main>
</body>
</html>