6.3 Linking within pages

You may have noticed web pages before that have topical links near the top of the page that if clicked upon will take you lower down the same page to a relevant section or sub-heading. These are internal page links. To make these, an attribute called id (identification) and the hash symbol # are used in tandem (take note that an id attribute name must start with a letter).

The id attribute marks the element to which the link is required. In other words, this would be the sub-heading lower down the page. For example:

<h1 id="heading1">Heading No. 1</h1>

The link at the top of the page can be created to that element by using # in the link attribute. The # must be followed by the id of the tag you want to link to. For example:

<a href="#heading1">Link to heading No. 1</a>

Putting it all together would look something like this:

<html>
 <head>
 </head>
 <body>
   <a href="#heading1">1.0 Content is King</a>
   <a href="#heading2">2.0 Images are cool too!</a>
   <a href="#heading3">3.0 Another Link</a>
   <a href="#heading4">4.0 And another Link</a>
   <a href="#heading5">5.0 And yet another Link</a>

   <h2 id="heading1">1.0 Content is King</h2>
   <p>This is the information age and original page content is the most
   vauluable part of any website. After all, it is the content that is
   indexed by the search engines, and it is the content that visitors
   will be searching for...</p>

   <h2 id="heading2">2.0 Images are cool too!</h2>
   <p>Images are great for adding interest to page layout, breaking up
   large chunks of text, and for adding clarity to whatever the content
   is explaining...</p>

   ...etc...

Click here to see the result.