Essential storage keeps sign-in and learning features working. Google Analytics measures visits; Microsoft Clarity records interactions to help us improve usability. Both are optional and stay off until you choose. Read our privacy policy.
Study the question, then follow the complete answer and its reasoning.
Replace generic containers with meaningful landmarks and article elements so a short community news page has a clear, navigable structure.
Use header and nav for the site introduction, main for unique page content, article for the story, and footer for closing information.
<header>
<p>Neighborhood Journal</p>
<nav aria-label="Article navigation">
<a href="#details">Opening details</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Community garden opens</h1>
<p>Published <time datetime="2026-09-09">September 9, 2026</time></p>
</header>
<p>Residents transformed an empty lot into a shared garden.</p>
<section id="details">
<h2>Opening details</h2>
<p>The garden opens every Saturday at 09:00.</p>
</section>
</article>
</main>
<footer>Report by the community desk.</footer>Landmarks expose the page's major regions, while article identifies a self-contained story. Heading levels describe the story's hierarchy. The fragment link targets a stable section ID, and datetime provides an unambiguous machine-readable date.
A news page is more than a stack of boxes. Landmarks let readers and assistive technology move between major regions, while article identifies a story that could stand on its own. Structured publication dates and reliable fragment links also make the content easier for software to interpret and people to navigate.
This beginner HTML exercise focuses on Choose elements by meaning, Create a useful document outline, Represent publication dates with time. Its requirements define the exact behavior to implement before you write code.
Start with the displayed example input and expected output, then test a boundary case suggested by the requirements. Edit the HTML, inspect the live preview, then run the checks before comparing your structure with the complete answer.
Attempt Structure a semantic news article first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.