HTML Fundamentals - Links and Anchors

HTML Fundamentals - Links and Anchors
You can use links to connect your page to other pages, or even to jump to different parts of the same page. Links give your website a dynamic quality that make it different from, say, a book or a magazine.

At its most basic level a link tag looks like this:

<a></a>

Any tag that begins with 'a' indicates a link, but there are two basic kinds of links: hyperlinks and named anchors. A hyperlink is a link that connects one web page to a different web page and will look something like this:

<a href="www.domain.com/page.html">Link text here</a>

The information within the tag tells your browser that this is a hyperlink (href) that connects to the webpage 'page.html.' The text inside the tags (Link text here) is the part of the link which a visitor actually sees, and can click on to jump to page.html. If you are linking to a page on your site from a page located in the same site, you can leave out the domain information. For example, if you were creating a link on your page located at www.domain.com/home.html and the link connected to the destination page www.domain.com/page.html, you could write the link as <a href="page.html"> and skip the domain name information. If you leave out the domain name, the browser will assume that the destination page is located on the same website as the linking page.

The named anchor (often called simply 'anchor') serves a different purpose. As you might have guessed from the name, an anchor creates an invisible flag on the page that tells your browser where to land when you set up a link that drops visitors at a specific point on a page. An anchor looks like this:

<a name="post"></a>

Typically an anchor does not hold any text between the opening and closing tags, because it's there simply to mark a spot on the page. To create a link that will allow visitors to jump to this spot on the page from a different page, you might build a hyperlink like this:

<a href="page.html#post">Visit the Post section</a>

The '#' within the link tells the browser that you are linking to a named anchor. If you wanted to create a hyperlink that would jump a visitor to a different section of the same page, it would look something like this:

<a href="#post">Visit the Post section</a>

Another important part of your hyperlinks is the 'target' attribute. This tells the browser how to display the destination page. You have three main options: 'target="_blank",' 'target="_self",' and 'target="_top".'

The '_blank' argument will open the linked page in a new window. This is particularly useful when you are linking to an external site, as the visitor can browse through the new site to their heart's content without losing their location on your site. It's also best to open documents such as PDFs in a new window, since visitors will often automatically close the document when they are finished with it.

The '_self' argument causes the linked page to replace the current page in the existing browser window. This is best for links within your site; otherwise visitors who do a lot of browsing through your site will end up with many open windows, which can be extremely annoying! This is the default argument for the 'target' attribute, so if you don't specify a target your links will always use the existing browser window.

The '_top' argument is generally used in frameset websites, and tells the browser to overwrite the entire frameset, as opposed to simply loading the new page into whichever part of the frameset holds the original link.


This site needs an editor - click to learn more!



RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map





Content copyright © 2023 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.