HTML width Attribute

HTML width Attribute

The HTML width attribute specifies the width of visual content for certain HTML elements. For most supported elements, the value represents a width in CSS pixels and is written as a non-negative integer without a unit.

Elements That Use the width Attribute

The width attribute is used with several HTML elements that represent visual or embedded content.

width Attribute Value

For the dimension attributes on <img>, <iframe>, <embed>, <object>, <video>, image <source> elements, and <input type="image">, the width value is a non-negative integer representing CSS pixels.

<img src="image.png" width="600" height="400" alt="Example image">

Do not include a CSS unit such as px or a percentage sign in the HTML attribute value. For example, use width="600", not width="600px" or width="50%".

Using width with Images

On an <img> element, the width attribute specifies the image's intrinsic width in CSS pixels. Providing both width and height also gives the browser information about the image's aspect ratio before the image finishes loading.

<img src="/img/images/image-600x400.png"
     width="600"
     height="400"
     alt="Image showing dimensions of 600 by 400 pixels">

When the dimensions match the image's aspect ratio, the browser can reserve the appropriate amount of space during page layout. CSS can still be used to make the displayed image responsive.

Using width with Embedded Content

The width attribute can specify the width of content embedded with <iframe>, <embed>, and <object>.

<iframe src="example.html"
        width="600"
        height="400"
        title="Example page"></iframe>

The value provides the width in CSS pixels. CSS can be used when more flexible sizing is required.

Using width with <video>

On a <video> element, the width attribute specifies the width of the video's display area in CSS pixels.

<video src="video.mp4"
       width="640"
       height="360"
       controls></video>

When both width and height are provided, they should preserve the intended aspect ratio of the video.

Using width with <input>

The width attribute applies to an <input> element only when its type is image. It specifies the preferred width of the image button.

<input type="image"
       src="submit.png"
       width="120"
       height="40"
       alt="Submit">

Do not use the HTML width attribute to size text fields, checkboxes, radio buttons, or other input types. Use CSS when their visual width needs to be controlled.

Using width with <source>

The width attribute can be used on a <source> element when its parent is a <picture> element. It specifies the intrinsic width of the image resource in pixels.

<picture>
  <source media="(min-width: 700px)"
          srcset="/img/images/image-900x600.png"
          width="900"
          height="600">
  <img src="/img/images/image-600x400.png"
       width="600"
       height="400"
       alt="Responsive example image">
</picture>

The width attribute is not used on <source> elements whose parent is <audio> or <video>.

Using width with <canvas>

On a <canvas> element, the width attribute defines the horizontal size of the canvas bitmap and its coordinate space. If the attribute is omitted or invalid, the default width is 300.

<canvas width="600" height="300">
  Your browser does not support the canvas element.
</canvas>

Changing only the CSS width of a canvas changes how the existing bitmap is displayed rather than changing the number of pixels in its drawing surface. This can cause the canvas content to appear stretched or distorted if the proportions do not match.

HTML width and CSS

The HTML width attribute provides intrinsic or element-specific dimension information, while the CSS width property controls layout and presentation. CSS sizing can override the displayed width established by an HTML dimension attribute.

<img src="/img/images/image-600x400.png"
     width="600"
     height="400"
     alt="Example image">

img {
  width: 100%;
  max-width: 600px;
  height: auto;
}

This approach preserves useful intrinsic dimension information in the HTML while allowing the image to shrink when the available space is narrower than 600 pixels.

Common Mistakes

Do not include units such as px or percentages in an HTML width dimension attribute. Use a non-negative integer such as width="600".

Do not use the HTML width attribute on arbitrary elements such as <div> or <p>. Use the CSS width property for general layout and presentation.

Do not use width on ordinary <input> controls. The HTML attribute applies only when the input is an image button.

Do not use width on a <source> element inside <audio> or <video>. Its dimension attributes apply when <source> is used inside <picture>.

When specifying both width and height for visual content, use dimensions that represent the intended aspect ratio rather than values that unnecessarily distort the content.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The established uses of the width attribute are widely supported in current core browsers. Some newer element-specific uses can have different compatibility histories and should be checked separately when needed.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the width Attribute

The example displays the same 600 × 400 image at two different widths. The first image uses its full 600-pixel width, while the second uses a width of 300 pixels with a proportional height of 200 pixels.

Summary

The HTML width attribute provides width information for visual content such as images, videos, embedded resources, canvases, image buttons, and image sources. Dimension values are generally written as non-negative integers representing CSS pixels without units. Use the HTML attribute when it has defined element-specific meaning, and use CSS when controlling general layout or responsive presentation.