HTML Guide for width

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 sizes attribute is used to complement the srcset attribute on an <img> tag for responsive images. When this attribute is present, all image candidates must specify its width.

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 sizes attribute is used to complement the srcset attribute on an <img> tag for responsive images. When this attribute is present, all image candidates must specify its width.

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.

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.

<img> elements accept a width attribute to specify the size in 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:

<img src="photo.jpg" alt="red car" style="width:100%;">

<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>

The width and height attributes on <img> and <iframe> elements expect a digit to indicate the number of pixels. Ensure that this attribute contains only digits.

For example:

<!-- This is invalid because width is not a digit -->
<img width="225px" height="100px" alt="cat" src="cat.jpg" />

<!-- This is valid -->
<img width="225" height="100" alt="cat" src="cat.jpg" />

The value px for a width property is incorrect, it should include both the value and the units, like 10px, or just 0 if it’s zero width. Using only the units without the value is incorrect.

Example of Incorrect CSS

<style>
  .example {
    width: 300; /* This is missing the unit */
  }
  .example2 {
    width: px; /* This is missing the value */
  }
</style>

Corrected Example of CSS

Make sure to include the unit (like px, em, %, etc.) when specifying the width:

<style>
  .example {
    width: 300px; /* Correctly includes 'px' unit */
  }
</style>

Conclusion

Always ensure to provide proper units when specifying dimensions in CSS. Common units are:

• px (pixels)
• em (relative to the font size of the element)
• % (percentage of the parent element’s width)

The value specified for a width attribute in CSS is not valid.

The width CSS property sets an element’s width. There are many allowed values for this attribute, for example:

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/* Global values */
width: inherit;
width: initial;
width: revert;
width: unset;

Both <table> and <td> elements no longer accept a width attribute. Instead, you should use CSS as in this example:

<table style="width:100%;">
  <tr>
    <td style="width:50px;">Name</td>
  </tr>
</table>