Advertisement

Advertisement


HTML Anchor

The HTML Anchor tag defines a hyperlink that links one page to another page. The "href" attribute is the most important attribute of the HTML <a> tag. HTML links are defined with the <a> tag :

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

Example: <a href="http://www.coderepublics.com">Visit our HTML tutorial</a>


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

Output

HTML Anchor Tag Example Visit our HTML tutorial

HTML Target Attribute

HTML target attribute is used to specify the location where the linked document is opened like in new tag, new window, etc.

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 as it was clicked (this is default).
_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.

<!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">Visit our HTML tutorial</a></p>
<p><a href="https://www.coderepublics.com" target="_top">Visit our CSS tutorial</a></p>
<p><a href="https://www.coderepublics.com" target="_parent">Visit our JavaScript tutorial</a></p>
<p><a href="https://www.coderepublics.com" target="_top">Visit our Bootstrap tutorial</a></p>
</body>
</html>

Output


HTML Image Link

You can also link Image. Here it means that, the user will be provided an image with a link attached. When the user clicks on the image then 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

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. You can get rid of it if you use <base> tag in your HTML document header.

This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.


<!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"> Visit our HTML tutorial </a>
</body>

Output

HTML Base Path Link Example Visit our HTML tutorial

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.


<!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://www.coderepublics.com"> Visit our HTML tutorial </a>
</body>

Output

HTML Base Path Link Example Visit our HTML tutorial

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









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.