How to Link Within a Page Using HTML

Download Article

Easy ways to use HTML to link to another page

Co-authored by wikiHow Staff

Last Updated: June 9, 2025 References

Download Article

• Creating a Destination Anchor
|
• Linking to the Destination Anchor
|
• HTML Help
|
• Video
|
• Q&A
|
• Tips
|
• Warnings

|Show more |Show less

While a menu or table of contents can help, it's tiresome to visit the top of a long webpage, then scroll down to find what you're looking for. Save your visitors a trip by linking directly to an anchor instead. An anchor can appear anywhere on the page and has a short "fragment identifier" from the id attribute. Add the # symbol followed by the fragment identifier to the end of the URL, and you can link directly to the anchor.

Steps

HTML Help

Sample HTML Code for Linking Within a Page

Sample HTML Jump Link Template

Part 1

Part 1 of 2:

Creating a Destination Anchor

Download Article

1. 
   1
   Create an anchor element. The "anchor" element <a></a> defines a place on the page that you can link to. Anything inside the <a> and </a> tags, typically text or an image, can be the destination of the link.
2. 
   2
   Place something inside the anchor element. Although it is valid HTML to leave the anchor element empty, some browsers will fail to find it if there's nothing between the <a> and </a> tags. Simply type in the text you would like to link to:

   • <a>My Lasagna Recipe</a>
   • The a tag does not typically change the style of the text. In this example, "My Lasagna Recipe" will appear as ordinary text.
   Advertisement
3. 
   3
   Add an id attribute to your anchor element. The id attribute gives the anchor a unique identifier so you can link to it. Place it inside the <a> tag as follows:

   • <a id="anchor-name-1">My Lasagna Recipe</a>
4. 
   4
   Choose a value for your id. The example above used "anchor-name-1," but it's best to give your anchors a descriptive value, such as "lasagna" in this case. This value must be unique to this id. If another id in the same document has the same value, the browser cannot identify the single anchor you're trying to link to.

   • In HTML4, the value must begin with a letter. Can use letters, digits, hyphens, underscores, colons, and periods.
   • In HTML5, you can use any character except for spaces.
   • Be careful with your cases. "Polish" and "polish" are considered the same value, and should not appear in the same document.
5. 
   5
   Insert id into any element instead. You don't need to use the <a> tag every time you want to create an anchor. The id attribute can actually go into any HTML element. All modern browsers (going back quite a while) should be able to interpret this. Here are a few examples:

   • Anchor in a header: <h2 id="biblio">Bibliography</h2>
   • Anchor in an image: <img id="logo" src="/images/logo.png" />
   • Anchor in a paragraph: <p id="introparagraph">(introductory paragraph)</p>
   • Remember that each id can only appear once per page.
Advertisement

Part 2

Part 2 of 2:

Linking to the Destination Anchor

Download Article

1. 
   1
   Link to the anchor from elsewhere on the same page. This is similar to any link, using the <a href=" "> </a> format. However, instead of a URL as the value of the href attribute, use the # symbol followed by the anchor value. To link to the lasagna recipe in the example above, you would type:

   • <a href="#lasagna">Click here to see my lasagna recipe.</a>
   • Use exactly the same case as you did when creating the anchor. Some browsers will not recognize "#Lasagna" as a link to "lasagna."
2. 
   2
   Link to the anchor from another webpage. You can also link to your anchor from any other website. Just include the URL followed by # and the anchor value. Here are a couple examples:

   • Linking from another page in the same domain:
     <a href="recipes.html#lasagna">Go to my recipes page to see my lasagna recipe.</a>
3. 
   3
   Turn an image into a link. As with an ordinary URL, you can link to an anchor using an image:

   • <a href="#lasagna"><img src="chickenlasagna.png" /></a>
Advertisement

Community Q&A

Search

Add New Question

• Question

  How can I create a page?

  

  Community Answer

  You can create a web page or website by signing on to Google, selecting Google Sites, and selecting New Google Sites. Then go to Create New Website and Create Web Page.

  Thanks! We're glad this was helpful.
  Thank you for your feedback.
  If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

  Yes No

  Not Helpful 10 Helpful 4
• Question

  My links don't go anywhere, why?

  

  Chaukor Studio

  Community Answer

  Hyperlink accurately. Check your anchor text is properly linked with 200 url.

  Thanks! We're glad this was helpful.
  Thank you for your feedback.
  If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

  Yes No

  Not Helpful 2 Helpful 0
• Question

  Is it possible to include the enclosed text of the target anchor as the text of the hyperlink so that a change to the target contained text will change the hyperlink text?

  

  GreenJarsWithSmallLabels

  Community Answer

  I assume "enclosed text of the target anchor" refers to the id of the target element, and that "hyperlink text" is the text displayed in the <a> element. The best way of doing this would be either to generate the table of contents on the server side using a language such as PHP, or with Javascript that sets the text by reading the value in "href" attribute of the <a> element, then setting the "innerText" property accordingly. A simple CSS workaround could also be used with the ::after selector by setting it's "content" property to "attr(href)," though this would leave a "#" symbol in the displayed text.

  Thanks! We're glad this was helpful.
  Thank you for your feedback.
  If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

  Yes No

  Not Helpful 0 Helpful 0

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Video

Tips

• If your anchor links are just taking you to the top of the page, check whether your website isn't redirecting the browser to a slightly different URL. For example, some browsers will (incorrectly) drop the anchor after redirecting from http://www.example.com to http://example.com. You can fix this by making sure all your anchor links point to http://example.com/#anchor-name, so the redirect doesn't happen.
  Thanks

  Helpful 0 Not Helpful 0
• This is a good way to make footnotes. The convention is to link to footnotes with a number in superscript and square brackets. For example:
  Julius Caesar^{<a href="#ftn1">[1]</a>}
  links to:
  <a id="ftn1">Famous Roman and close friend of mine.</a>
  Thanks

  Helpful 0 Not Helpful 0

Submit a Tip

All tip submissions are carefully reviewed before being published

Name

Please provide your name and last initial

Submit

Thanks for submitting a tip for review!

Advertisement

Warnings

• A common mistake is to use the # symbol when creating the destination anchor. Only use # when linking to the anchor, inside an href attribute.
  Thanks

  Helpful 0 Not Helpful 0
• Underscores in id values may cause trouble when using CSS to style your document.
  Thanks

  Helpful 0 Not Helpful 0
• HTML5 and XHTML do not support the name attribute in anchor elements. Use the id attribute instead as described in this article. If you expect visitors to your site to use very out-dated browsers (well over ten years old), you may include two identical id and name attributes (<a id="example-anchor" name="example-anchor">Example Text</a>). HTML4 officially supports this only for the elements a, applet, form, frame, iframe, img, and map.
  Thanks

  Helpful 0 Not Helpful 0

Advertisement

You Might Also Like

How to

Create a Link With Simple HTML Programming

How to

Make a Link to a Specific Part of a Webpage in HTML

Code a Hyperlink with HTML: A Beginner's How-To Guide

How to

Insert a Hyperlink Using Rich Text or HTML: 3 Methods

How to

Make a Picture Link in HTML

How to

Create Redirects in HTML

How to

Insert Images with HTML

How to

Create a Link: Easy, Step-by-Step Instructions

How to

Create a Basic HTML Website: A Step-by-Step Guide

3 Simple Ways to Insert a Hyperlink in Microsoft Word

How to

Create an Email Link in HTML

How to

Insert Buttons in an HTML Website

4 Ways to Add a Link to a Picture

How to

Learn HTML

Advertisement