How to Link to a Specific Line or Paragraph on a Web Page

Tips on how to use HTML to point to the exact location on a web page


How to Link to a Specific Line or Paragraph on a Web Page Using HTML

by Christopher Heng, thesitewizard.com

Linking to another page on the Internet is pretty much a standard part of designing a website, so much so that it is included as a basic skill in any course on creating a website. When someone clicks on a link on your site, the browser normally takes that person to the top of the new document. That is the normal and expected behaviour.

But what if you wanted to link to a specific paragraph or line within a page? For example, my Frequently Asked Questions ("FAQ") page for thesitewizard.com's Feedback Form Wizard links from the questions to the specific paragraphs with the answers. This article describes how you can do this using straightforward HTML.

Requirements

  1. For the technique described in this tutorial to work, you must be the author of the target page. That is, if you want to link to, say, paragraph 5 of a particular page, you must be able to modify the latter page to mark paragraph 5 with a special HTML tag.

  2. You will be using "raw" HTML code here, so you must have some idea of how to enter HTML code into your editor.

    If you are using Dreamweaver, you may find the tutorial How to Link Directly to a Line or Section on a Web Page with Dreamweaver more relevant. The latter was written specifically for Dreamweaver users, and you will find it simpler and faster to follow the steps there.

    For those using Nvu or KompoZer, there are alternative methods to accomplish what I describe here. However, you can also follow the method below by switching to the "Source" mode of those editors. If you use a blogging program that automatically translates things you type to HTML, you will have to find some way to enter its HTML mode.

How to Use Anchors with Names

For ease of explanation, let's take the following HTML code as an example.

<h2>Normal Behaviour In a Browser</h2>
<p>
This is the text of the top paragraph. Normally, when a web browser opens a new page, it will take the user to the top of the page.
</p>

<h2>Linking Directly to a Specific Location</h2>
<p>
To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to.
</p>

The example above has two paragraphs, each with its own paragraph title, enclosed in <h2> </h2> pairs. Let's say that for our purpose, we want to link directly to the title of the second paragraph. To do this, we have to insert an invisible marker, which I will refer to as a named anchor, into the text. A named anchor looks a bit like a hyperlink where the HTML code is concerned, but does not function as a link.

A named anchor has the following format:

<a name="WhateverNameYouWant">The landing place of the link</a>

Do not be deceived: this is not a normal hyperlink. An ordinary link has a "href" to point to a particular web address. This anchor merely has a name. The text "The landing place of the link" will not be underlined or printed in blue the way normal links are (by default), nor will it be clickable. It will have the normal style of that block of text and not the appearance of a hyperlink.

Using this named anchor, the second paragraph from our example above will now look like this:

<h2><a name="exactline">Linking Directly to a Specific Location</a></h2>
<p>
To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to.
</p>

I happened to name this anchor "exactline", but you can name your anchors anything you like, within the rules given later in this article.

To create a link pointing to the location of a named anchor, simply affix "#name-of-named-anchor" (without the quotes) to the web address ("URL") you are linking to. The "name-of-named-anchor" must of course match the name you gave earlier, otherwise the browser won't know which part of the file to skip to.

For example, if our example above resides on http://www.example.com/some-page-or-other.html, and we wanted to directly link to our named anchor, we can use the following link:

<a href="http://www.example.com/some-page-or-other.html#exactline">Click here</a>

Notice that the example links to "#exactline" because the earlier named anchor was called "exactline".

It is also possible to link to specific paragraphs within the same page. For example, if you were to click this link, you will be taken back to the start of this section. (Don't click it if you don't want to lose your place in this paragraph). One way to do this is to link in the usual way I mentioned earlier. Alternatively, since we're referring to a location within the same page, you don't have to specify the whole URL. Simply use the hash followed by the named anchor. For example, use:

<a href="#exactline">Click here</a>

Additional Information

  1. What are the Rules for My Anchor Names?

    • Anchor names should start with a letter of the alphabet (either a capital letter or a small one), followed by either letters of the alphabet (capital or small), numbers (0 to 9), the colon (":"), the underscore ("_"), the full stop (".") or the hyphen character ("-").

      For the technically inclined, if you are familiar with regular expressions, only names that follow the regex rule [A-Za-z][A-Za-z0-9:_.-]* are legal. (Don't worry if you don't understand this paragraph. The earlier paragraph says the same thing in plain English. This part is mainly for the people who want a precise specification in programming-speak.)

    • Make sure your anchors have different names. Do not create two anchors with the same name or create two names that are different only in their case. That is, don't create one anchor with the name "top" and another with the name "Top". That said, if you use "Top" for your anchor name, make sure that you link to "#Top" and not "#top", otherwise browsers are not obliged to find the anchor.

  2. Where Should I Put the Closing Anchor Tag?

    In my example above, I created a named anchor in the <h2> header, so it's easy for me to decide where to place the closing </a> tag. But what if you wanted to link directly to some words in a paragraph without a header? It's easy to figure where the starting tag goes, but where do you place the closing tag?

    There's no hard and fast rule. You can place it anywhere you want. For example, one way is to tag a single word, like this:

    <a name="exactline">To</a> override this behaviour...

  3. What If I Delete the Named Anchor But Others Have Linked to It?

    If you click a link to a location, say http://www.example.com/some-page.html#lastpara, and the browser cannot find the "lastpara" named anchor on the page, the browser will simply take you to the top of the page. So if you test your web page and find that you land at the beginning of the page when you shouldn't, it may mean that you have forgotten to create a named anchor, or you gave it a different name/spelling than what you used in the referring link.

  4. Will Named Anchors Create Problems for the Search Engines?

    As far as I can tell, search engines ignore the "#some-text" portion of a URL. The anchor name is a device used to facilitate usability and is implemented in web browsers for the benefit of humans, so the search engines don't really need to bother with it.

  5. What if I'm using XHTML (and not HTML) for my web pages?

    If you use strict XHTML for your web pages (instead of HTML) and your pages are sent as XML (that is, as "application/xhtml+xml") by your web server, you should theoretically use the following for your named anchor:

    <a id="WhateverNameYouWant">The landing place of the link</a>

    That is, use id to name your anchor instead of name. However, older browsers (which don't really support XHTML) may not be able to locate your named anchor. (Of course, if you are deliberately sending your pages as XML in the first place, you probably already know about problems with these browsers, and have some clever way of dealing with it.)

    If your pages are coded in XHTML 1.0, but are sent as HTML (that is, as "text/html") by the web server, you should probably use the following:

    <a id="WhateverNameYouWant" name="WhateverNameYouWant">The landing place of the link</a>

    In other words, use the same name for both "id" (for browsers that know XHTML) and "name" (for old browsers that only understand HTML). This is the route I took for thesitewizard.com, since it gives me better compatibility with older browsers. If you know that your web pages are in XHTML, but don't know whether they are served as HTML or XML, chances are that they are sent as HTML, since that's the default. As such, you should probably do what I do here.

    For those not sure whether your web page is coded in HTML or XHTML, the method described in the main part of this article (ie, with just the "name" attribute) should probably work in all browsers (even if it's not strictly correct in XHTML). Or, if you want to cover all your bases, use the same name in both "id" and "name" no matter what your page is coded in.

Conclusion

The ability to link directly to specific locations within a page provides you with some flexibility when you need to direct your visitors to exact places on certain web pages. This HTML tutorial shows you that linking in this way is actually quite easy, once you know how it is done.

This article can be found at http://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml

Copyright © 2008-2011 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Link to a Specific Line or Paragraph on a Web Page Using HTML





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.