Learn about HTML Links with example

HTML links are used in HTML to connect two object, page or external URL. 

In HTML, a link is an element used to create a hyperlink that connects one web page to another, or to a specific section within the same page. Links are typically represented as text or images that users can click on to navigate to the target resource.

The <a> element, which stands for "anchor," is used to create links in HTML. It requires the href attribute, which specifies the target URL or destination of the link. Here's the basic syntax of an HTML link:

<a href="target-url">Link text</a>

 

In the above example target-url represents the targetted page url. Link Text is a text which will be visible to the end user.

There are few types of links

1. Absoute URL
2. Relative URL
3. Anchor URL

 

By default links have default browse based property.

• unvisited link
• active link
• visited link

We can customize the appearance of links.

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

Use target="_blank" to open the linked document in a new browser window or tab:

<a href="https://www.betekie.com/" target="_blank">Visit Betekie.com</a>

HTML Links - Use an Image as a Link

We can make images as a link. The syntax to make the image as URL is

Example

<a href="url_of_page">

<img src="logo.png" alt="HTML Link" style="width:160px;height:80px;">

</a>

Link to an Email Address

We can use links to trigger opening email default application on system. In order to do that we can use the following syntax

<a href="mailto:user@domain.com"> Write to Us </a>

Here are a few examples of different types of links:

Absolute URL:

<a href="https://www.betekie.com">Visit Example</a>

 

Absolute URL represents the fully resolved domain url which includes http / https in the URL.

Relative URL:

<a href="/about-us">About Us</a>

 

Relative links are used to connect the content within any webpage which exists inside the wesite. 

Anchor Link:

<a href="#section1">Jump to Section 1</a>

 

Anchor links are used to point the URL to the web page sections.

In above example,  we would need to define an anchor with a corresponding ID within the HTML code, like this:

<h2 id="section1">Section 1</h2>

 

When a user clicks on a link, the browser typically navigates to the target URL or location specified in the href attribute. Links can be styled using CSS to change their appearance, such as their color, underline, or hover effects.