HTML Guides for required attribute

The HTML specification requires the src attribute of an <img> element to be a valid, non-empty URL. When you set src="", the browser has no resource to fetch, but many browsers will still attempt to make a request — often resolving the empty string relative to the current page URL. This means the browser may re-request the current HTML document as if it were an image, wasting bandwidth and potentially causing unexpected server-side behavior.

Beyond the technical waste, an empty src is problematic for accessibility. Screen readers rely on the <img> element to convey meaningful content. An image with no source provides no value and can confuse assistive technology users. Search engine crawlers may also flag this as a broken resource, negatively affecting SEO.

This issue commonly arises in a few scenarios:

• Placeholder images — developers leave src empty intending to set it later via JavaScript.
• Template rendering — a server-side template or frontend framework outputs an <img> tag before the image URL is available.
• Lazy loading implementations — the real source is stored in a data-src attribute while src is left empty.

How to fix it

The simplest fix is to provide a valid image URL in the src attribute. If the image source isn’t available yet, consider these alternatives:

1. Don’t render the <img> element at all until a valid source is available.
2. Use a small placeholder image (such as a transparent 1×1 pixel GIF or a lightweight SVG) as a temporary src.
3. Use native lazy loading with loading="lazy" and a real src, letting the browser handle deferred loading instead of relying on an empty src.

Examples

❌ Bad: empty src attribute

<img src="" alt="Profile photo">

This triggers the validation error because the src value is an empty string.

❌ Bad: src with only whitespace

<img src="  " alt="Profile photo">

Whitespace-only values are also considered invalid and will produce a similar error.

✅ Good: valid image path

<img src="photo.jpg" alt="Profile photo">

✅ Good: placeholder image for lazy loading

If you’re implementing lazy loading and need a lightweight placeholder, use a small inline data URI or a real placeholder file:

<img
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  data-src="photo.jpg"
  alt="Profile photo">

✅ Good: native lazy loading with a real src

Modern browsers support the loading attribute, eliminating the need for an empty src workaround:

<img src="photo.jpg" alt="Profile photo" loading="lazy">

✅ Good: conditionally render the element

If the image URL might not be available, avoid rendering the <img> tag entirely. For example, in a template:

<!-- Only include the img element when a source exists -->

<img src="photo.jpg" alt="Profile photo">

In frameworks like React, Vue, or server-side templating engines, use conditional logic to skip the <img> element when the URL is empty rather than outputting a tag with an empty src.

The src attribute is one of two required attributes on every <img> element (the other being alt). The HTML specification mandates src because an image element without a source has no meaningful content to render. Omitting it produces invalid markup and leads to unpredictable browser behavior — some browsers may display a broken image icon, while others may render nothing at all.

This issue commonly occurs in a few scenarios:

• Templating placeholders — A developer adds an <img> tag intending to populate the src dynamically but forgets to set a default value.
• Lazy loading implementations — Some lazy-loading scripts store the real URL in a data-src attribute and omit src entirely, which results in invalid HTML.
• Incomplete markup — The attribute is simply forgotten during development.

Beyond validation, a missing src attribute causes accessibility problems. Screen readers rely on well-formed <img> elements to convey image information to users. A malformed image element can confuse assistive technologies and degrade the user experience.

How to fix it

1. Add a src attribute with a valid URL pointing to your image.
2. Always include an alt attribute as well — it’s also required and provides a text alternative for the image.
3. If you’re using lazy loading and want to defer the actual image source, set src to a lightweight placeholder (such as a tiny transparent image or a low-quality preview) and use the native loading="lazy" attribute instead of removing src.

Examples

❌ Missing src attribute

<img alt="A sunset over the ocean">

This triggers the validation error because src is absent.

❌ Source stored only in a data- attribute

<img data-src="/images/photo.jpg" alt="A sunset over the ocean">

While data-src is a valid custom data attribute, it does not satisfy the requirement for src. The validator will still report the error.

✅ Correct usage with src and alt

<img src="/images/photo.jpg" alt="A sunset over the ocean">

✅ Lazy loading with a placeholder src

<img
  src="/images/photo-placeholder.jpg"
  data-src="/images/photo-full.jpg"
  alt="A sunset over the ocean"
  loading="lazy">

Here, src points to a small placeholder image so the markup stays valid, while data-src holds the full-resolution URL for your lazy-loading script to swap in.

✅ Native lazy loading (no JavaScript needed)

<img src="/images/photo.jpg" alt="A sunset over the ocean" loading="lazy">

Modern browsers support the loading="lazy" attribute natively, so you can keep a valid src and still defer off-screen images without any custom scripting.

Required attributes exist because they provide information that is fundamental to the element’s purpose. For example, an <img> element without a src attribute has no image to display, and without an alt attribute, assistive technologies have no fallback text to describe the image. A <link> element without rel gives the browser no way to understand the relationship of the linked resource. When you omit a required attribute, several things can go wrong:

• Accessibility issues: Screen readers and other assistive technologies depend on specific attributes to convey meaning. A missing alt on <img> leaves visually impaired users without any description of the content.
• Broken functionality: Some elements simply won’t work without their required attributes. A <form> with an <input> that’s missing a type attribute may still render (browsers default to type="text"), but other elements like <map> without name won’t function as intended.
• Standards non-compliance: Omitting required attributes produces invalid HTML, which can lead to unpredictable rendering across different browsers.

To fix this issue, identify which attribute is missing from the element flagged by the validator, then add it with an appropriate value. Here are common elements and their required attributes:

Examples

Missing alt attribute on <img>

This is one of the most common validation errors. The alt attribute is required on every <img> element.

❌ Incorrect — missing alt attribute:

<img src="photo.jpg">

✅ Correct — alt attribute provided:

<img src="photo.jpg" alt="A sunset over the ocean">

If the image is purely decorative and carries no meaningful content, use an empty alt attribute:

<img src="decorative-border.png" alt="">

Missing rel attribute on <link>

The rel attribute tells the browser what the linked resource is for.

❌ Incorrect — missing rel attribute:

<link href="styles.css">

✅ Correct — rel attribute provided:

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

Missing name attribute on <map>

The <map> element requires a name attribute so it can be referenced by an <img> element’s usemap attribute.

❌ Incorrect — missing name attribute:

<map>
  <area shape="rect" coords="0,0,100,100" href="/section" alt="Section">
</map>

✅ Correct — name attribute provided:

<map name="navigation">
  <area shape="rect" coords="0,0,100,100" href="/section" alt="Section">
</map>
<img src="nav.png" alt="Site navigation" usemap="#navigation">

Missing dir attribute on <bdo>

The <bdo> (bidirectional override) element exists specifically to override text direction, so the dir attribute is essential.

❌ Incorrect — missing dir attribute:

<p>The word in Arabic is <bdo>مرحبا</bdo>.</p>

✅ Correct — dir attribute provided:

<p>The word in Arabic is <bdo dir="rtl">مرحبا</bdo>.</p>

When you encounter this validation error, read the validator message carefully — it will tell you exactly which element and which attribute is missing. Add the attribute with a meaningful value appropriate to your content, and revalidate to confirm the issue is resolved.