HTML Links

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

Html Links

HTML links are defined as hyperlinks.

By clicking on the link, you can jump to another document.

When the mouse is moved over a link, the mouse arrow turns into a small hand.

HTML Links – Syntax

The HTML <a> tag denotes a hyperlink. It has the following syntax:

<a href=”url”>link text</a>

The href attribute is the important part of the <a> element, indicating the link’s destination.

The link text is visible to the reader.

Click the link text, that will take you to the specified URL address.

Example

				
					<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a class="linkk" href="https://www.mywebhostguru.com/">Visit mywebhostguru.com!</a></p>
</body>
</html>

				
			

Output:

 

HTML Links

Visit mywebhostguru.com!  

By default, links appear as follows in all browsers:

  • An unvisited link is underlined and blue.
  • A visited link is underlined and purple.
  • An active link is underlined and red.

HTML Links – The target Attribute

By default, the linked page is displayed in the current browser window. If you want to change this, you can specify another target for the link.

The target attribute is used to open the linked document.

The target attribute can have one of the following values:

  • _self – Default. The document is opened in the same window/tab as it was clicked
  • _blank – The document is opened in a new window or tab
  • _parent – The document is opened in the parent frame
  • _top – The document is opened in the full body of the window
				
					<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<h2>The target Attribute</h2>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a> 
<p>If target="_blank", the link will open in a new browser window or tab.</p>
</body>
</html>

				
			

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is denoted with a relative URL (without the “https://www” part):

Example:

				
					<!DOCTYPE html>
<html>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
</body>
</html>


				
			

HTML Links – Use an Image as a Link

The <img> tag inside the <a> tag is used to make an image as a link:

				
					<!DOCTYPE html>
<html>
<body>
<p>The image below is a link.</p>
<a href="default.asp"><img decoding="async" src="mountain.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
</body>
</html>



				
			

Output:

The image is below a link.

html background image

Link to an Email Address

mailto:

inside the href attribute is used to create a link that opens the user’s email program (to let them send a new email):

				
					<!DOCTYPE html>
<html>
<body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute:</p>
<p><a href="mailto:someone@example.com">Send email</a></p>
<button><a href="mailto:someone@example.com">button as link</a></button>
</body>
</html>




				
			

Output:

Link to an Email Address

To create a link that opens in the user’s email program (to let them send a new email), use mailto: inside the href attribute:

Send email