HTML

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.

<a href="https://learning-axis.com">Learning Axis</a>

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.

<!-- This Link Open in Same Tab -->>
<a href="https://learning-axis.com" target="_self">Click</a>

<!-- This Link Open in New Tab -->>
<a href="https://learning-axis.com" target="_blank">Click</a>

<!-- This Link Open in Parent Frame -->>
<a href="https://learning-axis.com" target="_parent">Click</a>

<!-- This Link Open in Full Body -->>
<a href="https://learning-axis.com" target="_top">Click</a>

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.

<!-- Navigation link -->
<a href="#section1">Go to Section 1</a>

<!-- Target section -->
<h2 id="section1">Section 1</h2>
<p>Content for Section 1.</p>

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.

<a href="mailto:contact@learning-axis.com">Send Email</a>

<a href="tel:+1234567890">Call Us</a>

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.

<style>
a {
    color: blue;
    text-decoration: none;
}
a:hover {
    color: red;
    text-decoration: underline;
}
</style>

<a href="https://learning-axis.com">Styled Link</a>

Links for Downloading Files

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

<a href="#" download>Download PDF</a>

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.

Prev
Next
Scroll to Top