Free Courses

HTML Links

Learn about Links in HTML

Updated - 17 Mar 20229 mins readPublished : 25 Jan 2022
Published : 25 Jan 2022
quiz
Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!

Overview

This article covers links in HTML, its implementation, attributes and types. We'll also learn how to use different tags and elements as links in HTML.

Scope

In this article, we'll learn about:

  • HTML links
  • The types of links in HTML
  • Adding links in HTML and working of html links.

Links in HTML are a connection between two resources over the web. HTML links (also known as hyperlink) allow a user to navigate from a source to a destination.

Apart from that, HTML links can also be manipulated into storing a specific location on a webpage (e.g. On the top-left of this page you can find a section that has a list of topics covered in the article. The list items are links that have the location of the topic section and upon clicking on the link you can directly jump to that section), or we can make a link to download a file on the web.

Syntax

<a href="link_address"> Text </a>

Html links are declared using anchor <a> tag.

href: The href attribute is used inside the anchor tag to specify the destination address. The HTML links (destination address) is placed inside " " and is assigned to the href attribute.

Text: Text is the section, that will be visible as the HTML link on the web document. Users will be able to click on this text to reach the destination address.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links</h1>

    <!-- Upon clicking on 'here', the user will be redirected to the Scaler topics page -->
    <p>Click <a href="https://www.scaler.com/topics/">here</a> to visite Scaler topics website.</p>
</body>
</html>

Output:

HTML links example

Explanation of the example:

In the above example, the text "here" acts as a link and upon clicking on it, the user will be redirected to the URL https://www.scaler.com/topics/

The destination file that is associated with the link can open at multiple locations, for e.g. sometimes when we click on a link on a website, the destination page opens in the same tab, and sometimes the page opens in a new tab. The target attribute specifies the location where the linked document should open.

Note: By default the document file opens in the same tab, i.e. if we don't mention the target attribute, the document file will be opened in the same tab only.

Html target attributes and their behaviour:

Target AttributeDescription
_blankThe linked document will be opened in a new tab or window.
_selfThe linked document will be opened in the same window.
_parentThe linked document will be opened in the parent frame.
_topThe linked document will be opened in the full body of the window.

By default the target attribute is set to _self

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links | Target</title>
</head>
<body>
    <h1>Html Links</h1>

    <!-- Upon clicking on 'here', the user will be redirected to the Scaler topics page. In this case the page will open in a new tab -->
    <p>Click <a href="https://www.scaler.com/topics/" target="_blank">here</a> to visite Scaler topics website.</p>
</body>
</html>

Output:

Target attribute example

Explanation of the example:

