Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Set the width of the element in HTML
The width attribute in HTML sets the width of an element in pixels. This attribute is supported by several HTML elements including <canvas>, <embed>, <img>, <input>, <object>, and <video>. The width attribute provides a quick way to control element dimensions directly in HTML markup.
Syntax
Following is the syntax for using the width attribute −
<element width="pixels">
The value is specified in pixels as a positive integer. For example, width="300" sets the element width to 300 pixels.
Elements Supporting Width Attribute
The width attribute can be used with the following HTML elements −
<canvas>− Sets the drawing area width<embed>− Controls embedded content width<iframe>− Sets iframe display width<img>− Specifies image display width<input>− Controls form input field width (for image type)<object>− Sets embedded object width<video>− Controls video player width
Video Element with Width
The <video> element commonly uses the width attribute to control the video player size. When combined with the height attribute, it defines the video display dimensions.
Example
Following example shows how to set the width of a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video Width Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Custom Width</h2>
<video width="400" height="250" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p>The video player above is 400 pixels wide and 250 pixels tall.</p>
</body>
</html>
The output displays a video player with the specified width of 400 pixels −
Video with Custom Width [Video Player - 400px × 250px with controls] The video player above is 400 pixels wide and 250 pixels tall.
Image Element with Width
The <img> element uses the width attribute to control image display size. Setting only the width will maintain the image's aspect ratio automatically.
Example
<!DOCTYPE html> <html> <head> <title>Image Width Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Images with Different Widths</h2> <p>Original size:</p> <img src="https://via.placeholder.com/300x200/4CAF50/white?text=Sample+Image" alt="Sample"> <p>Width set to 150px:</p> <img src="https://via.placeholder.com/300x200/4CAF50/white?text=Sample+Image" alt="Sample" width="150"> <p>Width set to 500px:</p> <img src="https://via.placeholder.com/300x200/4CAF50/white?text=Sample+Image" alt="Sample" width="500"> </body> </html>
The output shows the same image displayed at different widths −
Images with Different Widths Original size: [300×200 green sample image] Width set to 150px: [150×100 green sample image - smaller] Width set to 500px: [500×333 green sample image - larger]
Canvas Element with Width
For the <canvas> element, the width attribute sets the drawing area dimensions. This is different from CSS width, which only affects display size.
Example
<!DOCTYPE html>
<html>
<head>
<title>Canvas Width Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Canvas with Custom Width</h2>
<canvas id="myCanvas" width="400" height="200" style="border: 2px solid #333;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw a rectangle
ctx.fillStyle = '#4CAF50';
ctx.fillRect(50, 50, 300, 100);
// Add text
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('Canvas: 400px wide', 80, 110);
</script>
</body>
</html>
The canvas displays with a 400-pixel width drawing area −
Canvas with Custom Width [Canvas with green rectangle and white text, bordered, 400px wide]
Width vs CSS Width
The HTML width attribute differs from CSS width property in several important ways −
| HTML Width Attribute | CSS Width Property |
|---|---|
| Sets actual element dimensions | Controls visual display size only |
| Values in pixels only | Supports pixels, percentages, em, rem, etc. |
| Affects element's internal structure | Only affects rendering appearance |
| Cannot be overridden easily | Can be overridden by other CSS rules |
| Maintained in DOM as attribute | Applied through stylesheets |
Example − Comparing HTML and CSS Width
<!DOCTYPE html>
<html>
<head>
<title>Width Comparison</title>
<style>
.css-width { width: 300px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML Width vs CSS Width</h2>
<p>HTML width attribute:</p>
<img src="https://via.placeholder.com/200x100/FF5722/white?text=HTML+Width" width="300" alt="HTML Width">
<p>CSS width property:</p>
<img src="https://via.placeholder.com/200x100/2196F3/white?text=CSS+Width" class="css-width" alt="CSS Width">
</body>
</html>
Both images display at 300 pixels wide, but the HTML attribute method is set directly in the markup −
HTML Width vs CSS Width HTML width attribute: [Orange image scaled to 300px width] CSS width property: [Blue image scaled to 300px width]
Conclusion
The HTML width attribute provides a direct way to set element dimensions in pixels for various HTML elements including images, videos, canvas, and embedded content. While CSS width offers more flexibility with units and responsive design, the HTML width attribute is useful for setting fixed dimensions directly in markup, especially for media elements where specific pixel dimensions are required.
341 Views
