HTML nohref Attribute

Introduction

The nohref attribute is a boolean HTML attribute used on <area> elements inside a client-side image map. When present, that hotspot is not a hyperlink—clicks do not navigate. Image maps pair an <img usemap="#name"> with a <map> containing shaped regions. Some regions link with href; others are decorative or reserved for scripting. nohref was the HTML4 way to mark non-link regions. In HTML5 it is obsolete—omit href instead—but you will still encounter it in legacy tutorials and code.

What You’ll Learn

Purpose of nohref Attribute

The primary purpose of nohref is to define image-map regions that should not navigate when clicked. A diagram might label sections visually while only some labels are actual links. Without nohref (or without omitting href in HTML5), an <area> with a missing or empty href could behave inconsistently in very old browsers—hence the legacy attribute.

Today, client-side image maps with usemap, <map>, and <area> are less common than CSS layouts or SVG links, but they remain valid for diagrams and infographics. Understanding nohref helps you read older markup and choose the correct modern pattern for non-interactive hotspots.

📝 Syntax

Add the boolean nohref attribute to an <area> inside a <map>:

<img src="diagram.png" alt="Site navigation diagram" usemap="#site-map">



<map name="site-map">

  <area shape="rect" coords="10,10,120,80" href="/html" alt="HTML section">

  <area shape="rect" coords="130,10,240,80" nohref alt="CSS label (decorative)">

</map>

Syntax Rules

• Boolean attribute—write nohref alone; presence means no navigation.
• Valid only on <area> elements inside <map>.
• Requires shape, coords, and descriptive alt like any area.
• Mutually exclusive with a working link: do not combine nohref and href on the same area.
• HTML5 equivalent: omit href entirely on non-clickable areas.
• Dynamic disable: area.removeAttribute("href") in JavaScript (preferred over adding nohref).

💎 Values

The nohref attribute is boolean—it has no meaningful string value:

• nohref — Attribute present; area is not a hyperlink.
• nohref="" — Also valid in HTML; same as bare nohref.
• Attribute absent — Area may link if href is set; otherwise behaves as non-navigating in HTML5.
• Modern HTML5: no href and no nohref — preferred non-link pattern.

const area = document.getElementById("hotspot");

// Disable link (modern)
area.removeAttribute("href");

// Re-enable link
area.setAttribute("href", "/destination");

Applicable Elements

nohref vs omitting href vs href

Examples Gallery

Image map with a linked HTML region and a non-clickable CSS region, JavaScript href toggling, and HTML5 vs legacy markup.

👀 Live Preview

Click the HTML region to follow the link. The CSS region uses nohref and does not navigate:

Top region: clickable. Bottom region: nohref blocks navigation.

Example — Clickable and Non-Clickable Areas

One linked region and one region marked with nohref:

map-nohref.html

Copy

<img src="diagram.png" alt="Navigation diagram" usemap="#image-map">



<map name="image-map">

  <area shape="rect" coords="253,98,111,1" href="/html/tags/a" alt="Learn HTML">

  <area shape="rect" coords="253,250,74,148" nohref alt="CSS label (no link)">

</map>

View Output Try It Yourself

📤 Output:

How It Works

The first <area> includes href and acts as a normal link. The second includes nohref, so the browser treats that pixel region as non-navigating while still part of the map geometry.

Dynamic Values with JavaScript

Disable a hotspot by removing href rather than adding nohref:

dynamic-nohref.html

Copy

<area id="dynamicArea" shape="rect" coords="253,98,111,1" href="/html/tags/a" alt="Learn HTML">



<script>

  function disableLink() {

    document.getElementById("dynamicArea").removeAttribute("href");

  }

  function enableLink() {

    document.getElementById("dynamicArea").setAttribute("href", "/html/tags/a");

  }

</script>

View Output Try It Yourself

📤 Output:

Disable link Restore link

Link enabled.

How It Works

Removing href achieves the same effect as nohref in modern browsers. Restoring href re-enables navigation. Avoid dynamically setting nohref in new scripts.

Example — HTML5 vs Legacy Markup

The modern equivalent of nohref is simply omitting href:

modern-area.html

Copy

<!-- HTML5 (preferred) -->

<area shape="rect" coords="253,250,74,148" alt="Decorative label">



<!-- Legacy HTML4 -->

<area shape="rect" coords="253,250,74,148" nohref alt="Decorative label">

View Output Try It Yourself

📤 Output:

Both patterns produce a non-clickable decorative region. Prefer the HTML5 version without href.

How It Works

HTML5 defines that an <area> without href is not a hyperlink. The nohref attribute remains for backward compatibility but is not required for new documents.

♿ Accessibility

• alt on every area — Describe each region, including non-link areas marked with nohref or without href.
• Meaningful img alt — The image should describe the overall diagram, not just “image map.”
• Keyboard focus — Only linked areas appear in the tab order; non-link regions are skipped (expected behavior).
• Don’t rely on maps alone — Provide a text list of links below complex diagrams when possible.
• Consider simpler patterns — For interactive UI, regular links or buttons are often more accessible than dense image maps.

💡 Best Practices