CreateaFreeWebsite  with Responsive Web Design

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.

<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?

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>

 

Free Tools We Recommend

Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the Geany Code Editor. You'll find it in your Linux Mint software repository. It's simple but powerful and FREE.
For image resizing we've found the easiest Linux tool to be Krita.

Have you tried out RWD template kit? Download Template #402 - 6 Page Kit

 

Click to Go Back to Top