What Is an Anchor Link? Easy-To-Understand Explanation of Usage, Benefits, And Precautions

href attribute

The href attribute is an attribute that sets the link of the URI that is the arrival point of the anchor and the reference.
When using an anchor link as the href attribute, you will need to enter the following characters.

<a href="https://sample.com">blog

Enter the domain you want to use as the link destination in the above “https://sample.com” part, and enter the name to be displayed in the link in the “Blog” part.

This series of steps completes the anchor link labeled “Blog”.

id attribute

The id attribute is a uniquely identifiable anchor link. Through identification, you have the advantage of being able to specify a particular page.

Also, by using the id attribute, you can specify and process named elements from CSS, JavaScript, etc., which is very convenient.

As a specific tag, the following input is required.

<a href="# test ">text
<p id="test">text</p>

The upper tag is the departure point, and the lower tag is the arrival point.

Then, enter the name of the anchor link you want to specify in “test” and the text to be displayed in “text”.

target attribute

The target attribute is the anchor link that opens the new tab page. The href attribute is a tag that moves between pages, but the target attribute opens a new page in a separate window, making it more convenient for users to look back at the original page.

The code to be entered is

<a href="Linked URL" target="_blank">New tab</a>

becomes.

Enter the URL of the page you want to link to in the “Destination URL” section and the link name in the “New Tab” section.

Read Also: What Is the Difference Between URL with and Without Www?

link color blue

Let’s set the link color to blue. This is because blue stands out more than black and is easy for users to understand.

Also, to make the anchor link stand out, it is recommended to use a bright blue even if it is blue. A lot of users don’t notice anchor links because dark blue makes them look the same as black.

In order to aim for a site that is easy for users to understand, let’s also pay attention to the color of the anchor link.

Use the nofollow attribute if you don’t want to pass link ratings

If you don’t want to pass link reputation to other sites, using the nofollow attribute is effective. The reason is that using the nofollow attribute prevents search engine crawlers from recognizing your link as a destination.

If you link to your site on a site with low quality or malicious content, you may receive a bad reputation as well.

To avoid being affected by the above, use the nofollow attribute.

There are two types of tags specifically used: the rel attribute and the content attribute. The rel attribute is a method of applying the nofollow attribute to a specific link, and the content attribute is a method of applying the nofollow attribute to links on the entire page.

・Rel attribute tag

<a href="http://sample.com/" rel="nofollow">Sample text</a>

Enter the URL of the page in the above “http://sample.com” and the name of the anchor link in “Sample text”.

・Content attribute tag

<meta name="robots" content="nofollow">

If you do the above description, the anchor links of the entire page will be set to be excluded from crawling.

Use the nofollow attribute if you don’t want your link reputation to be passed on to other sites.

Misalignment occurs when fixed with position:fixed;

If the anchor link is fixed with position:fixed;, a gap will occur when the page is moved, so it is necessary to deal with it. Because it suffers from fixed headers and positions.

If the above conditions are not resolved, some content such as headings and text will not be visible, which is very inconvenient.

There are actually various ways to deal with it, but as a specific method, this time we will introduce a method that can be adjusted with CSS.

The specific code is as follows.

.sample {
 padding-top: 100px;
}
   
#sample {
 padding-top:100px;
 margin-top:-100px;
}

Enter the height of the header part first. As a sample, I entered “100px” this time. After entering, you need to enter padding-top and margin-top to offset the height.

Specifically, the padding-top is the outer frame of the screen, and the margin-top is the inner frame of the screen. By shrinking the outer frame and pulling up the inner frame, you can set the anchor link at the appropriate position.

If the anchor link is fixed with position:fixed; and a gap occurs when moving the page, use the above method to fix it.