Every time you click a link on a web page, you're using the href attribute — even if you've never heard the term. That tiny piece of HTML tells your browser where to go, and getting it right matters more than most people realize.

Introduced in HTML version: 2.0 (1995) ·
Full form: Hypertext Reference ·
Required for hyperlinks: Yes ·
Common protocols: http://, https://, mailto:, # ·
Percentage of websites using <a> tag: Over 93%

Quick snapshot

1Confirmed facts
2What's unclear
  • Whether href='#' is always safe for placeholder links
  • Exact origin of the term 'hypertext reference'
3Timeline signal
4What's next

Five key attributes, one clear story: the href attribute is non-negotiable for functional links.

The pattern: Without an href value, an <a> tag is not a navigable link — a distinction that affects both users and search engines.

Label Value
Full form Hypertext Reference
Introduced in HTML 2.0 (1995)
Required for <a> to be a link Yes
Can link to web pages, emails, files, page sections
Common attribute combo target='_blank' and rel='noopener'

What is an a href in HTML?

Definition of the href attribute

The href attribute — short for Hypertext Reference — is the part of the anchor element that holds the destination URL. According to MDN Web Docs (authoritative browser reference), the <a> element "creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address." Without href, the tag becomes a non-functional placeholder (W3Schools (popular tutorial site)).

How href transforms an anchor element

When you write <a href="https://example.com">Visit Example</a>, the href value tells the browser: "when clicked, navigate to that URL." The href can be an absolute URL (full address), a relative path (/about), a fragment identifier (#section), or even a protocol like mailto: (W3Schools). This simple attribute is what turns plain text into a navigable link.

The upshot

Web developers who omit href from an <a> tag effectively disable the link — a common mistake that breaks navigation for both users and search engine crawlers.

What is an example of a href link?

Basic link to another website

MDN Web Docs (learning resource from Mozilla) demonstrates the standard pattern: <a href="https://www.example.com">Visit Example</a>. The content between the opening and closing tags becomes the clickable text — make it descriptive.

Linking to a specific section with an ID

For same-page navigation, use href="#section-id". This pattern links to an element with a matching id attribute, allowing users to jump directly to relevant content without reloading the page (W3Schools).

  • Absolute URL: href="https://example.com/page"
  • Relative path: href="/about"
  • Anchor: href="#features"
  • Email: href="mailto:[email protected]"

The implication: Anchors like href="#features" provide seamless same-page navigation, but require a matching id attribute on the target element.

What is Hypertext Reference (HREF) and How Does it Work?

Origin of the term hypertext reference

The term "hypertext" dates back to the 1960s, and "Hypertext Reference" was adopted early in HTML to describe the attribute that points to the target of a link. Today it's universally recognized as href (PW Skills (education provider)).

How the browser interprets the href value

When a user clicks a link, the browser reads the href value, resolves it (if it's a relative path), and loads the destination. MDN Web Docs (authoritative reference) explains that the attribute can point to any URL-addressable resource, including web pages, images, downloadable files, and even JavaScript code.

What this means: The href value acts as a direct instruction to the browser — every click triggers a resolution and navigation process.

What is the difference between a hyperlink and a href?

Three contrasts, one core distinction: the hyperlink is the user-facing element; href is the instruction.

Dimension Hyperlink href
Definition The clickable text or image users interact with An attribute inside the <a> tag that defines the destination URL
Role User experience element Technical instruction to the browser
Example "Visit Example" (underlined blue text) href="https://example.com"
Dependency Needs href to function as a hyperlink Can exist without visible hyperlink (e.g., reserved for JavaScript)

The pattern: every hyperlink contains an href attribute, but href alone is just a piece of markup. Without descriptive anchor text and proper styling, the link fails both users and search engines (Semrush (SEO analytics platform)).

How do I open a href link?

Basic link opening behavior

By default, clicking a link with href loads the destination in the same browser tab. MDN Web Docs (learning resource from Mozilla) notes this is the simplest and most accessible pattern for internal navigation.

Opening in a new tab with target="_blank"

To open a link in a new tab, add target="_blank". Google Search Central (search quality guidelines) recommends always including rel="noopener noreferrer" alongside target="_blank" to prevent security vulnerabilities and improve performance.

Steps to create a working hyperlink:

  1. Identify the text or image you want to be clickable.
  2. Wrap it with an opening <a> tag and a closing </a> tag.
  3. Add href="URL" inside the opening tag.
  4. Optionally add target="_blank" and rel="noopener noreferrer" for external links.
  5. Test the link in a browser to confirm it works (PW Skills (education provider)).
What to watch

Developers who forget rel="noopener" expose their users to tab-napping attacks — a security risk that Google Search Central explicitly flags.

Clarity: what we know and what remains open

Confirmed facts

  • href is mandatory for a functional hyperlink (W3Schools)
  • Absolute and relative URLs are both valid href values (MDN Web Docs)
  • target="_blank" requires rel="noopener" for security (Google Search Central)
  • Google uses the alt attribute of an image as anchor text when the image is inside an <a> link (Google Search Central)

What's unclear

  • Whether href="#" is a safe placeholder pattern (best practice favors event handlers)
  • The exact historical coining of "Hypertext Reference" as a term

Expert perspectives on href best practices

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

– MDN Web Docs (authoritative browser reference)

Good anchor text should be descriptive, reasonably concise, and relevant to both the source and destination pages.

– Google Search Central (search quality guidelines)

Avoid using vague link phrases such as 'click here', 'here', 'more', 'read more', or 'info'.

– Level Access (accessibility consultancy)

The editorial verdict: the href attribute is the quiet workhorse of the web. For developers building accessible, SEO-friendly sites, the choice is clear: use descriptive anchor text, always pair target="_blank" with rel="noopener noreferrer", and test every link. For content teams across the web, the implication is equally direct: every "click here" is a missed opportunity — and a break in the chain of trust with your audience.

Additional sources

levelaccess.com

Frequently asked questions

What does href stand for?

Hypertext Reference. The attribute is always written in lowercase as href inside the anchor tag (PW Skills).

What is the default value of href?

There is no default value. If href is omitted, the <a> element is not a hyperlink (W3Schools).

Can href link to an email address?

Yes. Use the mailto: protocol: <a href="mailto:[email protected]">Email us</a> (The Knowledge Academy (education provider)).

What is href="#" used for?

It creates a placeholder link that scrolls to the top of the page. Many developers avoid it due to unexpected behavior and recommend using event handlers instead (MindStick (tech publisher)).

What is the difference between href and src?

href specifies the destination of a hyperlink (for <a>, <link>), while src embeds external resources (for <img>, <script>). Both fetch content but behave differently.

Is href required for all <a> tags?

No — but without it, the tag is not a navigable link. It can still be used as a placeholder or for JavaScript interaction (W3Schools).

How to use href with JavaScript?

Avoid javascript:void(0) in href; instead use event listeners for cleaner separation of concerns (MindStick).

What are common protocols in href?

The most common are http://, https://, mailto:, tel:, ftp://, and # for same-page anchors (W3Schools).

Related reading