# A “link” element must have an “href” or “imagesrcset” attribute, or both.

> Canonical HTML version: https://rocketvalidator.com/html-validation/a-link-element-must-have-an-href-or-imagesrcset-attribute-or-both
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<link>` element defines a relationship between the current document and an external resource — most commonly stylesheets, icons, preloaded assets, or canonical URLs. According to the HTML specification, the element must include at least one of the `href` or `imagesrcset` attributes so the browser knows what resource is being linked. A `<link>` element without either attribute is essentially an empty declaration: it tells the browser about a relationship type (via `rel`) but provides no actual resource to fetch or reference.

This validation error commonly occurs in a few scenarios:

- **Templating or CMS issues**: A dynamic template generates a `<link>` tag but the URL variable is empty or undefined, resulting in a bare element with no `href`.
- **Incomplete code**: A developer adds a `<link>` with a `rel` attribute intending to fill in the `href` later but forgets to do so.
- **Copy-paste mistakes**: Attributes are accidentally removed during editing or refactoring.

Fixing this is important for several reasons. Browsers may ignore the element entirely or behave unpredictably when encountering a `<link>` with no resource URL. Unnecessary elements without purpose add bloat to the document and can confuse other developers reading the code. Additionally, tools that parse HTML — such as search engine crawlers and assistive technologies — rely on well-formed markup to correctly understand document relationships.

To resolve the issue, add an `href` attribute pointing to the target resource, use an `imagesrcset` attribute when providing responsive image sources, or include both when appropriate.

## Examples

### Invalid: missing both `href` and `imagesrcset`

This `<link>` declares a stylesheet relationship but doesn't specify where the stylesheet is located:

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

This preload link has an `as` attribute but no resource to fetch:

```html
<link rel="preload" as="image" type="image/png">
```

### Fixed: using `href`

The most common fix is adding an `href` attribute with a valid URL:

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

```html
<link rel="icon" href="favicon.ico">
```

```html
<link rel="canonical" href="https://example.com/page">
```

### Fixed: using `imagesrcset`

For responsive image preloading, the `imagesrcset` attribute specifies multiple image sources at different resolutions. This is valid without `href`:

```html
<link rel="preload" as="image" type="image/png" imagesrcset="icon-1x.png 1x, icon-2x.png 2x">
```

### Fixed: using both `href` and `imagesrcset`

You can combine both attributes. The `href` serves as a fallback resource while `imagesrcset` provides responsive alternatives:

```html
<link rel="preload" as="image" href="icon-1x.png" imagesrcset="icon-1x.png 1x, icon-2x.png 2x">
```

### Handling dynamic templates

If your `<link>` elements are generated dynamically, make sure the element is only rendered when a valid URL is available. For example, in a template, wrap the output in a conditional check rather than outputting an empty `<link>`:

```html
<!-- Bad: outputs a link even when the URL is empty -->
<link rel="stylesheet" href="">

<!-- Good: only include the element when there's a real URL -->
<link rel="stylesheet" href="styles.css">
```

Note that `href=""` resolves to the current page URL and is technically valid syntax (it won't trigger this specific error), but it's almost certainly not what you intend. Always ensure the `href` value points to the correct resource.