HTML Links - In Depth details with Practical example of HTML Links

HTML Links

HTML links, also known as hyperlinks, are a fundamental part of web development. They allow you to create clickable elements on a webpage that will take the user to another page, website, or a specific section of a page.

In HTML, links are created using the anchor tag <a> with an href attribute. The href attribute specifies the URL of the page to which the link leads. Here is an example of how to create a link in HTML:

<!DOCTYPE html>
<html>
   <body style="border">
      <h2>Html Links</h2>
      <a href="https://devsenv.com/">Visit Devsenv.com</a>
   </body>
   
</html>
Live Preview

Html Links

Visit Devsenv.com

In this example, the text “Visit Devsenv.com” will be displayed as a link, and when the user clicks on it, they will be taken to the URL specified in the href attribute.

Links can also be created to other pages on your own website using a relative URL instead of a full URL:

<!DOCTYPE html>
<html>
   <body>
      <h2>Html Links</h2>
      <a href="https://devsenv.com/tutorials/category/html">Html Tutorials</a>
   </body>
   
</html>
Live Preview

Html Links

Html Tutorials

In this example, “https://devsenv.com/tutorials/category/html” is the name of the file for the page you want to link to, and it should be located in the same directory as the current page.

HTML Links - Target Attribute

The target attribute in HTML is used to specify where the linked document should be opened when the user clicks on a link.

The target attribute can take different values, including _self, _blank, _parent, and _top. Here’s a brief overview of each value:

  1. _self: This is the default value, and it opens the linked document in the same window or tab as the current document.
  2. _blank: This value opens the linked document in a new browser window or tab.
  3. _parent: This value opens the linked document in the parent window or frame of the current frame or window.
  4. _top: This value opens the linked document in the full body of the current window or frame, replacing all other frames or windows.
Example
<!DOCTYPE html>
<html>
   <body>
      <a href="https://devsenv.com" target="_blank">Visit Devsenv.com</a>
   </body>
   
</html>
Live Preview

In this example, the target attribute is set to _blank, which tells the browser to open the linked document in a new browser tab or window.

Note: some web browsers may block pop-ups, so it’s generally a good idea to inform users when a link is going to open in a new tab or window. You can do this by adding a note after the link, such as “(opens in a new tab)”.

Absolute URLs and Relative URLs

Absolute URLs: In HTML, you can use either absolute URLs or relative URLs to specify the location of a linked document or resource.

An absolute URL specifies the full web address of the linked document, including the protocol (e.g. http, https), domain name, and path.

Example
<!DOCTYPE html>
<head>
   <title>Absolute Url</title>
</head>
<html>
   <body>
      <a href="https://www.devsenv.com/" target="_blank">Visit Devsenv.com</a><br>
	  <a href="https://www.google.com/">Google</a>
   </body>
   
</html>
Live Preview

