Home » HTML » HTML Anchor Tag

HTML Anchor Tag

HTML Anchor tag defines a hyperlink that links one page to another. The Anchor tag is defined by <a> tag. The href (Hypertext REFerence) attribute is used to give the reference(Path) of the page or document to be linked.

The <a> tag is a paired tag with </a> tag as a closing tag. Whatever is written between these two tags will feature as a hyperlink on the webpage.

Syntax
<a href="url">link text</a>

Example: <a href="https://www.coderepublics.com">Visit our Website CodeRepublics</a>

In the example above, the text "Visit our HTML tutorial" will work as a hyperlink and will take the user to our html tutorial page. We have given the address(Path) of that page as a reference in thehref attribute.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag </title>
</head>
<body>
<a href="https://www.coderepublics.com"> Welcome to CodeRepublics </a>
</body>
</html>

Output

HTML Anchor Tag Example Visit our HTML tutorial

HTML Target Attribute

HTML target attribute is used to specify the place in the browser where the linked document should be opened. For example, whether the user wants to open the link in a new tab, new window, or in the same tag. The target attribute has different values for all these different locations.

The target attribute can have one of the following values:

Value Description
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same window/tab. This is the default value.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
_framename Opens the linked document in a named frame.

Note: HTML Frames are depreciated in HTML 5 and it is recommended not to use them.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag Example </title>
</head>
<body>
<p><a href="https://www.coderepublics.com" target="_blank">Welcome to CodeRepublics</a></p>
<p><a href="https://www.coderepublics.com" target="_top">Welcome to CodeRepublics</a></p>
<p><a href="https://www.coderepublics.com" target="_parent">Welcome to CodeRepublics</a></p>
<p><a href="https://www.coderepublics.com" target="_top">Welcome to CodeRepublics</a></p>
</body>
</html>

Output


HTML Image Link

Images in HTML can also work as a Hyperlink. It means you can add an image with a link attached to it. When the user clicks on the image, he gets redirected to the attached link. It is different from the conventional linking of text with a url.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Link </title>
</head>
<body>
<p>The image is a link. You can click on it.</p>
<a href="https://www.coderepublics.com">
<img src="PUBG.png" alt="HTML Image" style="width:300px;height:200px;">
</a>
</body>
</html>

Output

HTML Image Link Example HTML Image

As you can see, in the example above, The <img> tag is used within the <a> tag. This nested structure created the whole image as a hyperlink.


HTML Base Path Link

When you link HTML documents related to the same website, it is not required to give a complete URL for every link if you use Base Path link. This Base path is defined within <base> tag in your HTML document header.

You can create a base path of your Base Domain. Whenever you give reference to any link, you can skip the base domain and can directly write latter part. Browser will automatically concatenate the link with the base path you have given and will make a complete URL.

Look at the example below to understand it completely.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Base Path Link Example</title>
<base href="https://www.Coderepublics.com" target="_blank">
</head>
<body>
<p> Click following link </p>
<a href="https://www.coderepublics.com/HTML/html-tutorial.php"> Learn HTML </a>
</body>

Output

HTML Base Path Link Example Welcome to GeekRepublics

HTML Link Color

You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag. However, these colors can also be given by the help of CSS classes. We will learn about it later in CSS Tutorial.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Change Link Color </title>
</head>
<body alink="green" vlink="red">
<p> Click following link </p>
<a href="https://geekrepublics.com/"> Welcome to GeekRepublics </a>
</body>

Output

HTML Base Path Link Example Welcome to GeekRepublics

Note : The alink attribute is not supported in HTML5. Use CSS instead.

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<a>
Yes
Yes
Yes
Yes
Yes