The a tag: more than blue underlined text

The attribute that makes an a tag an actual link

<a href="/products">Products</a>

href isn't one option among several for <a>: it's what makes the tag a hyperlink at all. An <a> with no href isn't keyboard-focusable and gets no link role in the accessibility tree that the last three courses checked in DevTools. It's inline text styled like a link:

<!-- Not actually a link -->
<a>Products</a>

<!-- A real link -->
<a href="/products">Products</a>

Check both in DevTools' Accessibility panel and the difference is immediate: the first shows no role at all, indistinguishable from a span; the second shows role: link.

Relative vs. absolute URLs

<a href="/products">Products</a>                              <!-- relative to this site's root -->
<a href="products/blue-t-shirt">Blue T-Shirt</a>               <!-- relative to the current path -->
<a href="https://github.com/rails/rails">Rails on GitHub</a>   <!-- absolute -->

Relative URLs (starting with / or a bare path) resolve against the current page and site. Use them for every link inside your own app: they work the same in development, staging and production. Absolute URLs are for external destinations. The Metadata Tags course needed them for og:url and canonical, because an external platform has no "current page" to resolve a relative URL against.

In Rails, named routes beat hardcoded paths

<%= link_to "Products", products_path %>
<%= link_to "Blue T-Shirt", product_path(@product) %>

link_to generates the <a href="..."> tag, and products_path/product_path(@product) come from the app's routes. When a route changes, these links update. A hardcoded href="/products" goes stale silently.

Linking to a specific part of the same page

<a href="#reviews">Jump to Reviews</a>
...
<section id="reviews">
  <h2>Reviews</h2>
</section>

A # prefix targets an element's id on the current page. It's how the "skip to main content" link from the Semantic HTML: layout course works, and it works for any element with an id.

mailto: and tel:: links that open other apps

<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us: (555) 123-4567</a>

These href schemes hand off to the user's email client or phone dialer. Use them instead of plain text the user has to copy.

Key takeaways

• href is what makes <a> an actual hyperlink: without it, there's no link role, no keyboard focus, and no real navigation, just styled text.
• Relative URLs (/products) are correct for links inside your own app; absolute URLs (https://...) are for external destinations.
• Rails' link_to with named route helpers (products_path) keeps links correct automatically when routes change, unlike hardcoded paths.
• href="#some-id" links to a specific element on the current page: the same mechanism behind a "skip to main content" link.