Markup CityISSUE #15 of 39

links · the anchor tag

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysThe anchor <a href="..."> creates a link — the hyperlink is what makes the web a web.

Links are HTML's superpower. <a href="https://...">text</a> points somewhere: another site, another page, a spot on the same page (#id), an email (mailto:), or a phone (tel:).

Add target="_blank" to open in a new tab (pair it with rel="noopener" for safety). Relative paths link within your own site; absolute URLs link out to other domains.

Power-ups you unlock

<a href="url">text</a> — the hyperlink
href can be a URL, #anchor, mailto:, or tel:
target="_blank" opens a new tab (add rel="noopener")
Relative paths stay in-site; absolute URLs go out

The Unclosed Tag attacks — common mistakes

target="_blank" without rel="noopener" — a security/perf risk
Link text that just says "click here" — bad for accessibility/SEO
Forgetting https:// → the browser treats it as a relative path

Boss battleMake three links: one external in a new tab, one mailto:, and one that jumps to an element lower on the page via #id.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body>
  <p><a href="https://example.com" target="_blank" rel="noopener">external link ↗</a></p>
  <p><a href="#bottom">jump down</a></p>
  <p><a href="mailto:hi@example.com">email us</a></p>
  <p id="bottom" style="margin-top:200px">you jumped here.</p>
</body></html>

▶ Open the interactive comic issue

‹ Linking A Stylesheet Images · Src · Alt · Sizing ›