🔗 Intradocument Linking

Intradocument linking is linking to a location on the same page and to specific locations on another web page.

To link to a specific location on a web page, use an anchor tag and the id attribute.

<h1 id="destination">Heading Text</h1>

The id attribute must be a unique value and can not contain spaces.

UNIQUE means it can only be used once on the same page.

The id can be added to any web page element that accepts global attributes.

The name specified in the id is preceded by a pound sign in the href and must match exactly.

Use ID Attribute for Linking

The id attribute provides the proper way for linking to specific locations.

👉 Click This Link Please!

Did you try it?

Here's the code for conventional web pages. We place a unique id in the h2 heading tag or other element:
<h2 id="intradocument">Intradocument Linking</h2>

The link that jumps to that location looks like this:
<a href="#intradocument">Click this Link</a>

You can also use the id attribute on paragraph tags and other page elements to use for jumping to locations on a page.

Designate Location on Another Page

The id attribute can be used to go to a specific location on another page.

The id is placed on the page at the desired location.

To link to that page and location the code would be:

<a href="samesite.htm#destination_name">Another Page</a>

If the link is in a sub folder and the destination is in the main folder you can use:

<a href="../samesite.htm#destination_name">Web Page in Main Folder</a>

👉See: Id Attribute

Top Button as an Intradocument Link

👉 Top👈

While we're at it: How do you make a Top Button?

Very Basic HTML

<p><a href="#heading" class="top-button">Top</a></p>

Specify the location you want to jump to like so:

<header id="heading">

💡 Time Out for a teaching Moment

In CSS, the !important declaration is used to give a specific style rule the highest priority, overriding any other conflicting rules, regardless of specificity or source order. It ensures that the style is applied no matter what.(From Copilot)

We use it in the CSS on the right (once again because I'm LAZY) to override the settings for the anchor tags in the main division.

The CSS

p a.top-button {
width: 40px;
color: #fff !important;
background: #0066cc;
box-shadow: 2px 2px 4px #000;
border: none;
border-radius: 90%;
margin: 0 auto
}

p a.top-button {
font-family: Roboto , arial;
font-size: 18px;
text-align: center;
font-weight: bold;
text-shadow : 1px 1px 1px #000;
text-decoration: none;
padding: 1.5% 1%;
}

p a:hover.top-button {
color: #000 !important;
background-color: #fff;
box-shadow: 2px 2px 6px #000 inset;
text-shadow:none;
border: none;
}

Free Tools and Resources

Tree Image from Thiings Cat Image from Thiings Have you found Thiings yet?.
Over 6000 Free 3D images that you can download (individually or the complete set) and use for personal or commercial projects. You have got to SEE this!!

Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅

Have you tried our NEWEST template kit with scrolling columns? Download Template Kit #601 - 4 Page Kit or Test Drive It!