Linking to sections using IDs in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What happens when you click this link?

Given the HTML below, what will the browser do when the user clicks the link labeled Go to Section 2?

HTML

<nav>
  <a href="#section2">Go to Section 2</a>
</nav>
<main>
  <section id="section1">
    <h2>Section 1</h2>
    <p>Welcome to section one.</p>
  </section>
  <section id="section2">
    <h2>Section 2</h2>
    <p>This is the second section.</p>
  </section>
</main>

A The page reloads and shows Section 1 at the top.

B The page scrolls to the top of Section 2.

C Nothing happens because the link is broken.

D The browser opens a new tab with Section 2 content.

💡 Hint

Look at the href attribute and the id attributes of the sections.

The link's href="#section2" points to the element with id="section2". Clicking it scrolls the page to that section.

📝 Syntax

intermediate

Which anchor tag correctly links to the section with id="contact"?

Choose the correct anchor tag that links to the section with id="contact".

A <a href="section#contact">Contact Us</a>

B <a href="contact">Contact Us</a>

C <a href="#contact">Contact Us</a>

D <a href="/contact">Contact Us</a>

💡 Hint

Links to sections on the same page use a hash (#) followed by the id.

To link to a section on the same page, the href must start with # followed by the exact id value.

❓ selector

advanced

Which CSS selector targets the section linked by <a href="#about">?

You have a link <a href="#about">About</a>. Which CSS selector will style the section it links to?

A section[href="#about"]

B a[href="#about"]

C #about a

D section#about

💡 Hint

The link points to an element with id="about". How do you select an element by id?

The section with id="about" is selected by the CSS selector section#about. The other options select links or invalid attributes.

❓ layout

advanced

How to keep the linked section visible below a fixed header?

You have a fixed header 60px tall. When clicking a link to a section with an ID, the section's top is hidden behind the header. How can you fix this so the section content is fully visible below the header?

A Add padding-top: 60px and margin-top: -60px to the section with the ID.

B Add margin-bottom: 60px to the section with the ID.

C Add padding-bottom: 60px to the fixed header.

D Add margin-top: 60px to the fixed header.

💡 Hint

Think about shifting the section content down without changing layout flow.

Adding padding-top equal to header height and negative margin-top of same size shifts the section content down so it is visible below the fixed header.

❓ accessibility

expert

What ARIA attribute improves accessibility for links to page sections?

When linking to a section on the same page using an anchor with href="#sectionID", which ARIA attribute helps screen readers understand the link's purpose better?

A aria-label="Jump to Section"

B aria-hidden="true"

C aria-live="polite"

D aria-disabled="true"

💡 Hint

Think about how to describe the link clearly for screen readers.

Using aria-label provides a clear description of the link's purpose, helping screen reader users understand it links to a specific section.