Intradocument Linking

Same Page Links

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.

<a href="#destination"></a>

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

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

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?

Okay! We're using a different method here, because we're within an iframe.

But, 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>

More Examples of Intradocument Links and Ids

Link: <a href="#destination"></a>
Id attribute: <header class="toppage" id="destination">Site Heading Text</header>

Link: <a href="#namelist"></a>
Id attribute: <ul id="namelist">

Link: <a href="#pagebottom"></a>
Id attribute: <footer id="pagebottom">footer information</footer>