HOME HTML CSS Javascript PHP Laravel

HTML Links

In this tutorial, you will learn how to use <a> (link) in your HTML documents. The HTML <a> tag is an inline HTML component that specifies the destination of the href attribute link. Hyperlinks allow users to navigate from page to page. The following sections provide information about this tag, including examples of how it is used and related features and browser compatibility.

HTML A elements, commonly referred to as anchor tags, are often overlooked.

There are two ways to create a <a> link url in a href attribute.

  • absolute url
  • relative url

Example

Edit it yourself 
<!DOCTYPE html>
<html>
<head>
  <title>html a tag in href absolute vs relative URL</title>
</head>
<body>

    <h1>html a tag in href absolute vs relative URL</h1>
    <!-- This is a absolute URL -->
    <a href="https://www.webthestuff.com/tutorials/html/html-tutorials">Visit html tutorials</a>
    <!-- This is a relative URL -->
    <a href="/tutorials/css/css-tutorials">Visit css tutorials</a>

</body>
</html>

Attribute of HTML A tag

Attribute Description
href This Attribute use to Assigns the URL of the web page.
hreflang This Attribute use to Assigns link language.
download This Attribute use to Assigns a file which will be downloaded by clicking on the link.
media This Attribute use to Assigns an optimized device to use the linked file.
rel This Attribute use to Assigns a relationship between linked and current files.
target This Attribute use to Determines where to open the linked file.
title This Attribute use to Describes the link and shows the description when hovering over the link.
type Assigns the media type of the linked file.

More Examples

html link to a clickable image with download

Click on a image open and download image

Example

Edit it yourself 
<h2>This is a clickable image with download</h2>
<a href="https://www.webthestuff.com/images/demo/html.png" download>
    <img src="https://www.webthestuff.com/images/demo/html.png" border="0" alt="Webthestuff"  width="400px" height="100%">
</a>

html link to a clickable section

Click on a link go to slected section

Example

Edit it yourself 
<a href="#section_1">Go to Section 2</a>

html link to a JavaScript

Click on a link execute a javascript

Example

Edit it yourself 
<a href="javascript:alert('Hello World!');">Clickme</a>

html link to a hreflang attribute

The language of the related document is specified using the HTML hreflang property. Only when the href property is set is it used.

Example

Edit it yourself 
<a href="https://www.webthestuff.com/tutorials/html/html-tutorials" hreflang="en-us">Visit html tutorials</a>

html link to a rel

The rel attribute is used to specify the relationship between the current and the linked document. It is used only when the href attribute is present.

Example

Edit it yourself 
<a href="https://www.webthestuff.com/tutorials/html/html-tutorials" rel="noopener">Visit html tutorials</a>

html link to a target

The HTML <a> target attribute is used to specify where to open the link. and target have a 5 Values options

  • _blank : It opens the link in a new window.
  • _self : It opens the linked document in the same frame and this is a default value
  • _parent : It opens the document linked in the parent frameset
  • _top : It opens a document linked to the full body of the window.
  • frame_name : It opens the linked document in a named frame

Example

Edit it yourself 
<a href="https://www.webthestuff.com/tutorials/html/html-tutorials" target="_blank">Visit html tutorials</a>
<a href="https://www.webthestuff.com/tutorials/html/html-tutorials" target="_self">Visit html tutorials</a>
<a href="https://www.webthestuff.com/tutorials/html/html-tutorials" target="_parent">Visit html tutorials</a>
<a href="https://www.webthestuff.com/tutorials/html/html-tutorials" target="_top">Visit html tutorials</a>

using frame_name vlue

<a> target = "framename" attribute value specifies that the linked page or form will be opened in a frame named Feedback.

Example

Edit it yourself 
<a href="https://en.wikipedia.org/wiki/Mahatma_Gandhi" target="html-frame">Mahatma Gandhi</a>

<iframe name="html-frame"
        style="width:100%;height:600px;border:2px solid #4e46e5;"></iframe>

html <a> title Attribute

This Attribute use to Describes the link and shows the description when hovering over the link.

Example

Edit it yourself 
<a href="https://www.webthestuff.com/tutorials/html/html-tutorials" title="best html tutorials and examples">Visit html tutorials</a>

html <a> type Attribute

The type attribute is used to specify the Internet media type of the linked document.

Example

Edit it yourself 
<a href="https://www.webthestuff.com/tutorials/html/html-tutorials" type="text/html">Visit html tutorials</a>