Links

Links are the original web feature. Master `href`, `target`, `rel`, and the difference between absolute and relative URLs.

4 min read Level 1/5 #html#links#a

What you'll learn

Link to internal and external pages
Open links in a new tab safely
Use anchor links to scroll within a page

<a href="..."> is the anchor element — the original web feature. Clicking it navigates.

Basic Form

<a href="/about">About us</a>
<a href="https://example.com">Example</a>
<a href="mailto:hi@example.com">Email us</a>
<a href="tel:+15551234">Call us</a>

Absolute vs Relative URLs

URL	What it means
`https://example.com/about`	Absolute — full URL
`/about`	Root-relative — relative to the site root
`about.html`	Relative — same folder as the current page
`../about.html`	One folder up
`#section-2`	Anchor on the current page
`/about#contact`	Anchor on another page

For internal links within your site, root-relative (/about) is usually safest — it works regardless of which page the user is on.

Anchor Links — Jump Within a Page

<h2 id="install">Installation</h2>
<!-- ... -->
<a href="#install">Jump to installation</a>

Clicking the link scrolls the matching id into view.

Opening in a New Tab

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Example (new tab)
</a>

target="_blank" — opens in a new tab
rel="noopener" — security: prevents the new page from accessing window.opener
rel="noreferrer" — extra privacy

For external links, both noopener and noreferrer are the safe default.

`rel` Values Worth Knowing

`rel` value	Meaning
`noopener`	Prevent `window.opener` access from new tab
`noreferrer`	Don’t send the Referer header
`nofollow`	Tell search engines not to follow / weight this link
`external`	This goes off-site
`author`	Link to the page’s author
`next` / `prev`	Pagination relationship

Wrapping More Than Text

You can wrap any inline content — and many block elements — in an <a>:

<a href="/article">
  <article>
    <h2>Article Title</h2>
    <p>Lead paragraph...</p>
  </article>
</a>

Block-level linking is fine in HTML5. The whole region becomes clickable.

Don’t Make Buttons Look Like Links Or Vice Versa

If clicking it navigates → <a href>. If clicking it does something (submit, toggle, open a modal) → <button>. Style them however you like — but use the right element.

Up Next

Images.

Images →