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.
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
<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 are not always present in the form of text. In HTML we can also insert a link in an image. Like This:
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
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>
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:firstname.lastname@example.org">Send Email</a>
In an above example, we have set the
href attribute to “
mailto:email@example.com“, which specifies that the link should open the default email application and create a new email addressed to “
firstname.lastname@example.org“. 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
bcc to specify additional recipients. Here’s an example:
<a href="mailto:email@example.com?subject=Hellofirstname.lastname@example.org">Send an email to Example and CC a friend</a>
We can change the color of links in HTML using CSS. Here we will use HTML style attribute to style our link. Example:
<!DOCTYPE html> <html> <head> </head> <body> <a href="https://crus4.com" style="color:red">This is a link</a> </body> </html>
Share This Post!