Lesson

HTML Links

Q: What is the difference between absolute and relative URLs in href?

Absolute URLs include the full domain like https://example.com/about , while relative URLs point to paths within your own site like /about .

Q: How do I make a button look like a link or a link look like a button?

Use an a element whenever clicking navigates to a URL, then style it with CSS background color and padding to look like a button.

10 min reading

Free Course

HTML Links: Creating Hyperlinks, Targets, and Page Bookmarks

HTML links connect documents across the web using the anchor (a) element. Whenever a user clicks text, a button-styled link, or a linked graphic, the href attribute tells the browser which URL, file, or page section to open.

Anchor Syntax and Target Options

The href attribute holds the link destination. By default, links open in the same browser tab (_self). Set target="_blank" to open an external site in a new tab, and always include rel="noopener noreferrer" for security and performance.

You can also link to an email client using mailto:, start a phone call on mobile using tel:, or jump to a section on the same page using #section-id.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Links Demo</title>
</head>
<body>
    <nav>
        <a href="/tutorials">All Tutorials</a> |
        <a href="#faq-section">Jump to FAQ</a> |
        <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Docs</a>
    </nav>

    <p>Need support? <a href="mailto:[email protected]">Email our team</a>.</p>

    <section id="faq-section">
        <h3>FAQ Section</h3>
        <p>Bookmark links scroll straight to matching element IDs.</p>
    </section>
</body>
</html>

Writing Accessible Link Text

Write clear link labels that make sense out of context, such as "Download CSS Cheat Sheet (PDF)". Screen reader users frequently jump from link to link, so vague labels like "Click here" or "Read more" give no hint where the link leads.

Common Mistakes to Avoid

Writing "Click here" as link text: Descriptive text helps both accessibility tools and search engine anchor ranking.
Omitting https:// on external links: Writing href="example.com" makes the browser look for a local file named example.com on your server.
Using div with JavaScript instead of a for navigation: Real a tags support keyboard Tab focus, right-click "Open in New Tab", and SEO crawling automatically.