0
0
HTMLmarkup~30 mins

Linking to sections using IDs in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Linking to Sections Using IDs
📖 Scenario: You are creating a simple webpage for a small business. The page has multiple sections like Home, About, and Contact. You want visitors to jump quickly to these sections by clicking links at the top.
🎯 Goal: Build a webpage with a navigation menu at the top. Each menu item links to a specific section on the same page using IDs. When a visitor clicks a menu link, the page scrolls to that section.
📋 What You'll Learn
Create three sections with headings: Home, About, Contact
Assign unique IDs to each section
Create a navigation menu with links that use the IDs to jump to each section
Use semantic HTML elements for structure
💡 Why This Matters
🌍 Real World
Websites often have navigation menus that let users jump to different parts of the page quickly. Using IDs and links is a simple way to do this.
💼 Career
Knowing how to link to sections using IDs is a basic but essential skill for front-end web developers and content creators to improve user experience and accessibility.
Progress0 / 4 steps
1
Create the basic HTML structure with sections
Write the basic HTML5 skeleton with a <main> element containing three <section> elements. Each section should have a heading: Home, About, and Contact. Do not add IDs yet.
HTML
Need a hint?

Use <main> to wrap the main content. Inside it, add three <section> elements each with an <h2> heading for Home, About, and Contact.

2
Add unique IDs to each section
Add the IDs home, about, and contact to the <section> elements for Home, About, and Contact respectively.
HTML
Need a hint?

Use the id attribute inside each <section> tag. For example, <section id="home">.

3
Create a navigation menu with links to sections
Add a <nav> element above the <main>. Inside it, create an unordered list <ul> with three list items <li>. Each list item should have a link <a> that uses the href attribute to link to the IDs #home, #about, and #contact with link text Home, About, and Contact respectively.
HTML
Need a hint?

Use <nav> for navigation. Inside it, add <ul> with <li> items. Each <a> tag's href should start with # followed by the section ID.

4
Add accessibility features and finalize structure
Add an aria-label="Primary navigation" attribute to the <nav> element for accessibility. Also, add a <header> element wrapping the <nav> to improve semantic structure.
HTML
Need a hint?

Wrap the <nav> inside a <header> tag. Add aria-label="Primary navigation" to the <nav> for screen readers.