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>.
A width attribute on an <img> element.
The width attribute overrides the original image width.
<img src="/img/html/vangogh-lg.jpg" width="240"
alt="Van Gogh, Self Portrait" />
For additional details see our HTML img width Reference.
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 other unit, use the CSS width property.
<tagname width="pixels">
| Value | Description |
|---|---|
| pixels | A number (e.g. 450). |
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. |
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.
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.
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.
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.
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.
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.
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 |
