Did you find this useful?
Socialize it today.


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="http://www.itgeared.com/">Here is a link to itgeared.com</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 itgeared.com


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:someone@domain.com">Send an email to someone@domain.com</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="http://www.itgeared.com/" title="Visit my link" >Here is a link to itgeared.com</a>


Here is a link to itgeared.com


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

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