🌱BeginnerLinks
Hyperlinks
Create clickable links with the <a> element, href attribute, and link text.
Overview
The <a> (anchor) element creates hyperlinks the clickable connections that make the web navigable. The "HyperText" in HTML refers specifically to this ability to link documents together.
The most important attribute of <a> is href (Hypertext REFerence), which specifies where the link points. The content between the opening and closing <a> tags is the clickable text (or image) the user sees.
Links can point to:
- External pages: absolute URLs (https://...)
- Other pages on your site: relative URLs (/about, ../contact.html)
- Sections on the same page: fragment identifiers (#section-id)
- Email addresses: mailto:user@example.com
- Phone numbers: tel:+1234567890
Key Points
- •<a href="URL">link text</a> is the basic hyperlink syntax
- •Absolute URLs include the full address (https://example.com/page)
- •Relative URLs navigate relative to the current file (../about.html, /contact)
- •target="_blank" opens the link in a new tab always add rel="noopener noreferrer" with it
- •mailto: links open the user's email client; tel: links initiate phone calls on mobile
- •An empty href="" reloads the page; use href="#" or a button for non-navigation actions
Examples
Basic internal and external links
<!-- External link to another website -->
<a href="https://developer.mozilla.org">MDN Web Docs</a>
<!-- Internal link to another page on your site -->
<a href="/about">About Us</a>
<!-- Link to a file in the same folder -->
<a href="contact.html">Contact</a>Opening a link in a new tab safely
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Open in new tab
</a>rel="noopener noreferrer" prevents the new tab from accessing your page via window.opener a security and privacy best practice.
mailto and tel links
<a href="mailto:hello@example.com">Send an email</a>
<a href="tel:+14155552671">Call us: (415) 555-2671</a>Linking to a section on the same page
<!-- The link -->
<a href="#section-two">Jump to Section 2</a>
<!-- The target -->
<h2 id="section-two">Section 2</h2>The href uses # followed by the id of the target element.
Common Mistakes
- Forgetting rel="noopener noreferrer" with target="_blank" security vulnerability
- Using vague link text like "click here" or "read more" unhelpful for screen readers and SEO
- Putting block elements inside <a> without understanding it's only valid in HTML5 flow content
Note
Link text should describe the destination or action: "Read the HTML guide" is better than "click here". Screen reader users often navigate by listing all links on a page make each one meaningful.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4