In this example, the href attribute specifies the full URL of the linked document, including the protocol (https://) and the domain name (www.devsenv.com) & www.google.com.

Relative URLs: A relative URL, on the other hand, specifies the path to the linked document relative to the current web page.

Example
<!DOCTYPE html>
<head>
   <title>Relative Url</title>
</head>
<html>
   <body>
      <a href="https://devsenv.com/tutorials-center">Tutorials Center</a>
   </body>
   
</html>
Live Preview

In this example, the href attribute specifies the path to the linked document (https://devsenv.com/tutorials-center) relative to the current web page

HTML Image Link

In HTML, you can create an image link by wrapping an img element inside an a element. Here’s an example:

<!DOCTYPE html>
<head>
   <title>HTML Image Link</title>
</head>
<html>
   <body>
      <h2>HTML Image Link</h2>
      <p>The image below is a link.</p>
      <a href="https://devsenv.com/"><img src="https://i.ibb.co/7JhTXfn/banner.png" alt="banner" border="0"> style="width: 42px;height: 42px;"></a>
   </body>
   
</html>
Live Preview

HTML Image Link

The image below is a link.

banner

In this example, the a element defines the link and the href attribute specifies the URL that the link should point to. The img element defines the image and the src attribute specifies the path to the image file.

When the user clicks on the image, the browser will navigate to the URL specified in the href attribute. Note that you can also add a text description for the image using the alt attribute. This is important for accessibility purposes, as it allows users who are using screen readers to understand the content of the image.

Email Address Link

In HTML, you can create an email link by using the a element with a mailto attribute.

Examplehtml
<!DOCTYPE html>
<head>
   <title>HTML Email Link</title>
</head>
<html>
   <body>
      <h2>Email Links</h2><br>
      <a href="mailto:web@example.com">Send email</a>
   </body>
   
</html>
Live Preview

Email Links


Send email

In this example, the a element defines the link and the href attribute specifies the mailto: protocol, followed by the email address that the link should open the default email client with. When the user clicks on the link, their email client (such as Outlook or Gmail) will open with a new email message, pre-populated with the email address specified in the href attribute.

You can also add a subject and a body to the email using additional parameters in the mailto attribute.

Example
<!DOCTYPE html>
<head>
   <title>HTML Email Link</title>
</head>
<html>
   <body>
      <h2>Email Links</h2><br>
      <a href="mailto:web@example.com?subject=Feedback&body=Hello%20there">Send Feedback</a>
   </body>
   
</html>
Live Preview

Email Links


Send Feedback

In this example, the subject parameter adds a subject to the email (“Feedback”), and the body parameter adds a body text to the email (“Hello there”). Note that spaces in the body text are replaced with %20, which is the URL-encoded representation of a space character.

When creating email links, it’s important to ensure that the email address is formatted correctly and that it’s a valid email address. It’s also a good practice to include a text description of the link, such as “Send an Email” or “Contact Us”. This can improve the accessibility and user experience of your website.

Button Link

In HTML, you can create a link that looks like a button by using the button element or the a element with a class or id attribute that specifies the styling of the button. Here are a few examples:

Using the button element:
<!DOCTYPE html>
<head>
   <title>Button Link</title>
</head>
<html>
   <body>
      <h2>Button Links</h2><br>
      <button onclick="location.href='https://www.devsenv.com'" type="button">Visit Example.com</button>
   </body>
   
</html>
Live Preview

Button Links



In this example, the button element defines the button, and the onclick attribute specifies the action to be performed when the button is clicked (in this case, navigate to https://www.devsenv.com). The type attribute specifies that the button is a regular button, and not a submit button or a reset button.

Using the a element with a class:
<!DOCTYPE html>
<head>
   <title>Button Link</title>
</head>
<html>
   <body>
      <h2>Button Links</h2><br>
      <a href="https://www.devsenv.com" class="button">Visit Devsenv.com</a>
   </body>
   
</html>
Live Preview

Button Links


Visit Devsenv.com

In this example, the a element defines the link, and the href attribute specifies the URL that the link should point to. The class attribute is set to “button”, which can be styled using CSS to give the appearance of a button.

Using the a element with an id:
<!DOCTYPE html>
<head>
   <title>Button Link</title>
</head>
<html>
   <body>
      <h2>Button Links</h2><br>
      <a href="https://www.devsenv.com" id="myButton">Visit Devsenv.com</a>
   </body>
   
</html>
Live Preview

Button Links


Visit Devsenv.com

In this example, the a element defines the link, and the href attribute specifies the URL that the link should point to. The id attribute is set to “myButton”, which can be styled using CSS to give the appearance of a button.

Note that in all of these examples, the link will navigate to the specified URL when clicked, just like a regular link. However, the button styling can help to make the link more prominent and encourage users to click on it.

Link Titles

In HTML, you can add a title to a link using the title attribute. The title attribute provides additional information about the link when the user hovers over it with their mouse.

Example
<!DOCTYPE html>
<head>
   <title>Link Title</title>
</head>
<html>
   <body>
      <h2>Link Title</h2><br>
      <a href="https://www.devsenv.com" title="Visit Devsenv.com">Devsenv Website</a>
   </body>
   
</html>
Live Preview

Link Title


Devsenv Website

In this example, the a element defines the link, and the href attribute specifies the URL that the link should point to. The title attribute is set to “Visit Devsenv.com”, which provides additional information about the link. When the user hovers over the link with their mouse, the browser will display a tooltip with the text “Visit Devsenv.com”.

Using the title attribute is a good practice for improving the accessibility and usability of your website, as it helps to provide context and additional information for users who may be using assistive technologies or who may be unfamiliar with the content of your website. It’s also a good practice to make the text of your links descriptive and meaningful, rather than generic phrases like “click here”.

Html Link Colors

Link colors are the colors of the text used for hyperlinks in HTML. By default, links are underlined and blue in color, but you can change the color of the link text using CSS.

Example

<!DOCTYPE html>
<head>
   <title>Html Link Colors</title>
   <style>
      a:link {
        color: green;
        background-color: transparent;
        text-decoration: none;
      }
      a:visited {
        color: rgb(128, 15, 34);
        background-color: transparent;
        text-decoration: none;
      }
      a:hover {
        color: blue;
        background-color: transparent;
        text-decoration: underline;
      }
      a:active {
        color: yellow;
        background-color: transparent;
        text-decoration: underline;
      }
      </style>
</head>
<html>
   <body style="border: 1px solid; padding: 10px;">
      <h2>Link Colors</h2>
      <p>You can change the default colors of links</p>
      <a href="https://devsenv.com/tutorials/html-tables" target="_blank">HTML Tables</a> 
   </body>
   
</html>
Live Preview

Link Colors

You can change the default colors of links

HTML Tables

It’s important to ensure that the color of your links is readable and provides sufficient contrast with the background color of your website, to ensure that users with visual impairments or color blindness can easily distinguish the links from the rest of the content.

Overall, HTML links are an essential part of web development, allowing users to navigate easily between pages and websites.

Previous
HTML Colors
Next
HTML Layouts & Elements In Details