A Beginner's Guide to Adding Internal Links in HTML

Using the ID Attribute Tag to Create Page Bookmarks

A business man working at office

Kohei Hara/Getty Images

When you're working on an HTML document and you want users to be able to click on a topic and be instantly transported to a bookmarked location within the document, ID attribute tags come in handy. This often occurs when you list a series of topics at the top of the article and then link each topic to a related section further down on the webpage.

HTML documents frequently include external links to other documents, but they can also include links within a single document. Clicking on one tag transports the reader to a specific bookmarked section on the webpage. Eventually, it may be possible to link to exact pixel locations in documents, but for now, you can use the ID tag to create a link and a location in the document. Then use href to go there. One tag identifies the destination, and the second tag identifies the link to the destination. 

Note: HTML 4 and earlier versions used the Name Attribute to form internal links. HTML 5 doesn't support the name attribute, so the ID attribute is used instead.

In the document, decide where you want the internal links to go. You label these using the anchor tag with the id attributes.

Next, you create the link to the section of the document using the anchor tag and the href attribute. You indicate the named area with a #.

The trick is to make sure that you put the < a> around text or an image.

Many times you see people use these links without surrounding anything, but this is not as reliable an anchor as one that surrounds a word or image. Many browsers prefer to have some element to position at the top of the screen; when you enclose nothing, you run the risk that the browser will be confused.

A Link to Return to the Top of a Web Page

When you want to add a link far down in a web page to return the viewer to the top of the page, the internal link is simple to set up. In HTML, the tag defines a link. href= is followed by the URL of the target link in quotations (or a shortened URL if the link is within the same document), and then the link text that is visible on the web page. Clicking on the link text sends you to the specified address using this syntax:

<a data-type="externalLink" href="http://url/" rel="nofollow">link text</a>