# The “name” attribute on the “img” element is obsolete. Use the “id” attribute instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-name-attribute-on-the-img-element-is-obsolete-use-the-id-attribute-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `name` attribute was historically used on `img` elements to reference images through JavaScript's `document.images` collection or via `document.getElementsByName()`. In early HTML, `name` served as an identifier for various elements before the `id` attribute was widely adopted. The HTML living standard (WHATWG) now marks `name` as obsolete on `img` elements, meaning it should no longer be used in new content.

This matters for several reasons:

- **Standards compliance**: Using obsolete attributes means your HTML does not conform to the current specification, which can cause validation errors and may lead to unexpected behavior in future browser versions.
- **Consistency**: The `id` attribute is the universal mechanism for uniquely identifying any HTML element. Using `id` instead of `name` keeps your markup consistent and predictable.
- **JavaScript and CSS targeting**: Modern APIs like `document.getElementById()` and `document.querySelector()` work with `id`, not `name` on image elements. CSS selectors also target elements by `id` (e.g., `#myImage`), making `id` the more versatile choice.
- **Fragment linking**: The `id` attribute allows you to link directly to an element using a URL fragment (e.g., `page.html#myImage`), whereas the obsolete `name` attribute on `img` does not serve this purpose.

To fix this issue, simply replace `name` with `id` on your `img` elements. Keep in mind that `id` values must be unique within the entire document — no two elements can share the same `id`. If you have JavaScript code that references the image by name (e.g., `document.images["myImage"]` or `document.getElementsByName("myImage")`), update those references to use `document.getElementById("myImage")` or `document.querySelector("#myImage")` instead.

## Examples

### Incorrect: using the obsolete `name` attribute

```html
<img src="photo.jpg" name="heroImage" alt="A sunset over the ocean">
```

This triggers the validation error because `name` is no longer a valid attribute on `img`.

### Correct: using the `id` attribute

```html
<img src="photo.jpg" id="heroImage" alt="A sunset over the ocean">
```

The `name` attribute is replaced with `id`, and the element can now be targeted with `document.getElementById("heroImage")` or the CSS selector `#heroImage`.

### Updating JavaScript references

If your existing code references the image by `name`, update it accordingly.

**Before (relying on `name`):**

```html
<img src="logo.png" name="siteLogo" alt="Company logo">
<script>
  var logo = document.images["siteLogo"];
  logo.style.border = "2px solid blue";
</script>
```

**After (using `id`):**

```html
<img src="logo.png" id="siteLogo" alt="Company logo">
<script>
  var logo = document.getElementById("siteLogo");
  logo.style.border = "2px solid blue";
</script>
```

### Multiple images that previously shared a `name`

Since `id` values must be unique, you cannot give the same `id` to multiple elements. If you previously used the same `name` on several images and selected them as a group, switch to a shared `class` instead:

```html
<img src="slide1.jpg" class="gallery-image" alt="Mountain landscape">
<img src="slide2.jpg" class="gallery-image" alt="Forest trail">
<img src="slide3.jpg" class="gallery-image" alt="River valley">
<script>
  var images = document.querySelectorAll(".gallery-image");
  images.forEach(function(img) {
    img.style.borderRadius = "8px";
  });
</script>
```

This approach is standards-compliant and gives you flexible, modern element selection using `class` for groups and `id` for unique elements.