In the above example, the text "here" acts as a link and upon clicking on it, the browser will open a new tab (since we've passed the value "_blank" to the target attribute) to open the URL https://www.scaler.com/topics/

Internal links are the HTML links that are placed in the reference with the same website. This link will navigate the user to a part of the same website.

Syntax:

<a href="address"> Text </a>

The internal links are declared with relative URL, i.e. the address do not have http://www part in the link address.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links | Internal links</h1>

    <!-- Upon clicking on the link the user will be redirected to the image of the given URL -->
    <p>Click <a href="htmlLogo.png">here</a> to se the logo of the HTML</p>
</body>
</html>

Output:

Internal links example

Explanation of the example:

In the above example, upon clicking on here the user will be displayed the image if the logo. Here the address value passed to the href attribute doesn't have http://www as htmlLogo.png is located internally in the webpage.

Images can be used as HTML links. We can associate a document with an image such that, upon clicking on it the user will be redirected to that document.

To use images as HTML links, we need to add an <img> tag inside the <a> tag.

The image placed inside the <a> will behave like the text item enclosed inside the anchor tag, i.e. upon clicking on it, the user will be directed to the linked document.

Syntax:

<a href="link">
    <img src="pic.jpg">
</a>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links</h1>

    <!-- Upon clicking on the image, the user will be redirected to the scaler website -->
    <a href="https://www.scaler.com/"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWKU4_SOXBbh1Cbn5losacPNbWLGpeaeNA3A&usqp=CAU"></a>
</body>
</html>

Output:

Using image as a link

Explanation of the example:

In the above example, upon clicking on the image, the user will be redirected to the url https://www.scaler.com/

We can create a bookmark for a specific section of the page using HTML links, such that upon clicking on that link, we would reach that particular section.

To create bookmark link, we would first need to create a bookmark (usually with class selector, id selector). Then we need to add the bookmark attribute (i.e. class name or id) to the href of the link.

Syntax:

creating a bookmark:

<div id="#bookmark">
    ...
</div>

creating a bookmark link:

<a href="#bookmark"> Text </a>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links | Bookmark</h1>

    <a href="#sec-2"> Jump to CSS </a>

    <br>
    <div id="sec-1">
        <h3>
            Html:
        </h3>
        <p>
            The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.
        </p>
    </div>
    <br>
    <div id="sec-2">
        <h3>
            CSS:
        </h3>
        <p>
            Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.
        </p>
    </div>
</body>
</html>

Output:

Bookmark-link-in-html

Explanation of the example:

In the above example, the href attribute is assigned the address #sec-2. Upon clicking on Jump to CSS the user will be redirected to the div with id sec-2 on the webpage.

Buttons can be made HTML links by three methods:

  • onclick event: The onclick event attribute can be used to direct the user to the linked document, upon being clicked. The onclick attribute is placed inside the <button> tag.

    Syntax:

    <button onclick="window.location.href = 'address';">
        Text
    </button>
    
  • The onclick event attribute is placed inside the <button> tag and it is passed the value window.location.href = 'address', where the address has the address of the linked document.

  • By adding button tag inside anchor tag: Button links can be created by placing a button inside the <a> tag. The button will behave like the way the Text placed inside the anchor tag does (i.e. it will open the linked document upon clicking).

    Syntax:

    <a href="address">
        <button > Text </button>     
    </a>    
    
  • By using form tag: We can make button links by using the action attribute in the form tag. The button can be placed inside the form, and it will behave just like the Text placed inside the anchor tag does (i.e. it will open the linked document upon clicking).

    Syntax:

    <form action="address">
        <button type="submit">
            Click Here
        </button>
    </form>    
    

    The action attribute is assigned the address of the linked document and the type of the button should be made submit.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links | Button</h1>

    <!-- onclick event -->
    <button onclick="window.location.href = 'https://www.scaler.com/topics/';">
        Button 1
    </button>
    
    <br>

    <!-- By adding button tag inside anchor tag -->
    <a href="https://www.scaler.com/topics/"><button> Button 2 </button></a>

    <br>

    <!-- By using form tag -->
    <form action="https://www.scaler.com/topics/">
        <input type="text" value="name" placeholder="Enter your name">
        <button type="submit">
            Button 3
        </button>
    </form>    
</body>
</html>    

Output:

Button as a link

Explanation of the example:

Upon clicking on Button 1 and Button 2 the user will be redirected to https://www.scaler.com/topics/ . Since the Button 3 is a submit button for the form so, it won't open the website but it will submit the data to https://www.scaler.com/topics/. (refer HTML forms article for a detailed explanation about working of forms).

We can create links upon clicking on which, a file can be downloaded.

To create download links, we need to add the download attribute within the <a> tag.

  • The browser will automatically assign the correct format of the file that is being downloaded and we do not need to mention anything.
  • Due to security reasons the download attribute will only trigger the download if the content is being served from the same origin/server.

Syntax

<a href="address" download> Text </a>

The download can take a value that will specify the default name for the file. Although passing this value is not mandatory.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html links</title>
</head>
<body>
    <h1>Html Links | Download</h1>

    <img src="htmlImage.png" width="400px">
    <br>

<!--     upon clicking this link, the user will be able to download the above image -->
    <a href="htmlImage.png" download="img">Click here to download the above image.</a>
</body>
</html> 

Output:

Download links

Explanation of the example:

In the above example, upon clicking on the link, the image will be downloaded.

:::

Supported browsers

Tag/attributeChromeSafariInternet ExplorerOperaFirefox
<a>YesYesYesYesYes
hrefYesYesYesYesYes
targetYesYesYesYesYes
download14.010.118.015.020.0

The upper columns have the browser names, and the rows have the tag/attribute names.

YES means that the tag/attribute is supported by all the versions of the browser.

If the version of the browser is mentioned, then it means that it is the minimum version of that browser required to support that tag/attribute.

Conclusion

  • Html links connect two resources over the web.
  • Html links are usually declared using the anchor tag. They are also known as hyperlink.
  • target attribute in HTML links is used to alter the place where the linked document will open.
  • The linked document can be opened in a new window, parent window, parent frame or full body of window by providing different values to the target attribute.
  • Buttons, images etc can be used as links.
  • Apart from switching to different resources, links can be used to bookmark a portion of the page, navigate to internal parts of the website, download files etc.
Challenge Time!
quiz
quiz
Time to test your skills and win rewards! Note: Rewards will be credited after the next product update.
certificate icon
Certificates
HTML Tutorial
This program includes modules that cover the basics to advance constructs of HTML Tutorial. The highly interactive and curated modules are designed to help you become a master of this language.'
If you’re a learning enthusiast, this is for you.
Module Certificate
Criteria
Upon successful completion of all the modules in the hub, you will be eligible for a certificate.
You need to sign in, in the beginning, to track your progress and get your certificate.
Free Courses by top Scaler instructors