HTML Link Titles & Targets

The Links session gave you working a elements with clear href values. Two common extras change the experience without replacing href: a title attribute for a short hover hint, and a target that can open the destination in a new browser tab. Used carefully, they help. Used on every menu item, they annoy people and create safety footguns.

What these attributes do

href still decides where the link goes. title, target, and rel adjust hints and how the browser opens that destination. Learn them as optional tools on top of solid link text — not as substitutes for descriptive wording.

Direct answer

• title="…" — optional advisory tooltip text on hover (support and usefulness vary; never rely on it alone)
• target="_blank" — open in a new tab or window
• With _blank, also set rel="noopener noreferrer" so the new page cannot take full control of your original tab through window.opener (safer everyday pattern)
  Keep in-site navigation in the same tab by default. Reserve _blank for cases where staying on your page truly helps — often external references or downloads.

title, target, and rel at a glance

A helpful title tooltip

Use title when a short extra hint adds value beyond the visible link text. Do not paste the exact same sentence into both places hoping that doubles clarity — screen reader and hover experiences differ, and empty repetition wastes attention.

Reading the title sample

• Visible text Beginner guide remains the primary label
• title adds a brief advisory string on hover in many desktop browsers
• Mobile and assistive tech may not expose title the same way — keep the visible text strong
• href still points to guide.html; title does not navigate by itself

New tab with a safer rel

Opening an external site in a new tab can let readers keep your lesson open. Pair _blank with rel="noopener noreferrer" as the default safer habit for those cases.

Why noopener and noreferrer

• noopener reduces the risk that the new page manipulates your original tab via window.opener
• noreferrer also avoids sending a referrer in many browsers (privacy side effect; still commonly taught with this pattern)
  You do not need deep browser-security theory in this course — memorize the paired attributes for _blank external links and move on.

Do not blank everything

New tabs multiply. If every sidebar link opens _blank, users lose the simple Back button story and end up with a pile of tabs. Prefer same-tab links for your own pages (about.html, next lesson, home). Use _blank when leaving your site or when the product requirement clearly asks for it.

title is not the page title

The document <title> in head labels the whole tab. The title attribute on an a is only a hint on that link. Different jobs, similar English word — do not confuse them.

Practice in your editor

1. Add a local link with clear visible text and a helpful title that adds one extra detail.
2. Add an external link with target="_blank" and rel="noopener noreferrer".
3. Hover (on desktop) to see the tooltip; click to confirm a new tab.
4. Keep a third in-site link without _blank and confirm it replaces the current tab normally.
5. Rewrite any title that merely repeats the link text with zero new information.

Easy mistakes

• Using _blank on every internal menu item
• Forgetting rel="noopener noreferrer" on _blank external links
• Writing a useless title that only echoes the link text
• Thinking title or target can replace a missing href
• Confusing the link title attribute with the document <title> element

Summary

• title can add a short hover hint; visible link text stays primary
• target="_blank" opens a new tab or window
• Pair _blank with rel="noopener noreferrer" for safer external links
• Prefer same-tab navigation for your own pages
• href remains the destination; these attributes only refine the experience