HTML Links

HTML links, or hyperlinks, are considered a primary aspect of developing a website. Users can move from one page to another or different sections of the same page with the help of these links. The HTML anchor element (<a>) creates these links.

The basic structure of an HTML link involves the <a> tag that contains an href attribute, which defines the URL of the page the link goes to.

HTML

Target Attribute

The target attribute in HTML links (<a>) specifies where to open the linked page. Here are its values and uses.

_self: Opens the link in the same tab or window.
_blank: When clicked, it will open the link in a new tab or window.
_parent: This allows the link to open in the parent frame.
_top: Opens the link in the body of the window, breaking out of framesets.

HTML

Linking to Sections Within a Page

We use HTML links to navigate from one section to another within the same page. It is done by assigning an id to the target section and referencing it in the href attribute with a hash (#) symbol.

HTML

Links to Email and Phone Number

To create a link that opens the user’s email client with a pre-filled recipient address, use the mailto: scheme.

Similarly, we can create links that initiate a phone call using the tel: scheme.

HTML

Styling Links with CSS

We can style HTML links using CSS to improve their appearance and user experience. Common styles include changing the color, removing the underline, and modifying the hover effect.

HTML

Links for Downloading Files

We can use the download attribute to allow users to download a file when they click a link.

HTML

HTML links are required to navigate between website pages and different sections. We create links to upgrade the functionality of the website and use CSS styles to make links visually appealing and accessible.

Watch Video on YouTube

HTML Links

Learning Axis

youtube.com/@learning-axis

HTML

CSS

<!DOCTYPE html>
<html>
<head>
    <style>
        .custom-link {
            color: #e8391a;
            text-decoration: none;
            font-weight: bold;
        }
        .custom-link:hover {
            text-decoration: underline;
            color: #333333;
        }
    </style>
</head>
<body>
    <h3>HTML Links</h3>
    <p>
        Link to an internal page:
        <a href="/html">About Us</a>
    </p>
    <p>
        An email link:
        <a href="mailto:contact@learning-axis.com">Email Support</a>
    </p>
    <p>
        Anchor link to a section within the same page:
        <a href="#section1">Go to Last Section</a>
    </p>
    <p>
        Open a link in a new tab:
        <a href="https://learning-axis.com" target="_blank">Visit Learning Axis in a New Tab</a>
    </p>
    <p>
        Add a title to a link:
        <a href="https://learning-axis.com" title="Go to Learning Axis">Visit Learning Axis</a>
    </p>
    <p>
        Download a file:
        <a href="https://learning-axis.com/wp-content/uploads/2024/04/HTML.webp" download="HTML.webp">Download Image</a>
    </p>
    <p>
        Styled link:
        <a href="https://learning-axis.com" class="custom-link">Click here</a>
    </p>
    <h4 id="section1">Last Section</h4>
    <p>This is the last section of page.</p>
</body>
</html>

HTML

HTML Head

HTML Forms

HTML Graphics

HTML Media

HTML APIs

HTML Links

Target Attribute

Linking to Sections Within a Page

Links to Email and Phone Number

Styling Links with CSS

Links for Downloading Files

Watch Video on YouTube