In previous tutorials you learned about HTML images. In this tutorial HTML links are explained.
What is a link ?
A link is a is a reference to a page , website or to a special section on the same page. In this tutorial you will learn all these three methods of linking.
- Linking to a website.
- Linking to another HTML page.
- Linking to a special section on the same page.
Additionally you will also learn ho you can use image as link.
How to insert a HTML link.
Open and close an anchor tag to insert a link. This is how you open and close an anchor tag.
Syntax of writing an anchor tag in HTML.
<a> Link Description </a>
Inside this anchor tag you have to write Link Description that will show what is this link about.
Attribute of an HTML link
In anchor tag you have to insert the reference of a website , another HTML page or a section of the same page. An attribute call hyper reference “href” is used to insert the reference. Remember one thing that a link to an external website will always start from http:// not from www. This is how you write href attribute inside anchor tag.
Linking to an external website.
<a href=”http://www.google.com“> Google Search Engine </a>
Linking to another HTML page.
<a href=”about.html“> About Us </a>
Linking to a specific heading on the same page.
To link to a special section on the same page you have to assign an id to that section before linking. Suppose you want to link to copyright message on your website which will be at the end of you web page then you will have to assign an id to that copyright section.
Assigning an ID to the section
<h1 id=”copyright“> This is copyright text </a>
Now you have to insert that id in anchor tag to link to that section in the same page. Note in href attribute use ” # ” sign before the name of id. See example below.
<a href=”#copyright“> Read Copyright Message </a>
Example of HTML links
Using Image as Link.
Sometimes you need an image to use a link. You can do this by inserting image tag as the description of the link. See example below.
<a href=”http://www.facebook.com“> <img src=”facebook.jpg“> </a>
Title attribute in anchor tag.
You can insert the title attribute in anchor tag same as you can insert in image tag. See example below.
<a href=”http://www.facebook.com” title=”this is facebook“> Go to facebook </a>
Opening a link in a new tab.
You may have notice that all the above examples open link in the same tab in the browser. You can open a link in a new blank tab with an attribute in anchor tag.
Target attribute in anchor tag.
Use target attribute to open a new tab for a link. See example below.
<a href=”http://www.facebook.com” target=”_blank”> Open new Tag with facebook </a>
Links are very important in HTML. Almost every page has a link in a website so learn all the stuff about links before moving to the next tutorials.