Internal Page Links in HTML

Internal page links (also called anchor links or jump links) allow users to navigate directly to specific sections within the same page. They're perfect for long pages, tables of contents, and improving user navigation.

What Are Fragment Identifiers?

A fragment identifier is the part of a URL that comes after the hash symbol (#). It tells the browser to scroll to a specific element on the page.

url-structure.html

https://example.com/page.html#section-name
                                    │
                                    └─ Fragment identifier (also called hash)

Creating Internal Anchor Links

To create internal page links, you need two things:

A target element with an id attribute
A link with an href that points to that id

Step-by-Step Process

Step 1: Add an id attribute to the element you want to link to:

target-element.html

<h2 id="about">About Us</h2>

<section id="services">
  <h2>Our Services</h2>
  <!-- content -->
</section>

<div id="contact-form">
  <!-- contact form content -->
</div>

Step 2: Create a link using href="#id":

anchor-links.html

<a href="#about">Jump to About Section</a>

<a href="#services">View Our Services</a>

<a href="#contact-form">Go to Contact Form</a>

Complete Example

Here's a full page with a table of contents and internal links:

complete-example.html

<!DOCTYPE html>
<html>
  <head>
    <title>Article with Table of Contents</title>
  </head>
  <body>
    <header>
      <h1>Complete Guide to Web Development</h1>
    </header>

    <!-- Table of Contents -->
    <nav>
      <h2>Table of Contents</h2>
      <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#html-section">HTML Basics</a></li>
        <li><a href="#css-section">CSS Styling</a></li>
        <li><a href="#javascript-section">JavaScript</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
      </ul>
    </nav>

    <!-- Content Sections -->
    <main>
      <section id="introduction">
        <h2>Introduction</h2>
        <p>Welcome to our comprehensive guide...</p>
        <p><a href="#top">Back to top</a></p>
      </section>

      <section id="html-section">
        <h2>HTML Basics</h2>
        <p>HTML is the foundation of web development...</p>
        <p><a href="#top">Back to top</a></p>
      </section>

      <section id="css-section">
        <h2>CSS Styling</h2>
        <p>CSS makes your websites beautiful...</p>
        <p><a href="#top">Back to top</a></p>
      </section>

      <section id="javascript-section">
        <h2>JavaScript</h2>
        <p>JavaScript adds interactivity...</p>
        <p><a href="#top">Back to top</a></p>
      </section>

      <section id="conclusion">
        <h2>Conclusion</h2>
        <p>Thank you for reading...</p>
        <p><a href="#top">Back to top</a></p>
      </section>
    </main>
  </body>
</html>

Creating "Back to Top" Links

You can create a link that scrolls back to the top of the page in several ways:

back-to-top.html

<!-- Method 1: Link to an element with id="top" -->
<body id="top">
  <!-- content -->
  <a href="#top">Back to Top</a>
</body>

<!-- Method 2: Link to the body or html element -->
<a href="#" onclick="window.scrollTo(0,0); return false;">Back to Top</a>

<!-- Method 3: Empty hash (scrolls to top) -->
<a href="#">Back to Top</a>

ID Naming Best Practices

When creating IDs for internal links, follow these rules and best practices:

📋 Rules for ID attributes:

Must be unique within the page (no duplicate IDs)
Cannot start with a number
Case-sensitive (Section1 ≠ section1)
Cannot contain spaces
Should not contain special characters except dash (-) and underscore (_)

id-examples.html

<!-- ✅ Good ID names -->
<section id="about-us">
<div id="main-content">
<h2 id="section-1">
<article id="blog_post_123">

<!-- ❌ Bad ID names -->
<section id="1-section">    <!-- Can't start with number -->
<div id="main content">      <!-- No spaces allowed -->
<h2 id="about us">           <!-- No spaces allowed -->
<article id="section!">      <!-- Avoid special characters -->

Practical Use Cases

Documentation Pages

documentation.html

<nav>
  <h2>API Documentation</h2>
  <ul>
    <li><a href="#getting-started">Getting Started</a></li>
    <li><a href="#authentication">Authentication</a></li>
    <li><a href="#endpoints">API Endpoints</a></li>
    <li><a href="#examples">Code Examples</a></li>
    <li><a href="#troubleshooting">Troubleshooting</a></li>
  </ul>
</nav>

<section id="getting-started">
  <h2>Getting Started</h2>
  <!-- content -->
</section>

<section id="authentication">
  <h2>Authentication</h2>
  <!-- content -->
</section>

FAQ Pages

faq.html

<nav>
  <h2>Frequently Asked Questions</h2>
  <ul>
    <li><a href="#what-is-html">What is HTML?</a></li>
    <li><a href="#how-to-start">How do I get started?</a></li>
    <li><a href="#browser-support">Which browsers are supported?</a></li>
  </ul>
</nav>

<article id="what-is-html">
  <h3>What is HTML?</h3>
  <p>HTML stands for HyperText Markup Language...</p>
</article>

<article id="how-to-start">
  <h3>How do I get started?</h3>
  <p>To get started, you'll need a text editor...</p>
</article>

Single-Page Websites

single-page.html

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#portfolio">Portfolio</a>
  <a href="#contact">Contact</a>
</nav>

<section id="home">
  <!-- Home content -->
</section>

<section id="about">
  <!-- About content -->
</section>

<section id="services">
  <!-- Services content -->
</section>

Linking to Sections on Other Pages

You can also link directly to a specific section on a different page:

external-section.html

<!-- Link to section on another page in your site -->
<a href="about.html#team">Meet Our Team</a>

<!-- Link to section on external website -->
<a href="https://example.com/docs.html#installation">
  Installation Instructions
</a>

<!-- Link to section on same page -->
<a href="#contact">Contact Us</a>

Smooth Scrolling

By default, clicking an anchor link instantly jumps to the target section. You can enable smooth scrolling with CSS:

smooth-scroll.css

html {
  scroll-behavior: smooth;
}

Add this CSS to make all anchor links scroll smoothly!

Accessibility Considerations

Use descriptive link text that makes sense out of context
Ensure target sections have proper heading structure
Test with keyboard navigation (Tab key should work)
Make sure focused elements are visually indicated
Consider users who may be disoriented by sudden scrolling
Provide "Skip to content" links for keyboard users

Skip Navigation Link

A common accessibility pattern is adding a "skip to content" link at the top of the page:

skip-nav.html

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  
  <nav>
    <!-- Navigation menu -->
  </nav>
  
  <main id="main-content">
    <!-- Main content starts here -->
  </main>
</body>

Common Mistakes to Avoid

❌ Common mistakes:

Forgetting the # symbol in href: href="section" instead of href="#section"
Using duplicate IDs on the same page
ID spelling doesn't match the href value
Using spaces in ID names
Not testing links after adding new sections
Creating IDs that start with numbers

Testing Internal Links

Always test your internal links to ensure they work correctly:

Click each link to verify it scrolls to the correct section
Check that all IDs are unique
Verify IDs match the href values exactly (case-sensitive)
Test with different screen sizes and browsers
Use browser DevTools to inspect elements and verify IDs

Best Practices

✅ Best practices:

Use descriptive, semantic ID names
Keep ID names lowercase with dashes for spaces
Ensure all IDs are unique within a page
Add "back to top" links on long pages
Consider adding smooth scrolling with CSS
Test all internal links thoroughly
Use table of contents for long articles
Make navigation obvious and accessible

Key Takeaways

Fragment identifiers use the hash (#) symbol
Target elements need unique id attributes
Links use href="#id-name" to jump to sections
IDs must be unique, cannot start with numbers, and are case-sensitive
Perfect for tables of contents, FAQs, and long pages
Can link to sections on the same page or different pages
Enable smooth scrolling with CSS for better UX
Always test internal links to ensure they work correctly

What's Next?

Congratulations! You've completed the Links and Navigation section. You now know how to create all types of links: basic links, external links, email and phone links, and internal page links.

In the next section, we'll move on to Images and Media. You'll learn how to add images to your web pages, work with different image formats, and embed audio and video content.

What Are Fragment Identifiers?

A fragment identifier is the part of a URL that comes after the hash symbol (#). It tells the browser to scroll to a specific element on the page.

url-structure.html

https://example.com/page.html#section-name
                                    │
                                    └─ Fragment identifier (also called hash)

Creating Internal Anchor Links

To create internal page links, you need two things:

A target element with an id attribute
A link with an href that points to that id

Step-by-Step Process

Step 1: Add an id attribute to the element you want to link to:

target-element.html

<h2 id="about">About Us</h2>

<section id="services">
  <h2>Our Services</h2>
  <!-- content -->
</section>

<div id="contact-form">
  <!-- contact form content -->
</div>

Step 2: Create a link using href="#id":

anchor-links.html

<a href="#about">Jump to About Section</a>

<a href="#services">View Our Services</a>

<a href="#contact-form">Go to Contact Form</a>

Complete Example

Here's a full page with a table of contents and internal links:

complete-example.html

<!DOCTYPE html>
<html>
  <head>
    <title>Article with Table of Contents</title>
  </head>
  <body>
    <header>
      <h1>Complete Guide to Web Development</h1>
    </header>

    <!-- Table of Contents -->
    <nav>
      <h2>Table of Contents</h2>
      <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#html-section">HTML Basics</a></li>
        <li><a href="#css-section">CSS Styling</a></li>
        <li><a href="#javascript-section">JavaScript</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
      </ul>
    </nav>

    <!-- Content Sections -->
    <main>
      <section id="introduction">
        <h2>Introduction</h2>
        <p>Welcome to our comprehensive guide...</p>
        <p><a href="#top">Back to top</a></p>
      </section>

      <section id="html-section">
        <h2>HTML Basics</h2>
        <p>HTML is the foundation of web development...</p>
        <p><a href="#top">Back to top</a></p>
      </section>

      <section id="css-section">
        <h2>CSS Styling</h2>
        <p>CSS makes your websites beautiful...</p>
        <p><a href="#top">Back to top</a></p>
      </section>

      <section id="javascript-section">
        <h2>JavaScript</h2>
        <p>JavaScript adds interactivity...</p>
        <p><a href="#top">Back to top</a></p>
      </section>

      <section id="conclusion">
        <h2>Conclusion</h2>
        <p>Thank you for reading...</p>
        <p><a href="#top">Back to top</a></p>
      </section>
    </main>
  </body>
</html>

Creating "Back to Top" Links

You can create a link that scrolls back to the top of the page in several ways:

back-to-top.html

<!-- Method 1: Link to an element with id="top" -->
<body id="top">
  <!-- content -->
  <a href="#top">Back to Top</a>
</body>

<!-- Method 2: Link to the body or html element -->
<a href="#" onclick="window.scrollTo(0,0); return false;">Back to Top</a>

<!-- Method 3: Empty hash (scrolls to top) -->
<a href="#">Back to Top</a>

ID Naming Best Practices

When creating IDs for internal links, follow these rules and best practices:

📋 Rules for ID attributes:

Must be unique within the page (no duplicate IDs)
Cannot start with a number
Case-sensitive (Section1 ≠ section1)
Cannot contain spaces
Should not contain special characters except dash (-) and underscore (_)

id-examples.html

<!-- ✅ Good ID names -->
<section id="about-us">
<div id="main-content">
<h2 id="section-1">
<article id="blog_post_123">

<!-- ❌ Bad ID names -->
<section id="1-section">    <!-- Can't start with number -->
<div id="main content">      <!-- No spaces allowed -->
<h2 id="about us">           <!-- No spaces allowed -->
<article id="section!">      <!-- Avoid special characters -->

Practical Use Cases

Documentation Pages

documentation.html

<nav>
  <h2>API Documentation</h2>
  <ul>
    <li><a href="#getting-started">Getting Started</a></li>
    <li><a href="#authentication">Authentication</a></li>
    <li><a href="#endpoints">API Endpoints</a></li>
    <li><a href="#examples">Code Examples</a></li>
    <li><a href="#troubleshooting">Troubleshooting</a></li>
  </ul>
</nav>

<section id="getting-started">
  <h2>Getting Started</h2>
  <!-- content -->
</section>

<section id="authentication">
  <h2>Authentication</h2>
  <!-- content -->
</section>

FAQ Pages

faq.html

<nav>
  <h2>Frequently Asked Questions</h2>
  <ul>
    <li><a href="#what-is-html">What is HTML?</a></li>
    <li><a href="#how-to-start">How do I get started?</a></li>
    <li><a href="#browser-support">Which browsers are supported?</a></li>
  </ul>
</nav>

<article id="what-is-html">
  <h3>What is HTML?</h3>
  <p>HTML stands for HyperText Markup Language...</p>
</article>

<article id="how-to-start">
  <h3>How do I get started?</h3>
  <p>To get started, you'll need a text editor...</p>
</article>

Single-Page Websites

single-page.html

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#portfolio">Portfolio</a>
  <a href="#contact">Contact</a>
</nav>

<section id="home">
  <!-- Home content -->
</section>

<section id="about">
  <!-- About content -->
</section>

<section id="services">
  <!-- Services content -->
</section>

Linking to Sections on Other Pages

You can also link directly to a specific section on a different page:

external-section.html

<!-- Link to section on another page in your site -->
<a href="about.html#team">Meet Our Team</a>

<!-- Link to section on external website -->
<a href="https://example.com/docs.html#installation">
  Installation Instructions
</a>

<!-- Link to section on same page -->
<a href="#contact">Contact Us</a>

Smooth Scrolling

By default, clicking an anchor link instantly jumps to the target section. You can enable smooth scrolling with CSS:

smooth-scroll.css

html {
  scroll-behavior: smooth;
}

Add this CSS to make all anchor links scroll smoothly!

Accessibility Considerations

Use descriptive link text that makes sense out of context
Ensure target sections have proper heading structure
Test with keyboard navigation (Tab key should work)
Make sure focused elements are visually indicated
Consider users who may be disoriented by sudden scrolling
Provide "Skip to content" links for keyboard users

Skip Navigation Link

A common accessibility pattern is adding a "skip to content" link at the top of the page:

skip-nav.html

<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  
  <nav>
    <!-- Navigation menu -->
  </nav>
  
  <main id="main-content">
    <!-- Main content starts here -->
  </main>
</body>

Common Mistakes to Avoid

❌ Common mistakes:

Forgetting the # symbol in href: href="section" instead of href="#section"
Using duplicate IDs on the same page
ID spelling doesn't match the href value
Using spaces in ID names
Not testing links after adding new sections
Creating IDs that start with numbers

Testing Internal Links

Always test your internal links to ensure they work correctly:

Click each link to verify it scrolls to the correct section
Check that all IDs are unique
Verify IDs match the href values exactly (case-sensitive)
Test with different screen sizes and browsers
Use browser DevTools to inspect elements and verify IDs

Best Practices

✅ Best practices:

Use descriptive, semantic ID names
Keep ID names lowercase with dashes for spaces
Ensure all IDs are unique within a page
Add "back to top" links on long pages
Consider adding smooth scrolling with CSS
Test all internal links thoroughly
Use table of contents for long articles
Make navigation obvious and accessible

Key Takeaways

Fragment identifiers use the hash (#) symbol
Target elements need unique id attributes
Links use href="#id-name" to jump to sections
IDs must be unique, cannot start with numbers, and are case-sensitive
Perfect for tables of contents, FAQs, and long pages
Can link to sections on the same page or different pages
Enable smooth scrolling with CSS for better UX
Always test internal links to ensure they work correctly

What's Next?

Congratulations! You've completed the Links and Navigation section. You now know how to create all types of links: basic links, external links, email and phone links, and internal page links.

In the next section, we'll move on to Images and Media. You'll learn how to add images to your web pages, work with different image formats, and embed audio and video content.

Internal Page Links

What Are Fragment Identifiers?

Creating Internal Anchor Links

Step-by-Step Process

Complete Example

Creating "Back to Top" Links

ID Naming Best Practices

Practical Use Cases

Documentation Pages

FAQ Pages

Single-Page Websites

Linking to Sections on Other Pages

Smooth Scrolling

Accessibility Considerations

Skip Navigation Link

Common Mistakes to Avoid

Testing Internal Links

Best Practices

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New HTML Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

Menu

Internal Page Links

What Are Fragment Identifiers?

Creating Internal Anchor Links

Step-by-Step Process

Complete Example

Creating "Back to Top" Links

ID Naming Best Practices

Practical Use Cases

Documentation Pages

FAQ Pages

Single-Page Websites

Linking to Sections on Other Pages

Smooth Scrolling

Accessibility Considerations

Skip Navigation Link

Common Mistakes to Avoid

Testing Internal Links

Best Practices

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New HTML Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

Menu