HTML Anchor

You might know that hyperlink which is a powerful means of browsing from web pages and websites. It is developed for sending the readers or those who will perform surfing from one web page to another without opening a new tab or window. In general, this refers to a link and is given a reference to jump to another page, document, or from one part of the same page to another using hypertext. So, now the question is, what hypertext is?

Hypertext can be defined as the text shown on your web browser's screen, which contains hyperlinked data (data here means from which document it will go to which document) and hence leads readers to different web pages by clicking on them. In this chapter, you will learn how to create your hyperlinks and use them to build websites and web pages.

Table of Contents

What is Anchor Tag?

The Anchor tag in HTML can be defined as a means to create a hyperlink that can link your current page on which the text is being converted to hypertext via <a> (anchor tag) to another page. This anchoring from one page to another is made possible by the attribute "href", which can be abbreviated (hypertext reference).

href attribute

The attribute 'href' of the Anchor tag is implemented for defining the address or path to which this hypertext will get linked. In other words, it can be said that it directs you out of your page to that destination page, whose link you have mentioned within the double quotes of the href attribute as value. The syntax for an anchor tag with href attribute looks something like this:

<a href="URL">Text Here</a>

Appearance of HTML <a> tag

Since Anchor tags are used for giving hyperlinks, you might have noticed that they change color based on certain situations, such as unvisited, clicked, visited, etc. Let's see their color code concerning their activity:

  • An unvisited link gets displayed with properties like underlined, and the color is blue.
  • A link that is visited gets displayed as underlined with color as purple.
  • A link that is an active link gets displayed as underlined with red color.

Still, many web developers will deposit their link colors in their web pages to match their site's color scheme. Here's the format:

<body bgcolor="red" text="yellow" link="blue" alink="#FFFF00" vlink="#FF00FF">
You can also provide hex code for colors (as you can see from the above example), or else you can use specific words for each color, which is acceptable by the browser.

Program for Anchor Tag

Example:

<!DOCTYPE html>
<html>

    <body>
        <a href="https://www.w3schools.in/">Welcome to w3schools</a>
    </body>

</html>

Anchor in Images

Anchor tags can also be used to create hyperlinks through images also. Here's a code snippet to show how to perform that.

Example:

<!DOCTYPE html>
<html>

    <body>
        <a href="https://www.w3schools.in/">
            <img alt="w3schools logo" src="/w3schools-logo.png" width="170" height="57">
        </a>
    </body>

</html>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram