Internal and Bookmark Links.

Internal links allow users to jump to specific sections within the same page or link to other pages on the same website.

The Essentials

Bookmark links use the '#' symbol followed by an 'id'.

To create a target, give an element a unique 'id' attribute.

A relative path (like '/about') links to another page in the same folder.

Internal links are essential for 'Single Page' navigation (TOCs).

They help users quickly find information on long pages.

The browser's URL updates to include the hash (e.g., page.html#section).

Professional Insights

Smooth Scrolling

Modern browsers can animate the jump to an internal ID. By adding 'scroll-behavior: smooth;' to your CSS, the transition feels professional and fluid.

IDs Must Be Unique

If you have two elements with the same ID, an internal link will only jump to the first one it finds. Always ensure IDs are unique per page.

Search Engine Deep Linking

Google can display internal section links directly in search results (Sitelinks), allowing users to jump straight to the relevant answer on your page.

Critical Pitfalls

Forgetting the '#' symbol in the href (e.g., href='section' instead of href='#section').

Linking to an ID that doesn't exist on the page.

Using duplicate IDs, which breaks the navigation target.

Using spaces in ID names (e.g., id='my section'). IDs must be one word or use hyphens.

Interactive Lab

Sprint Tasks

Give the h2 tag an id of 'details'

Create a link at the top that jumps to the 'details' section

Loading editor...

Production Preview