In this article, I will show you how to use the a tag in HTML to create a link ( link ) in a web page.

The a tag plays a very important role in a website, it is used to create links to link the website together. Take a look at the structure of this site, I've created a lot of links, each of which will point to lessons on the freetuts.net site itself.

In addition, you can also create links to any other website, which are links that you find useful for readers.

What is the a tag in HTML?

The a tag in html is used to create links, ie the links of a certain website on the internet.

If you learn about SEO, you will see that the a tag plays an important role when you go backlinks. We have two types of links, which are internal links ( internal links ) and outbound links to other websites ( external links ). Internal links are links that only link to pages within the domain, while outbound links are links that point to websites that are not the current domain.

The syntax to create a link with a tag is as follows :

 <a href="https://hocvietcode.com">web888.vn</a>

Where href is the path to the website you want to point to.

Example : Create a link with the content of learning javascript , pointing to the link https://hocvietcode.com/hoc-javascript .

 <a href="https://hocvietcode.com/hoc-javascript">học javascript</a>

Attributes of the a tag in HTML

Next I will introduce some of the most commonly used attributes in a tag.

The title attribute of the a . tag

The title attribute is used to describe the meaning of the link. When you hover over the link, a text will appear, which is the content that we have placed in the title attribute.

 <a href="https://hocvietcode.com/hoc-javascript" title="học javascript tại đây">học javascript</a>

The rel attribute of the a . tag

The average person would be less interested in this attribute. But if you are an SEO person, you will need to pay attention.

The rel attribute is used to tell search engines whether to detect this link or not. It has two values as follows:

• follow is there
• nofollow means undetected

Example : Declare search bots to not access the link in the example above.

 <a href="https://hocvietcode.com/hoc-javascript" rel="nofollow">học javascript</a>

The target attribute of the a . tag

When you click on the link, the browser will redirect to the destination page immediately and right on the current tab. If you want to go to another tab, you can use the target attribute.

• _blank , it will specialize the link on a new tab
• _self then it will switch the link on the current tab ( default value )
• _parent then it will redirect the link to the tab that opens the current tab. We also call the parent tab of the current tab
• _top then it will jump to the current tab and is often used in iframes when you want to exit the iframe and go to the original page.

The download attribute of the a . tag

If you want when you click on a link, instead of accessing that link, the browser will download the content of that link, please declare the download attribute.

 <a href="https://hocvietcode.com/hoc-javascript" download>học javascript</a>

The href # value of the a tag in HTML

When you declare an a tag but do not want to point to a link, set the href="#" value.

 <a href="#">học javascript</a>

In addition, if you want when clicking on the a tag, the browser will move to a certain position in the web page, please do the following.

Step 1 : Set the ID for the location you need to move to. Let's say it's a div tag, and I'll set the id for it like this:

 <div id="moveto"></div>

Step 2 : When clicking on the a tag, it will jump to the div#moveto tag, we will set the following:

 <a href="#moveto" >Đi tới div#moveto</a>

The states of the a tag in HTML

Tag a has four main states:

• link : No action on link yet
• visited : Clicked on the link and went to the landing page
• hover : Move over the link
• active : Link has been activated

Usually we will combine with CSS to animate these 4 states. This problem I will present in the article CSS format a tag.

So I have finished the tutorial on how to use the a tag, this is a very important tag when building the structure for web pages. I will stop this article here, see you in the next post.