Links

Anchors

Briefly discussed in the Basic Tags section, hyperlinks interconnect web pages into websites. You can add a link to a web page by using the <a> (anchor) tag and the href attribute. However, that is not the only use of the <a> tag. Anchors can instead use the name attribute to create a "bookmark" in a long HTML document. These bookmarks allow users to jump between sections of a page without having to reload the whole page. Bookmarks are especially useful for a table of contents on a long page.

For example, click here to go to the bottom of the page.

Click to view Live Example

<p>For example, <a href="#bottom">click here</a> to go to the bottom of the page.</p>
Linking to a bookmark anchor

Notice that the link is a normal hyperlink, except instead of another page's URL, the href attribute starts with # and then the name of a bookmark. At the bottom of the page is the actual bookmark:

Click to view Live Example

<p><a name="bottom">This is the bottom of the page.</a> Now <a href="#">click here</a> to go back to the top.</p>
A bookmark that allows users to jump to the bottom of the page

When the web browser encounters a link that starts with #, it looks for a bookmark with a matching name. It if finds one, it scrolls down until the bookmark anchor is at the top of the screen (or it hits the bottom of the page). However, if the browser doesn't find a matching anchor, it will scroll to the top of the page. By linking to just "#", the user is sent to the top of the page when the link is clicked.

Link Targets

Sometimes, such as a link to a glossary or help page, it makes sense to open a link in a new window. Doing so keeps the original web page in place so the user can return to it later. However, it is important to consider why the link needs to be opened in a new window, since most users find a new window confusing or even annoying if it's unexpected.

To open a link in a new window, use the <a> tag's target attribute. This will open this page in a new window.

Click to view Live Example

<a href="Links.html" target="_blank">This will open this page in a new window</a>
Opening a link in a new window using the target attribute

In the previous example, "_blank" was used as the value of the target attribute. This is a special value that will always open a link in a new window. You can also use a specific value so that links will share a new window: each link the user clicks overwrites the previous one. For example, this link and this link both open in the same window.

Click to view Live Example

For example, <a href="Links.html" target="links">this link</a> and <a href="Links.html" target="links">this link</a> both open in the same window.
Opening multiple links in the same window

Using a specific target allows you to minimize the number of new windows for users, but can be even more confusing since often times web browsers do not automatically show a window if it has already been opened.

This is the bottom of the page. Now click here to go back to the top.