Linking Inside a Page

Gregory Ciotti

background image

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.

Browse all articles on the Blog Design category

21 Responses to “Linking Inside a Page”

  • rahab

    How do a use this on a blogger website.

  • Bang Kritikus

    I don’t use

  • Tom

    New ideas, I must say I have not used this concept before. I will try on my blog. Thank you.

  • Milorad

    I find intra-page navigation to be kind of silly personally. If a page is so long that it requires additional navigation then it is better served being split into multiple pages.

    Its the same practical approach that results in books being bound at the spine instead of being printed off a continuous roll.

    The only passable application is in terms of FAQs and such long delimited lists, but these days a better approach is to employ dynamically collapsable sections for those too.

  • engtech @ internet duct tape

    named anchors is what they used to be called. I think fragments is some new modern terminology.

    Named anchors can play havoc with your feed reader if you don’t do it right, something to keep in mind.

  • Stephen

    According to w3schools, Jordan, the name attribute will be replaced with the id attribute in future versions of HTML. I wouldn’t dwell on it too much, though. Even when another version of HTML is adopted, browsers will still offer backwards compatibility to old standards.

  • Jordan McCollum

    Is the a name tag deprecated?

  • Stephen

    In this specific case, I’d say unique identifiers are fairly intuitive. After all, it’d be like putting two files with the same name in a directory; even if the file system allowed it, which would you get if you linked to that name?

    Generally speaking, though, I have to agree with Egon. Universal standards compliance is nice, but impractical for most web developers. If it displays and functions as intended, few people care if it is technically coded properly.

  • Daniel

    Myi, thanks for the heads up. I guess one could use name=”fragment name” to avoid that if the framgment will be placed on several locations.

  • egon

    Standards compliance is such a pain in the ass. I used to be all about it, but anymore it’s just too much work when you’re building multiple sites on a time frame.

  • Myo Kyaw Htun

    ID should be unique in html document, otherwise it is not XHTML valid. I think you should point out this in your post. Or they, your visitors, will confused. 🙂

    For example:

    <span id=”span-1″>span1</span>
    <span id=”span-2″>span2</span>

    Just a thought.

    Best wishes,

    Myo Kyaw Htun

  • Ibrahim

    Good post.
    Note that you don’t need to write the whole link to point to the fragment needed, writing the fragment name in the link tag is sufficient

    link text

  • Daniel

    I guess as Egon pointed out all links can be called anchors. We could say those are named anchors or fragment anchors.

  • GoddessCarlie

    I’ve always called them Anchors too. perhaps anchors is an obsolete name for them, as I learnt HTML years and years ago (it’s coming close to ten which is scary!).

  • Vincent Chow

    I learn about this by looking at source code of websites that uses this. Haven’t use this on my blog though.

  • egon

    ah crap, can you edit that for me Daniel? I meant to put in the <a> tag in between the quotes there.

  • egon

    Yeah I’ve always called them anchors too, although I guess all links are anchors; hence the “<a>” tag. Regardless, they certainly can be useful. Most all blogs use them, even if they don’t know it. All WordPress blogs automatically place a “#comments” anchor at the top your comments, and assign an ID to each individual comment, in case you want to link to that comment only. Same thing with the “#more” tag.

  • Eli

    I’m familiar with the concept, but never really used this before. Will have to give it a go when I need it sometime.

  • Daniel

    Sridhar, I am not a Webmaster therefore I am not sure. But if you take a look at the W3C document they are (apparently) calling that stuff fragment identifiers.

  • Sridhar

    I thought these were called ‘Named Anchors’?

Comments are closed.