Links in html

In HTML, links (or hyperlinks) are used to navigate from one page to another or to different sections within a page. Links are created using the <a> (anchor) tag.

The most common types of links are:

  1. Absolute URLs: Links to a different website.
  2. Relative URLs: Links to another page within the same website.
  3. Anchor Links: Links to a specific part of the same page or another page.

 

Absolute URLs

An absolute URL points to a location defined by its complete URL, including the protocol (http, https, ftp, etc.).

Example:

<a href="https://www.example.com">Visit Example</a>


Relative URLs

A relative URL points to a location within the same website. It is relative to the current page's URL.

Example:

<a href="about.html">About Us</a>
<a href="/contact/">Contact Us</a>


Anchor Links

Anchor links point to a specific part of a page using the id attribute.

Example:

<!-- Link to another section on the same page -->
<a href="#section1">Go to Section 1</a>

<!-- Link to a section on another page -->
<a href="anotherpage.html#section2">Go to Section 2 on another page</a>

<!-- The target section -->
<h2 id="section1">Section 1</h2>


Attributes of <a> Tag

  • href: Specifies the URL of the page the link goes to.
  • target: Specifies where to open the linked document.
    • _self (default): Opens in the same tab/window.
    • _blank: Opens in a new tab/window.
    • _parent: Opens in the parent frame.
    • _top: Opens in the full body of the window.
  • title: Provides additional information about the link, often displayed as a tooltip.
  • download: Specifies that the target will be downloaded when a user clicks on the hyperlink.

Example with Attributes:

<a href="https://www.example.com" target="_blank" title="Visit Example">Visit Example</a>


Styling Links with CSS

Links can be styled using CSS, and pseudo-classes can be used to style links in different states.

  • :link: Unvisited links.
  • :visited: Visited links.
  • :hover: When the user mouses over the link.
  • :active: When the link is being clicked
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Link Styles Example</title>
    <style>
        /* Unvisited link */
        a:link {
            color: blue;
            text-decoration: none;
        }

        /* Visited link */
        a:visited {
            color: purple;
        }

        /* Mouse over link */
        a:hover {
            color: red;
            text-decoration: underline;
        }

        /* Selected link */
        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <a href="https://www.example.com" target="_blank">Visit Example</a>
</body>
</html>

In this example:

  • The a:link selector styles unvisited links with blue color and no underline.
  • The a:visited selector styles visited links with purple color.
  • The a:hover selector styles links with red color and underline when hovered.
  • The a:active selector styles links with orange color when clicked


Using CSS Variables for Link Styles


CSS variables can simplify the process of updating link styles across a website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Variables for Link Styles</title>
    <style>
        :root {
            --link-color: blue;
            --visited-color: purple;
            --hover-color: red;
            --active-color: orange;
        }

        a:link {
            color: var(--link-color);
            text-decoration: none;
        }

        a:visited {
            color: var(--visited-color);
        }

        a:hover {
            color: var(--hover-color);
            text-decoration: underline;
        }

        a:active {
            color: var(--active-color);
        }
    </style>
</head>
<body>
    <a href="https://www.example.com" target="_blank">Visit Example</a>
</body>
</html>

Using CSS variables makes it easier to maintain and update the link styles across a website, as the values are centralized and can be updated in one place.

By understanding these concepts and examples, you can effectively use and style links in HTML to enhance the user experience on your web pages.