Linking to sections using IDs in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of using an ID attribute in HTML?

An ID attribute gives a unique name to an element on the page. It helps to link directly to that element or style it uniquely.

beginner

How do you create a link that jumps to a specific section on the same page?

Use an anchor tag with href set to '#' followed by the section's ID. For example, <a href="#section1">Go to Section 1</a>.

beginner

What happens when you click a link with href="#someID"?

The browser scrolls or jumps instantly to the element with the matching ID 'someID' on the page.

beginner

Can multiple elements have the same ID on a page? Why or why not?

No, IDs must be unique on a page. If multiple elements share the same ID, linking and styling can break or behave unpredictably.

beginner

How do you assign an ID to a section element in HTML?

Add the ID attribute inside the opening tag. For example: <section id="about">...</section>.

Which attribute do you use to link to a section with ID 'contact' on the same page?

A href="#contact"

B src="#contact"

C link="#contact"

D id="#contact"

To link to a section on the same page, use href="#ID" where ID is the target element's ID.

What must be true about IDs used for linking in HTML?

A They must start with a number

B They can be repeated multiple times

C They must be unique on the page

D They are optional for linking

IDs must be unique so the browser knows exactly where to jump when a link is clicked.

What tag is used to create a clickable link in HTML?

A <div>

B <a>

C <link>

D <section>

The tag creates clickable links in HTML.

If you want to link to a section with

, what is the correct link?

A <a href="features">Features</a>

B <a src="#features">Features</a>

C <a id="#features">Features</a>

D <a href="#features">Features</a>

Use href="#features" to link to the section with ID 'features'.

What is the visual effect when clicking a link to an ID on the same page?

A The browser scrolls or jumps to that section

B The link opens in a new tab

C Nothing happens

D The page reloads

Clicking the link scrolls or jumps the page to the element with the matching ID.

Explain how to create a link that jumps to a specific section on the same page using IDs.

Think about how you name the section and how the link refers to that name.

Why is it important that IDs are unique when linking to sections in HTML?

What happens if two sections have the same ID?

Practice

1. What is the purpose of the id attribute in HTML when linking to sections?

easy

A. It hides the section from the page.

B. It styles the section with a unique color automatically.

C. It marks a section so you can link directly to it using an anchor.

D. It creates a new page in the browser.

Solution

1. Step 1: Understand the role of the id attribute

   The id attribute uniquely identifies an element on the page.

2. Step 2: Linking to sections using id

   Links with href="#id" jump directly to the element with that id.

3. Final Answer:

   It marks a section so you can link directly to it using an anchor. -> Option C

4. Quick Check:

   id marks section for linking [OK]

Hint: Use id to name sections for direct links [OK]

Common Mistakes:

• Thinking id changes style automatically
• Confusing id with class
• Believing id creates new pages

2. Which of the following is the correct syntax to link to a section with id="contact"?

easy

A. <a href="#contact">Contact</a>

B. <a link="#contact">Contact</a>

C. <a id="contact">Contact</a>

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

Solution

1. Step 1: Identify how to link to an id

   Links to sections use href="#id" where id is the target's identifier.

2. Step 2: Check each option's syntax

   <a href="#contact">Contact</a> uses href="#contact", which is correct. Others miss the # or use wrong attributes.

3. Final Answer:

   <a href="#contact">Contact</a> -> Option A

4. Quick Check:

   Link uses href="#id" [OK]

Hint: Use # before id in href to link sections [OK]

Common Mistakes:

• Omitting the # in href
• Using id attribute inside <a> instead of href
• Using non-standard attributes like link

3. Given this HTML snippet, what happens when the user clicks the link?

<a href="#about">About Us</a>
...
<section id="about">
  <h2>About Our Company</h2>
  <p>We build websites.</p>
</section>

medium

A. Nothing happens because the link is broken.

B. The page scrolls to the section with heading 'About Our Company'.

C. The browser opens a new tab with the 'about' page.

D. The page reloads to the top.

Solution

1. Step 1: Understand the link's href attribute

   The link uses href="#about", which targets the element with id="about".

2. Step 2: Describe browser behavior on clicking such a link

   The browser scrolls smoothly to the element with that id, showing the 'About Our Company' section.

3. Final Answer:

   The page scrolls to the section with heading 'About Our Company'. -> Option B

4. Quick Check:

   href="#id" scrolls to that section [OK]

Hint: Clicking href="#id" scrolls to that section [OK]

Common Mistakes:

• Thinking it opens a new page
• Assuming the link does nothing
• Believing it reloads the page

4. What is wrong with this code if the link does not jump to the section?

<a href="#services">Our Services</a>
...
<section id="service">
  <h2>Services Offered</h2>
</section>

medium

A. The href attribute should not have a #.

B. The link text must match the section heading exactly.

C. The section tag cannot have an id.

D. The id in the section does not match the href value.

Solution

1. Step 1: Compare href and id values

   The link uses href="#services" but the section has id="service" (missing 's').

2. Step 2: Understand matching requirement

   For the link to work, the href must exactly match the target element's id.

3. Final Answer:

   The id in the section does not match the href value. -> Option D

4. Quick Check:

   href and id must match exactly [OK]

Hint: Check href and id spellings match exactly [OK]

Common Mistakes:

• Forgetting the # in href
• Using wrong or mismatched id names
• Thinking link text affects the jump

5. You want to create a navigation menu that links to three sections: Home, About, and Contact. Which HTML snippet correctly sets up the links and sections using IDs?

hard

A.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

<section id="home">Welcome!</section>
<section id="about">About us info</section>
<section id="contact">Contact details</section>

B.

<nav>
  <a href="home">Home</a>
  <a href="about">About</a>
  <a href="contact">Contact</a>
</nav>

<section id="home">Welcome!</section>
<section id="about">About us info</section>
<section id="contact">Contact details</section>

C.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

<section id="home-section">Welcome!</section>
<section id="about-section">About us info</section>
<section id="contact-section">Contact details</section>

D.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

<section id="home">Welcome!</section>
<section id="about">About us info</section>
<section>Contact details</section>

Solution

1. Step 1: Check href values in navigation links

   Links use href="#home", href="#about", and href="#contact" which is correct syntax to link to IDs.

2. Step 2: Verify matching section IDs

   Sections have matching id="home", id="about", and id="contact" exactly matching the href targets.

3. Final Answer:

   Option A correctly links navigation anchors to matching section IDs. -> Option A

4. Quick Check:

   Matching href="#id" and section id [OK]

Hint: Match href="#id" exactly with section id [OK]

Common Mistakes:

• Omitting # in href
• Mismatching href and id names
• Missing id attribute on sections