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.
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.
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 other editors, like Expression Web, BlueGriffon or KompoZer, there are alternative methods to accomplish what I describe here. However, you can also follow this tutorial 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.
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:
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:
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:
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:
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.
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:
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.
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.
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:
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:
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.
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 https://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml
Copyright © 2008-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
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 https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Link to a Specific Line or Paragraph on a Web Page Using HTML
