HTML Guide

The controlslist attribute on the <video> element is experimental, and not yet valid in the current HTML5 standard, so you should use it with caution as it may not be supported by all browsers.

The <table> element does not accept a height attribute. Use CSS instead.

The W3C HTML Validator issue you encountered indicates that the value of the height attribute for an <img> element is set to “100%”, which is not allowed in HTML. The height attribute must be a specific digit that represents the height in pixels (e.g., “150”), rather than a percentage or any other unit.

How to Fix the Issue

To resolve this issue, you need to specify a numeric value for the height attribute instead. If you want the image to occupy a certain percentage of the container, use CSS instead of the height attribute.

Example of Incorrect HTML

Here is an example that causes the validation issue:

<img src="image.jpg" height="100%" alt="Example Image">

Corrected HTML Using Pixel Values

To correct the issue, replace the percentage with a pixel value:

<img src="image.jpg" height="200" alt="Example Image">

Alternative: Using CSS for Responsive Design

If you want the image to scale responsively and occupy 100% of the width of its container, consider using CSS:

<style>
  .responsive-img {
      width: 100%;
      height: auto; /* Maintains aspect ratio */
  }
</style>

<img src="image.jpg" class="responsive-img" alt="Example Image">

Summary

• Do not use percentage values for the height attribute of <img> tags.
• Use pixel values for fixed dimensions.
• For responsive design, use CSS to set the dimensions instead.

The width and height attributes on <img> elements expect a digit to specify the dimension in pixels. It should not contain units, letters or percent signs.

You can achieve this using CSS instead, for example:

<!-- Invalid syntax, the height attribute expects only digits -->
<img src="photo.jpg" alt="cat" height="auto" />

<!-- Valid syntax using CSS -->
<img src="photo.jpg" alt="cat" style="height: auto"  />

The attributes width and height of <iframe> elements expect a non-negative integer, so an empty string is not allowed. Either define the correct dimension, or remove this attribute.

The attributes width and height of <img> elements expect a non-negative integer, so an empty string is not allowed. Either define the correct dimension, or remove this attribute.

The <iframe> element, used to embed another document inside the current document, accepts both attributes width and height which must be valid non-negative integers. Percentages are not allowed for these attributes.

The attributes width and height on an iframe expect a valid positive integer without any decimals.

Here’s an example of incorrect code where decimals are being used for dimension attributes:

<iframe src="example.html" height="602.88" width="800.2"></iframe>

Corrected code without decimals:

<iframe src="example.html" height="603" width="800"></iframe>

In the corrected code, the width and height values has been changed to a whole number, which conforms to the standard integer value expected by the W3C validator.

The attributes width and height on an iframe expect a valid positive integer without any decimals.

Here’s an example of incorrect code where decimals are being used for dimension attributes:

<img src="photo.jpg" alt="Dog" height="602.88" width="800.2">

Corrected code without decimals:

<img src="photo.jpg" alt="Dog" height="603" width="800">

In the corrected code, the width and height values has been changed to a whole number, which conforms to the standard integer value expected by the W3C validator.

<video> elements accept a width attribute to specify the width in CSS pixels. This value can only be an integer, it should not contain units or %. If you need to specify a percentage width, you can do that with CSS.

Here’s an example of setting width and height on a video element.

<video controls width="640" height="480">
  <source src="/media/cc0-videos/flower.webm" type="video/webm">
</video>