Linking to sections using IDs in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a link that jumps to the section with ID 'contact'.

HTML

<a href="[1]">Go to Contact</a>
<section id="contact">
  <h2>Contact Us</h2>
</section>

Drag options to blanks, or click blank then click option'

Acontact.html

B/contact

C#contact

Dcontact

Attempts:

3 left

💡 Hint

Common Mistakes

Using the ID without the # symbol.

Linking to a file instead of a section ID.

Forgetting to add the ID attribute to the section.

The href attribute uses #contact to link to the section with the ID 'contact' on the same page.

2fill in blank

medium

Complete the code to add an ID to the section so the link can jump to it.

HTML

<section [1]>
  <h2>About Us</h2>
  <p>Welcome to our website.</p>
</section>

Drag options to blanks, or click blank then click option'

Aid="about"

Bname="about"

Cclass="about"

Dhref="#about"

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of id.

Using name attribute which is not valid for section.

Adding href attribute to section.

The id attribute uniquely identifies the section so links can jump to it.

3fill in blank

hard

Fix the error in the link so it correctly jumps to the 'services' section.

HTML

<a href="services">Our Services</a>
<section id="services">
  <h2>Services</h2>
</section>

Drag options to blanks, or click blank then click option'

Aservices.html

Bservices

C/services

D#services

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the # symbol in href.

Using a relative URL instead of an ID link.

Not matching the href with the section's ID.

The link must use #services to jump to the section with ID 'services' on the same page.

4fill in blank

hard

Fill both blanks to create a link and a section with matching IDs for navigation.

HTML

<a href="[1]">Jump to FAQ</a>
<section [2]>
  <h2>FAQ</h2>
</section>

Drag options to blanks, or click blank then click option'

A#faq

Bclass="faq"

Cid="faq"

Dhref="#faq"

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of id on the section.

Adding href attribute to the section.

Not matching the href and id values.

The link's href uses #faq to jump to the section with id="faq".

5fill in blank

hard

Fill all three blanks to create a navigation link that jumps to a section with a unique ID.

HTML

<nav>
  <a href="[1]">Go to Blog</a>
</nav>
<main>
  <article [2]>
    <h2>Blog Posts</h2>
    <p>Latest news and updates.</p>
  </article>
</main>
<footer [3]>
  <p>Footer content here.</p>
</footer>

Drag options to blanks, or click blank then click option'

A#blog

Bid="blog"

Cid="footer"

Dclass="footer"

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of id for the article or footer.

Not matching href and id values.

Adding href attribute to non-link elements.

The link uses #blog to jump to the article with id="blog". The footer has id="footer" for unique identification.