HTML width Attribute

The width attribute on an element sets the width of the element. The width is specified in pixels -- without the ‘px‘ unit. Elements that accept this attribute include <img>, <input>, <canvas>, <video>, <embed>, <iframe>, and <object>.

Example

#

A width attribute on an <img> element.
The width attribute overrides the original image width.

Van Gogh, Self Portrait
<img src="/img/html/vangogh-lg.jpg" width="240" 
     alt="Van Gogh, Self Portrait" />

For additional details see our HTML img width Reference.


Using width

The width attribute specifies the width of the element.

The width is defined in pixels, without the 'px' unit.

To define the width in % or another unit, use the CSS width property.


Syntax

<tagname width="pixels">

Values

#

Value Description
pixels A number (e.g. 450).

Elements that accept width

These elements accept the width attribute.

Elements Description
<img> Specifies an HTML image -- see example above.
<input> Creates an input field.
<canvas> Renders 2d or 3d graphics.
<video> Creates a video player.
<embed> Displays an external source in the page.
<iframe> Displays another page inside a frame.
<object> Embeds a resource as an object.

<input> with width

A width attribute on an <input> element of type image.
The image button with the arrow is 40 pixels wide.






<form action="/tutorial/action.html">
  <label for="firstname">First name</label> <br />
  <input type="text" id="firstname" name="firstname"> <br />
  <label for="lastname">Last name</label> <br />
  <input type="text" id="lastname" name="lastname"> <br /><br />

  <input type="image" src="/img/html/arrow.png" 
         width="40" height="40" alt="Submit">
</form>

For additional details see our HTML input width Reference.


<canvas> with width

A width attribute on a <canvas> element.

<canvas id="mycanvas" height="120" width="120"
        style="border:1px solid #aaa;">
</canvas>

<script>

  ( () => {
    let canvas = document.getElementById("mycanvas");
    let context = canvas.getContext("2d");

    context.fillStyle = "lightblue";
    context.fillRect(10, 10, 100, 100);
  } )();

</script>

For additional details see our HTML canvas width Reference.


<video> with width

A width attribute on a <video> element.

<video width="320" height="240" controls>
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
</video>

For additional details see our HTML video width Reference.


<embed> with width

A width attribute on an <embed> element.

<embed  width="300"
        src="/img/html/vangogh-bedroom.jpg">

For additional details see our HTML embed width Reference.


<iframe> with width

A width attribute on an <iframe> element.

<iframe src="https://www.wikipedia.org/wiki/Vincent_van_Gogh"
        width="400" style="height:400px;width:100%"></iframe>

For additional details see our HTML iframe width Reference.


<object> with width

A width attribute on an <object> element.

<object data="/media/sample.pdf" type="application/pdf"
        width="800" height="450" style="width:100%">
</object>

For additional details see our HTML object width Reference.


Browser support

Here is when width support started for each browser:

Chrome
1.0 Sep 2008
Firefox
16.0 Oct 2012
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like



Guides