Internal Links
Instead of having to resort to the arduous task of scrolling down long pages, you can make your readers very happy by offering them page jumps as an alternative mode of transport around your site. As people have become lazier, page jumps have risen in popularity, so to avoid having your site unliked by the youth of today, implement these simple navigational aids.
This page was last updated on 2012-08-21
Section Names
Basically, page jumps are just links (they use the same <a> element as all links), but links that point to a certain part of a document. This is done by assigning names to parts of your page, and then making the link by referring to that section.
Page jumps are done by using the name attribute of the a element. So, say you wanted a link to the top of your page, you would add an anchor like this near the top of your document (inside the <body> element, of course):
<a name="top"></a>
There doesn’t need to be anything between the opening and closing tags. Then, in the place you want to place the link, put
<a href="#top">link to top</a>
Notice the hash mark (#). That tells the browser that it’s a section of a page it’s looking for, and not a separate page or folder. So just make a link to the section you named earlier (you can name the link to the top anything you want, but keeping it memorable and simple always works out best) by putting a # in front of whatever name you gave it. Always remember, the # goes in the href attribute’s value, not in the name.
Linking to parts of other documents
This is excellent. You can target specific sections of other pages by adding the #name bit on to the end of the href. The part after the hash mark is known as a “fragment identifier.” For instance, to link to the first section of this tutorial from somewhere else, you would write
<a href="http://www.yourhtmlsource.com/
text/internallinks.html#section-names">
Of course, the sections you can link to are restricted by which sections actually exist on the page you’re linking to. View the HTML source code (go to View > Source) of a page you want to link to and see if they have any sections named.
What to use it for
The obvious favourite to use this for is to link back to the top of the page from the bottom. This is because once you have scrolled down a bit, all the navigation links that are usually placed at the top of the page are lost. So if you link the person back up, they once again have links to the rest of your site in front of them.
Another popular implementation is to eliminate scrolling completely on long pages by splitting it up and having a row of links to the main headlines on the page, like we’ve done with our page navigation boxes near the top of each tutorial.
Naming Sections with id
A slightly more modern way of allowing links to be pointed at arbitrary parts of your page is to use the id attribute, which can be applied to any HTML element. This means you don’t need to keep setting up new empty a elements throughout your page; you can simply add a unique id value to an existing element.
For example, here’s how you set up a link using the charming old ways:
<a name="original"></a>
<h2>Original style, using named links.</h2>
Instead of introducing that superfluous a element, the new ways allow us to simply add an id attribute to our pre-existing heading element. Observe:
<h2 id="modern">Modern style, using id values.</h2>
You’ll note that throughout this site, I use the older style of internal links. That’s because this site has been going for a long time. Sanity requires that I don’t attempt to go back and update them all as it would take many moons, but if you’re making the decision on which style of internal links to use on a younger site, take the opportunity to use id attributes.
