HTML Links

HTML links are used to connect web pages. The <a> tag defines a hyperlink.

Link Tag

<a href="https://google.com">Visit Google</a>

The href Attribute

Full URL

<a href="https://www.google.com">Google</a>

Relative Path

<a href="pages/about.html">About</a>
<a href="../index.html">Home</a>

Email

<a href="mailto:[email protected]">Our Email</a>

Phone

<a href="tel:+622112345678">Our Phone</a>

Anchor

<a href="#section1">Go to Section 1</a>

<div id="section1">Section 1</div>

The target Attribute

<a href="https://google.com" target="_blank">Open in a new tab</a>
<a href="https://google.com" target="_self">Open in the same tab</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Portal</title>
    <style>
        nav ul {
            display: flex;
            list-style: none;
            gap: 1rem;
        }

        nav a {
            text-decoration: none;
            color: #333;
            padding: 0.5rem 1rem;
        }

        nav a:hover {
            color: #1e40af;
        }
    </style>
</head>
<body>
    <header>
        <h1>Technology University</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="academic.html">Academic</a></li>
                <li><a href="research.html">Research</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="https://portal.university.edu" target="_blank">Portal Login</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Everyday Case Study

Case: A developer needs to create a list of links.

<h2>Important Links</h2>
<ul>
    <li><a href="https://spmb.university.edu">New Student Registration</a></li>
    <li><a href="https://siakad.university.edu">Academic System</a></li>
    <li><a href="https://elearning.university.edu">E-Learning</a></li>
    <li><a href="https://library.university.edu">Digital Library</a></li>
    <li><a href="mailto:[email protected]">Administrative Email</a></li>
</ul>

Bookmark Links

<!-- Table of Contents -->
<nav>
    <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#installation">Installation</a></li>
        <li><a href="#usage">Usage</a></li>
    </ul>
</nav>

<!-- Content -->
<section id="introduction">
    <h2>Introduction</h2>
    <p>Introduction content...</p>
</section>

<section id="installation">
    <h2>Installation</h2>
    <p>Installation content...</p>
</section>

<section id="usage">
    <h2>Usage</h2>
    <p>Usage content...</p>
</section>

Link Styling

a {
    color: #1e40af;
    text-decoration: none;
}

a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

a:visited {
    color: #7c3aed;
}

a:active {
    color: #dc2626;
}

Best Practices

Use descriptive text: Not "click here"
Target _blank: Use it carefully
Rel noopener: For security
Broken links: Check them regularly
Accessibility: Use aria-label when needed

Summary

HTML links connect web pages. Use attributes correctly and consider accessibility.