crus4

logo

Create a Link in HTML


HTML Links helps us to redirect the user from one web page to another.

To create a link in HTML, we have to use an anchor tag (<a>). Along with this <a> tag we have to use the href attribute to specify the URL of the link. Here is an example:

<a href = "#link">Click Here</a>

In an above example, the link text is Click Here. When the user clicks on this text he will be redirected to the specified URL.

The target Attribute

You can also add optional attributes to the anchor tag, such as target attribute to specify where to open the linked document. Here is an example that includes the target attribute:

<a href = "#link" target= "_blank">Click Here</a>

In an above example, the target attribute is set to “_blank” to open the link in a new window. If you set the target attribute to “_self” the document will be opened in the same window/tab as it was clicked.

HTML Links as an Image

HTML Links are not always present in the form of text. In HTML we can also insert a link in an image. Like This:

HTML Links

Click on the image

HTML Links

To create a link using an image in HTML, you can use the <a> tag and wrap it around an <img> tag. Here’s an example:

<a href="#link">
  <img src="path/to/image.jpg" alt="Example">
</a>

In an example above, we have wrapped the <img> tag with an <a> tag, and set the href attribute of the <a> tag to the URL we want to link to. The src attribute of the <img> tag specifies the path to the image we want to use as the link.

You can also add additional attributes to the <img> tag, such as width and height to specify the dimensions of the image.

Here is how you use image as a link in HTML.

<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<h1>Image as a Link</h1>
<h3>Click on the image and see how it works</h3>
<a href="https://crus4.com">
  <img src="https://crus4.com/wp-content/uploads/2023/01/cropped-icon.jpg" alt="Icon" width = "100px" height = "90px">
</a>

</body>
</html>

HTML – Link to an Email Address

To create a link to an email address in HTML, you can use the <a> tag with the href attribute set to “mailto:” followed by the email address. Here’s an example:

<a href="mailto:hello@example.com">Send Email</a>

In an above example, we have set the href attribute to “mailto:hello@example.com“, which specifies that the link should open the default email application and create a new email addressed to “example@example.com“. The link text is “Send Email”.

You can also include additional attributes in the <a> tag as needed, such as subject to specify the subject of the email, and cc or bcc to specify additional recipients. Here’s an example:

<a href="mailto:hello@example.com?subject=Hello&amp;cc=friend@example.com">Send an email to Example and CC a friend</a>

HTML – Change Link Color

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://crus4.com" style="color:red">This is a link</a>
</body>
</html>


Share This Post!

Create a Link in HTML