HTML Links

Tuesday, February 14, 2012

Links, or Hyperlinks, are one of the most used tags in HTML. Their main purpose is to move your readers from one part of your site to another. You use the anchor element, <a>, to create links. The anchor element requires a start and end tag, as well as an attribute to define where you want the user to go when they click on the link. In between the start and end tag, you place text which will be displayed on the browser. Generally, you use "friendly" text, rather than exposing the URL to the user. However, you can expose the URL if you wish. Either way is correct. Here is an example on how a link should be formatted:

<a href="">Here is a link to</a>

Notice that the anchor element includes the href (hypertext reference) attribute. This attribute assigns the URL to the text that is placed between the start and end tag. The "Link text" doesn't have to be text. It can be an image or any other HTML element. The results of this link are as follows:

Here is a link to

In addition to linking to other pages, you can create a link within the same page, such as when you have a "table of contents" at the top of your page and you want to create bookmarks, where users can easily click an item in your TOC and quickly be directed to the item on the same page. The name attribute is used to create a bookmark inside an HTML document. However, with HTML5, the standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute will work for HTML 4 documents in all modern browsers. Here is an example

In your TOC or at the top of your page, create a link:

<a href="#help">Need Help and Support?</a>

At the help section, lower in your document, create anchors:

<a name="#help">Help and Support Section</a> OR

<a id="#help">Help and Support Section</a>

You can also create links to email addresses as shown in this example. When a user clicks on the link, their default mail application will open.

<a href="mailto:[email protected]">Send an email to [email protected]</a>

Finally, if you want a tooltip to be displayed when your user hovers over a link, add the title attribute. Here is an example:

<a href="" title="Visit my link" >Here is a link to</a>

Here is a link to

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS: The Complete Reference Creating Web Pages Simplified HTML CSS and JavaScript Editor