Anchor Tags in HTML: A Complete Introduction

Anchor Tags in HTML: A Complete Introduction

byRAYS CODING -
0
In this HTML tutorial, today we will discuss the HTML anchor tag. The HTML anchor tag is used to create hyperlinks in web pages. This tag helps users to move from one page to another or from one website to another. Apart from this, you can also go to a specific section of a page with the anchor tag.

HTML TUTORIAL

Basic Syntax  of the HTML anchor


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <a href="URL">Link Text</a>
    </body>
    </html>

<a>: This is the start of the anchor tag.
href: The href attribute specifies the URL of the page the link goes to.
Link Text: The text between the opening <a> tag and the closing </a> tag is what users will click on.
</a>: This is the ending tag of the anchor tag.

For Example


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <a href="https://www.example.com">Visit Example</a>
    </body>
    </html>

This creates a link that, when clicked, takes the user to "https://www.example.com".

Linking to Different Resources

External Links: To link to an external website, use the full URL


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <a href="https://www.google.com">Google</a>
    </body>
    </html>

Internal Links: To link to another page on the same website, use a relative path:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <a href="/about.html">About Us</a>
    </body>
    </html>

Email Links: To create a link that opens the user's email client


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <a href="mailto:someone@example.com">Send Email</a>
    </body>
    </html>

Telephone Links: To create a link that dials a phone number:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <a href="tel:+1234567890">Call Us</a>
    </body>
    </html>

Target Attribute

The target attribute specifies which tab to open the linked document in.
_self: This value of the target attribute opens the link in the same tab or window and is the default value of the anchor.
_blank: Opens the link in a new tab or window.
_parent: Opens the link in the parent frame.
_top: Opens the link in the full window.

Example of opening a link in a new tab:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <a href="https://www.example.com" target="_blank">Visit Example</a>
    </body>
    </html>

Title Attribute

The title attribute provides additional information about the link, which is displayed as a tooltip when the user hovers over the link.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <a href="https://www.example.com" title="Click to visit Example">Visit Example</a>
    </body>
    </html>

Anchor Links

An anchor link takes you to a specific section of a page rather than redirecting you from one page to another.

Assume that there is a testimonial section on the home page with an attribute "ID" whose value is "testmonial" and enter the value of the ID attribute of the "testmonial" section in the "href" attribute of the anchor tag of the top navigation menu. When you click on the anchor tag of the navigation menu, the page scrolls to show the testimonial section.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <a href="#testimonial">Go to Section 1</a>
        <div id="testimonial">
            content...
        </div>
    </body>
    </html>

Conclusion

The HTML anchor tag is a highly used tag. By understanding the features of the anchor tag and using them correctly, you can improve your website's navigation and user experience.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement