Creating Hyperlinks with the Anchor Tag in HTML

In HTML, the anchor tag (<a>) is used to create hyperlinks. Hyperlinks are links that allow users to navigate to other pages or sections within a website. The anchor tag is one of the most important tags in HTML as it is used to create links between different web pages.

The href attribute is used to specify the destination of the link. This attribute can take a variety of values, including an absolute URL, a relative URL, or an ID of an element within the same page. For example, <a href="https://www.example.com">Go to Example.com</a> creates a link that directs users to the Example.com website.

Additionally, the target attribute can be used to specify where the link should open. This can be set to two values :

_blank : to open the link in a new tab or window
_self : to open the link in the same tab or window.

You can also use the name attribute to create a named anchor and the id attribute to create an id for an element. You can then use these attributes to create links that jump to specific parts of the page, such as <a href="#top"> Go to Top </a> where the href value of the link is "#top" and the id of the element is "top".

In addition, you can also use the title attribute to provide a brief description of the link, which will display when the user hovers over the link. This can be useful for providing additional context for users who are accessing the website with assistive technologies.

Overall, the anchor tag is a powerful and versatile tool for creating links and allowing users to navigate your website. It is essential for making your website user-friendly and easy to use.

Here is the simple example program for printing the anchor tag

Source Code

<html>
    <head>
        <title>Anchor</title>
    </head>
    <body>
        <ul>
            <li><a href="07_tables.html" target="_blank"> Tables</a></li>
            <li><a href="07_tables.html" target="_self"> Tables</a></li>
            <li><a href="07_tables.html" target="_parent"> Tables</a></li>
            <li><a href="07_tables.html" target="_top"> Tables</a></li>
            <li><a href="https://www.tutorjoes.in/html_tutorial/image_tag_example_program_in_html" target="_blank" > Images</a></li>
            <li ><a href="v2.jpg"> Lists</a></li>
            <li ><a href="img/v.jpg"> Lists</a></li>
        </ul>
    <a href="mailto:tutorjoes@gmail.com"> Send E-Mail</a>
    </body>
</html>

To download raw file Click Here

In the body section of the document, there is an unordered list created using the ul tag. The list contains several li elements, each of which contains an anchor tag (a).

The a tag is used to create hyperlinks, which can either link to another webpage, a specific section of the current webpage, or a different resource such as an image or email.

Each a tag has two attributes:

href
target

The href attribute specifies the URL or resource that the link

The target attribute specifies the target frame or window where the linked document or resource should be displayed.

In the example, the first four a tags have the href attribute set to "07_tables.html" and the target attribute set to _blank, _self, _parent, or _top.

_blank - means that the linked document will be opened in a new window or tab
_self - means that the linked document will replace the current document in the same window or tab
_parent - means that the linked document will replace the parent frame
_top - means that the linked document will replace the entire window.

The fifth a tag has the href attribute set to "https://www.tutorjoes.in/html_tutorial/image_tag_example_program_in_html" and the target attribute set to _blank. This will open the linked document in a new window or tab.

The last two a tags have the href attribute set to "v2.jpg" and "img/v.jpg". These links will point to an image file with the specified file name.

Finally, there is a mailto link created using the a tag with the href attribute set to "mailto:tutorjoes@gmail.com". This will create a link that opens the user's email client and creates a new email to the specified address.

Creating Hyperlinks with the Anchor Tag in HTML

Source Code

HTML Tutorial