Hyperlink element in HTML

Hyperlinks are created by <a> (anchor) element. These hyperlinks are the reference to other web pages, files, locations within the same page or email address.
So when you click on a link, you will be redirected somewhere.

<a> ( anchor ) tag is used to create link. Let us have a basic example.

The below link is pointed to www.learnperday.com.
Link

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        The below link is pointed to www.learnperday.com.
        <br>
        <a href="https://www.learnperday.com">Link</a>
    </body>
</html>
                        

As you can see above code, href attribute is assigned URL to which you want to redirect. In above code href="https://www.learnperday.com", which means when you click on the link, you will be redirected to https://www.learnperday.com.

target attribute

In the above example, when you click on the link, a new page opens in the same window. What if you need to open it in new tag or window? that is when target attribute comes into picture.

The below link is pointed to www.learnperday.com and page will open in new tab.
Link

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        The below link is pointed to www.learnperday.com and page will open in new tab.
        <br>
        <a target="_blank" href="https://www.learnperday.com">Link</a>
    </body>
</html>
                        

In the above code, when you click on a link, it will be opened in new window. Let us have a look at other values of target.

Vaule Description
target="_self" Opens the link in the same tab. This is the default behavior.
target="_blank" Opens the link in new tab or window
target="_parent" open the link in the next level up of a frame if they were nested to inside one another. If there is no parent frame, then it will work like _self.
target="_top" It opens the link as a top document in the browser window. If it is not nested in a frame, then it will work like _self.

Last two options are not much used but they will be very useful while working with frames.

download attribute

When you add the download attribute in <a> tag, you will be asked to save the file when click on the link.
You also can assign some value to download attribute. The value will be the name of the downloaded file. You can change that name while saving the file.
Let us have a look at an example.

The below link is pointed to attributes.php file. When you click on it, it will be downloaded.
Link
The below link is pointed to attributes.php file. When you click on it, it will be downloaded but it will be named to attributes_newname.php
Link with name altered

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        The below link is pointed to attributes.php file. When you click on it, it will be downloaded.
        <br>
        <a class="native-style-link" href="./attributes.php" download>Link</a>
        <br>
        The below link is pointed to attributes.php file. When you click on it, it will be downloaded but it will be named to attributes_newname.php
        <br>
        <a class="native-style-link" href="./attributes.php" download="attributes_newname.php">Link with name altered</a>
    </body>
</html>
                        

As you can see, in the second link, it will download the same file but with the different name.

Link a Page Section

Links are also used to redirect to a particular section of the page.
You have to assign href the id of the section to which link will transfer.
Let us have a look an example.

The below link is pointed to "hypelink" section.
Hyperlink Main Topic

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        The below link is pointed to "hypelink" section.
        
Hyperlink Main Topic </body> </html>

In above example, #hyperlink is the id of the main topic.

Deprecated Attributes

Let us have a look at the list of deprecated list of attributes.

Attribute Description
charset This attribute defined the character encoding of the linked URL. This attribute is obsolete since HTML5.
coords Used with shape. It is obsolete since HTML5.
name When you target a location in the same page, name was required. Now id is used. This attribute is obsolete since HTML5.
shape This attribute was used to define a region for hyperlinks to create an image map. The values are circle, default, polygon, and rect.

Conclusion

In this section, we have learned the basic text link and its attributes.
In next section, we will learn about image maps in HTML.