You are currently viewing How to Use Anchor Tag in HTML to Grow Your Website Traffic
  • Post category:HTML

How to Use Anchor Tag in HTML to Grow Your Website Traffic

How To ADD Anchor Tag in HTML

  • Introduction
  • How to understand hyperlink
  • What is anchor tag
  • Example of anchor tag
  • How do I create
  • Conclusion

Introduction

In this article we will see about example of anchor tag in HTML. This is also known as the HTML anchor tag or Hyperlink. This hyperlink tag is important for a website. The anchor tag is the tag used to move from one page to another. If you want to navigate or move or jump from one page to another page we need to create hyperlink. There are some situations where you need to navigate from one section to another section in the same page then also we need to create hyperlinks. So there are two situations where you need to create hyperlinks either to navigate from one page to another page or navigate from one section to another section in the same page Let’s look at the anchor tag in detail.

How to understand Hyperlink

  All you need is you need to move the mouse cursor on an area when you move the mouse cursor on an area or a section of you web page if the normal mouse cursor changes to the hand cursor you should understand that is a hyperlink. I you find a text as a blue color and underlined you should understand that is a hyperlink. When a text is a hyperlink we normally say as hypertext. We can even convert an image to a hyperlink, even convert some section of the page to a hyperlink using the example of anchor tag. If someone asks you how to identify a hyperlink, you say points.

What is anchor tag

  <a> represents the anchor tag and it has opening and closing tag. .There are two types of links in website one is internal link and another one is external link. Internal links help you navigate from one website page to another. External link helps you navigate one website to another website. It is used to create hyperlink to a resource. Hyper means navigation or jumping. Hyperlink can be a text or image or any section in your web page to create hyperlinks in HTML we use example of anchor tag. That is <a> tag. It is a paid tag and inline tag. It has one of the important attribute that is called hyperlink reference “href”. Hyperlink reference accepts a value that is page to which you want to navigate.

READ ALSO  What is the Use of Legend Tag in HTML | Explained

Example of anchor tag

How to use an image link

<a href="https://wonderdevelop.com">
<img alt="wonderdevelop" src="why-us-pic.jpg" 
width="150" height="150">

Link for E-mail

<a href="mailto:example@gmail.com">Gmail</a>

T+able Linking

<table border="1px solid black" >
<tr>
<th>Website</th>
</tr>
<tr>
<td><a href="https://wonderdevelop.com">VIEW SITE</a></td>
</tr>
</table>

Link to Javascript

<a href="javascript:alert('Hi, Guys');">Execute JavaScript</a>

How do you create an anchor in HTML

Syntax:

<html>
<head>
<title>Anchor tag in HTML</title> 
</head>
<body>
<a href="https://wonderdevelop.com">Click Here</a>
<a href="second.html" target="_blank">Click Here</a>
</body>
</html>
  1. Type a general syntax of HTML.
  2. Create <a> tag in the body tag.
  3. Add “href” for anchor tag.
  4. Enter the link of the page you want to go to in the href          attribute.
  5. You can also link to another HTML page using document          name. href=”second.html”
  6. And If you use the target = blank attribute, the link will          open in a new tab.
  7. Enter the name of your website or name something                between the opening and closing tags of the anchor tag.

Target attribute

  If you simply create a <a> tag and you click on it by default it will open in a same tab or window. This target attribute helps to change that. You can create more windows in firefox by clicking on (+)Plus symbol. There are some situations where you want to navigate from first page to second page and you might be interested to open that second page in some other window not in the same window. To open the page in the same window or in the another window we are going to use an attribute called as “target”. Target attribute takes two values mainly one is _self and another one is _blank. _self is open in the same window and _blank is open in new window.

READ ALSO  How to Change HTML Table Row Background Color

Style an hyperlink text

  • Link
  • Hover
  • Visited
  • Active

Link:  Links are the normal looking styles for a hyperlink.
Hover: The style you see when you move the mouse over hyperlink text.
Visited : Styles that appear after you have already seen that link.
Active: The styles that occur when the hyperlink is clicked.

Syntax:

a:link{
color: green;
text-decoration: none;
}
a:hover{
color: red;
text-decoration: overline;
}
a:visited{
color: yellowgreen;
text-decoration: underline; 
}
a:active{
color: violet;
font-style: oblique; 
}

Note: You can also use these styles together using (,) comma.

Conclusion:

We will look at what anchor is tag is, what their attributes are and what they are used. And if you have any doubts, let us know in the comment box.

Leave a Reply