The “Combo Link”

You usually use these within-page links when you have a long article and want to be able to get from one part to another without having to do a lot of scrolling. You can see an example at the right, which is a portion of a file named intl.html.

<h2>International Travel</h2>
<ul>
<li><a href="#passport">Getting a Passport</a>
<li><a href="#packing">Packing</a>
<!-- etc. -->
</ul>
    .
    Lots of introductory text
    .
<a id="passport"></a>
<h2>Getting a Passport</h2>
    .
    Lots of text about legal issues
    .
<a id="packing"></a>
<h2>Packing Made Easy</h2>
    .
    Lots of text about packing
    .

What if this is just one part of a website about travel? Wouldn’t it be nice to have a main index page that has links not only to the main topics but also to the subtopics within the page, as you see below:

The last two links would be a “combo platter” that combine a link to a specific page with a link to an anchor within that page.

To make a combo link, just follow the destination file’s pathname with a pound sign and the anchor name.

Here’s the code for the links that you see above. The combo links are in red.

<ul>
<li><a href="history.html">Chapter 1: History of Travel</a>
<li><a href="domestic.html">Chapter 2: Domestic Travel</a>
<li><a href="intl.html">Chapter 3: International Travel</a>
  <ul>
  <li><a href="intl.html#passport">Passports</a>
  <li><a href="intl.html#packing">Packing</a>
  </ul>
</ul>
 << Within-page links Index Common Mistakes >>