HTML anchor tag HTML anchor tag

The content tag about which you will be learning in this tutorial is a little extra special from all other tags in HTML. It is this tag because of which HTML is called a Hyper Text language. You might remember from the previous tutorial that Hyper Text means connected text. It is the ability to connect information in one webpage with the information in another webpage. All this is done by using the anchor tag in HTML. The anchor tag is not used to add any content to the webpage, it is used to link the content in the webpage with other webpages. Using the anchor tag you can create a link to files or documents with a webpage.

Anchor has an attribute called href which should be set equal to the path of the webpage, file or document which you want to link with this webpage. You can use as many anchor tags as you want in your webpage.

Here is an example on how you will provide a link to google.com in your webpage

<html>            
    <head>      
    </head>            

    <body>                
        <a href="http://google.com"> Click here </a> to go to google.com            
    </body>    
</html>

This is how the browser will display the output of this HTML

Image 

Notice that we have set the href attribute of the <a> tag to http://google.com. By doing this we are telling the browser that when the user clicks this link take him/her to google.com website. See how the word Click here have been underlined and displayed in blue color by the browser. This indicates that Click here is a link and on clicking this some action will be performed.

You can put anything inside the anchor tag and make it clickable. If you put an image inside the body of the anchor tag, then the image will become clickable and on clicking it the page will navigate to the link mentioned in the href attribute.

Need Learning Guidence?
Join our Study Groups and get step by step guidence.
Learn HTML and CSS
The goal of creating this study group is to help students who are beginners to HTML and CSS program
7
Members
1
Questions Asked
0
Tasks Added
Learn Website Development
This goal of this study group is to help students learn the basics of website development using HTM
1
Members
0
Questions Asked
0
Tasks Added
Website Development Interview Preparation
This goal of this study group is to help students prepare for their website development interviews.
1
Members
0
Questions Asked
0
Tasks Added
Web Wars 1.0 - Build Your Digital CV
The goal of this study group is to manage all the communication for the 'Web Wars 1.0 - Build Your
110
Members
0
Questions Asked
0
Tasks Added

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp