Certified HTML5 Developer | Linking to a Specific Part of a Page

Learning Resources
 

Linking to a Specific Part of a Page


What is an Anchor Link?

An anchor link allows users to jump to a specific section of a webpage. This is useful for long pages where you want to provide quick navigation.


Step-by-Step Guide


1. Assign an ID to the Target Section

To link to a specific part of a page, first, you need to assign an id to the section you want to jump to.

<h2 id="contact">Contact Us</h2>
<p>You can reach us via email or phone.</p>

2. Create the Anchor Link

Now, create a link (<a> tag) that points to the id of the section.

<a href="#contact">Go to Contact Section</a>

Clicking on this link will take the user directly to the Contact Us section.

3. Link to a Specific Section from Another Page

If you want to link to a section on another page, use the page URL followed by #id.

<a href="about.html#team">Meet Our Team</a>

This will take users to the "team" section inside about.html.

4. Smooth Scrolling Effect (Optional)

To make the transition smoother, you can add CSS:

html { scroll-behavior: smooth; }

This ensures a smooth scroll effect when jumping to the section.


Practice Example

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Anchor Links Example</title> <style> html { scroll-behavior: smooth; } section { height: 100vh; /* Just for demo purposes */ padding: 20px; border-bottom: 1px solid #ccc; } </style> </head> <body> <h1>HTML5 Anchor Link Example</h1> <a href="#section2">Jump to Section 2</a> | <a href="#section3">Jump to Section 3</a> <section id="section1"> <h2>Section 1</h2> <p>Content for section 1.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>Content for section 2.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>Content for section 3.</p> </section> </body> </html>
 For Support