Linking Inside a Page

Most bloggers aren’t trained webmasters, but manage to pick up enough HTML to be dangerous along the way. Occasionally, though, this haphazard approach leaves a gap in our expertise that needs filling. For example, not all bloggers are aware of HTML fragments.

A fragment is a name that you apply to an element of a web page. For example, you might identify a heading as a fragment named “heading1″. Doing this is useful because you can then link to that section of the page, allowing your users to instantly jump to that spot. You’ve probably seen this sort of thing in tables of contents on long articles or in “Return to the Top” links. These are examples of fragments in action.

To create a fragment, all you do is add id=”fragment-name” to the HTML enclosing the element to be identified. This could be a heading, a paragraph, an arbitrary span, or whatever else is used to identify that spot. Suppose you want to create a fragment around a specific paragraph. The code would look like this:

<p id="fragment-name">Text of the paragraph...</p>

To link to a fragment, you create a normal link to the web page and add#fragment-name to the end of the link.

<a
href="http://www.domain-name.com/page-name.php#fragment-name">
link text</a>

The W3C’s article on links in HTML documents is both a perfect example and a handy resource for fragment use. If you view the source code, you can see how they take a systematic approach to naming the headings of page sections and linking those sections in their table of contents.

This may or may not be useful for blog posts, which are rarely long enough to require additional navigation. However, it certainly can be useful for a blog’s larger static pages, such as (in Daniel’s case) an “About Us” page featuring multiple authors.