HTML Guides for img

The name attribute on the <img> element is obsolete in HTML5 and must be replaced with the id attribute.

Older pages used <img name="logo"> so scripts could reach the image through document.images["logo"], a pattern common in pre-DOM rollover scripts. HTML5 dropped the attribute. An id serves the same purpose: document.getElementById("logo") finds the image, and document.images also indexes images by their id.

The name attribute is still valid on elements like <input>, <form>, <meta>, and <map>, where it has a distinct function. On <img>, though, it has no valid use in modern HTML.

Invalid example

<imgsrc="logo.png"name="logo"alt="Acme logo">

Valid example

<imgsrc="logo.png"id="logo"alt="Acme logo">

Any script that referenced the image as document.images["logo"] keeps working with the id in place, or can switch to document.getElementById("logo").

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

<imgsrc="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

<imgsrc="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):

<imgsrc="logo.png"name="siteLogo"alt="Company logo">

<script>

varlogo=document.images["siteLogo"];

logo.style.border="2px solid blue";

</script>

After (using id):

<imgsrc="logo.png"id="siteLogo"alt="Company logo">

<script>

varlogo=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:

<imgsrc="slide1.jpg"class="gallery-image"alt="Mountain landscape">

<imgsrc="slide2.jpg"class="gallery-image"alt="Forest trail">

<imgsrc="slide3.jpg"class="gallery-image"alt="River valley">

<script>

varimages=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.