# Bad value “” for attribute “href” on element “link”: Must be non-empty.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-href-on-element-link-must-be-non-empty
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<link>` element is used to define relationships between the current document and external resources — most commonly stylesheets, icons, and preloaded assets. The `href` attribute specifies the URL of that external resource, and it is the core purpose of the element. An empty `href` attribute makes the `<link>` element meaningless because there is no resource to fetch or reference.

## Why This Is a Problem

**Standards compliance:** The HTML specification requires the `href` attribute on `<link>` to be a valid, non-empty URL. An empty string does not qualify as a valid URL, so the validator flags it as an error.

**Unexpected browser behavior:** When a browser encounters an empty `href`, it may resolve it relative to the current document's URL. This means the browser could end up making an unnecessary HTTP request for the current page itself, interpreting the HTML response as a stylesheet or other resource. This wastes bandwidth, can slow down page loading, and may trigger unexpected rendering issues.

**Accessibility and semantics:** An empty `href` provides no useful information to browsers, screen readers, or other user agents about the relationship between the document and an external resource. It adds noise to the DOM without contributing anything functional.

## How to Fix It

1. **Provide a valid URL:** If the `<link>` element is meant to reference a resource, set `href` to the correct URL of that resource.
2. **Remove the element:** If no resource is needed, remove the entire `<link>` element rather than leaving it with an empty `href`.
3. **Check dynamic rendering:** This issue often occurs when a templating engine or CMS outputs a `<link>` element with a variable that resolves to an empty string. Add a conditional check so the element is only rendered when a valid URL is available.

## Examples

### ❌ Incorrect: Empty `href` attribute

```html
<link rel="stylesheet" href="">
```

This triggers the validation error because `href` is empty.

### ❌ Incorrect: Empty `href` from a template

```html
<!-- A template variable resolved to an empty string -->
<link rel="icon" type="image/png" href="">
```

### ✅ Correct: Valid `href` pointing to a resource

```html
<link rel="stylesheet" href="/css/main.css">
```

### ✅ Correct: Valid `href` for a favicon

```html
<link rel="icon" type="image/png" href="/images/favicon.png">
```

### ✅ Correct: Remove the element if no resource is needed

```html
<!-- Simply omit the <link> element entirely -->
```

### ✅ Correct: Conditional rendering in a template

If you're using a templating language, wrap the `<link>` in a conditional so it only renders when a URL is available. For example, in a Jinja2-style template:

```
{% if stylesheet_url %}
  <link rel="stylesheet" href="{{ stylesheet_url }}">
{% endif %}
```

This ensures the `<link>` element is never output with an empty `href`.