HTML Link Attributes

Links

Link attributes decide where users go and how safely they get there.

A link without href is just text with link styling. The href attribute gives it a destination. Other link attributes control new tabs, downloads, relationship hints and security behavior.

Because links move people through a site, link attributes affect usability, SEO, accessibility and trust.

Attribute group: href, target, rel, download, hreflang. Attributes that decide where links go and how safely they open.

What belongs here

Learn attributes by purpose, not by memorizing random names.

`href`

The destination: page, file, section, email, phone or protocol URL.

`target`

Controls where the link opens, such as _blank for a new tab.

`rel`

Describes the relationship and can improve security with noopener.

`download`

Suggests that the browser downloads the file instead of navigating.

Syntax in context

A real link needs a clear href.

Use descriptive link text and add rel="noopener" when target="_blank" opens an external page.

<a href="/html/elements/">Learn HTML elements</a>
<a href="https://example.com" target="_blank" rel="noopener">
  Open external reference
</a>

Good versus weak

Small attribute choices can change behavior, accessibility and security.

Good

<a href="/html/elements/">Learn HTML elements</a>
<a href="https://example.com" target="_blank" rel="noopener">
  Open external reference
</a>

Weak

<a onclick="goSomewhere()">Click here</a>
<a href="https://example.com" target="_blank">External site</a>

Rules that matter

Use these rules before publishing real HTML.

Use meaningful text

The link text should make sense without reading the full paragraph around it.

Protect new tabs

Use rel="noopener" with target="_blank" for external links.

Use anchors for sections

href="#section-id" jumps to an element with that id.

Do not fake links

If it navigates, use a. If it performs an action, use button.

Production thinking

Attributes are tiny pieces of HTML with real product impact.

Why does this matter?

Attributes are small, but they change how an element works. A good attribute can make a link usable, an image understandable, a form easier to complete or a script safer to load.

Accessibility

Screen reader users often navigate link by link. Descriptive link text is more useful than "click here".

Production note

Broken href values create dead ends. Link checks and stable URLs matter on real sites.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change one tag, attribute or text value in the example.
Run the preview and describe exactly what changed.
Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

Change one meaningful part of the HTML, not only the visible text.
Run the preview and check whether the result still makes semantic sense.
Explain why the element or attribute you changed belongs in this exact place.

HTML CSS

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  font-family: system-ui, sans-serif;
  background: #07111f;
  color: #ffffff;
}

.demo-card {
  width: min(760px, calc(100vw - 48px));
  border-radius: 24px;
  padding: 28px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(140, 255, 193, 0.26);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.content-panel {
  margin-top: 18px;
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.muted-card { color: #b8c4d6; }
.label, caption {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, strong { color: #8cffc1; }
p, li, dd, figcaption { color: #d6deec; line-height: 1.65; }
a { color: #62d5ff; font-weight: 800; }
img, iframe, video, svg { max-width: 100%; border-radius: 18px; }
iframe { width: 100%; min-height: 180px; border: 1px solid rgba(255,255,255,0.16); }

label { display: block; margin-top: 14px; color: #d6deec; font-weight: 800; }
input, button {
  display: block;
  width: 100%;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 12px 14px;
  font: inherit;
}

button {
  margin-top: 16px;
  border: 0;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
  cursor: pointer;
}

button:disabled { opacity: 0.56; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px 14px; }

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?