Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML width/height Attribute vs CSS width/height Property
While developing web pages, many times, developers require to manage the size of different HTML elements such as image, div element, span element, etc. Developers can use the width and height CSS properties or HTML attributes to manipulate the dimensions of a particular element.
In this tutorial, we will see the difference between the width/height HTML attribute and CSS properties.
Width and Height HTML Attributes
The width/height attributes in HTML are used for the presentation. It takes the width and height values in the ‘px’, ‘%’, etc. units but not in ‘rem’ units. Also, if we don’t define the unit of the dimension, the default unit is ‘px’.
We can only use it with specific HTML elements such as ‘img’, ‘svg’, ‘canvas’, etc. but not with all HTML elements. Furthermore, it is the weakest way to define the dimensions of the element.
Syntax
Users can follow the syntax below to use the width and height attributes of the HTML.
<img src="URL" width="50px" height="50px" alt="first">
In the above syntax, we added the width and height attribute to the ‘img’ element and defined the dimensions of the image in the pixels.
Example
In the example below, we added 4 images with different dimensions to the web page. We define the width and height in the ‘px’ unit in the first image using HTML attributes. We haven’t defined the unit in the second image, but the dimensions are the same as the first image, as it takes ‘px’ as a default value.
In the third image, we added only the ‘width’ attribute, and it automatically sets the image's height according to the image's aspect ratio. In the last image, we increase the dimensions of the image.
<html> <body> <h2> Using the <i> Height and width attributes </i> in HTML. </h2> <img src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png" width = "50px" height = "50px" alt = "first"> <br> <img src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png" width = "50" height = "50" alt = "second"> <br> <img src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png" width = "100px" alt = "Third"> <br> <img src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png" width = "300" height = "300px" alt = "Fourth"> </body> </html>
Width and Height CSS Properties
The CSS also contains the width and height properties to set up the dimensions of HTML elements. We can access HTML elements in CSS and apply width and height properties. Furthermore, we can set the dimensions of any element, including div and span, using the width and height CSS properties.
Syntax
Users can follow the syntax below to use the width and height CSS properties.
CSS selector {
height: value;
width: value;
}
In the above syntax, we have selected a particular HTML element using the CSS selector and added the height and width CSS properties to set the element's dimensions.
Example
In the example below, we added three images to the web page. Also, we have given different class names to the image. In CSS, we accessed the image using the class names and set the dimensions using the width and height CSS properties.
We used the ‘rem’ unit for the second image, which we can’t use with the HTML attributes. In the output, users can observe the dimensions of the image.
<html>
<head>
<style>
.first {
height: 100px;
width: 100px;
}
.second {
height: 10rem;
width: 10rem;
}
.third {
height: 100;
width: 100;
}
</style>
</head>
<body>
<h2> Using the <i> Height and width properties </i> in CSS </h2>
<img src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png" class = "first" alt = "first"><br>
<img src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png" class = "second" alt = "second"><br>
<img src = "https://www.tutorialspoint.com/static/images/simply-easy-learning.png" class = "third" alt = "third">
</body>
</html>
Width/height HTML Attribute VS Width//height CSS Properties
Using the width/height HTML attribute to define the dimensions of the image is the weakest way. If we define the dimensions using both HTML attributes and CSS properties, the value of CSS properties overrides the values of HTML attributes, which is the main difference.
Through examples, let’s understand the difference between the width/height HTML attribute and CSS properties.
Example
In the example below, we defined two div elements. We accessed the first div element using the class name in the CSS and set the dimensions. For the second div element, we used the HTML attributes to set the dimensions. In the output, we can observe that as the div element doesn’t support width/height HTML attributes, the second div element’s dimensions don’t change.
Also, we used the HTML attributes to set the dimensions of the image. Furthermore, we access the image in CSS and set the dimensions. In the output, we can see that the width/height CSS properties' values override the width/height HTML attribute’s value.
<html>
<head>
<style>
.test {
height: 100px;
width: 200px;
background-color: yellow;
}
img {
height: 100px;
width: 300px;
}
</style>
</head>
<body>
<h2> Difference between the <i> height/css HTML attribute and CSS properties. </i> </h2>
<div class = "test"> Using CSS properties </div><br>
<div height = "100px" width = "200px"> Using the height/css HTML attribute. </div>
<br>
<img src = "https://www.tutorialspoint.com/images/logo.png?v2" alt = "logo" height = "30px" width = "50px">
</body>
</html>
Difference Table
Difference |
HTML’s width/height attribute |
CSS’s width/height properties |
|---|---|---|
Usage |
It is used to set the initial dimensions for HTML elements like ‘img’, ‘svg’, ‘canvas.’, etc. |
It can be used with any HTML element. |
control |
It sets the static dimensions for HTML elements, which we can’t change. |
It sets the dynamic dimensions for HTML elements, which we can change using JavaScript or JQuery. |
Overriding |
CSS properties can override it. |
It can override the value of width/height HTML attributes. |
Specificity |
Lower specificity and weakest way to define the dimensions. |
Higher specificity. |
Responsiveness |
As it sets static dimensions for HTML elements, we have limited control over responsiveness. |
We can have better control over responsiveness using media queries. |
Inline / External |
It is inline with the HTML tag. |
It can be inline, internal, or external. |
This tutorial taught us the difference between the width/height HTML attribute and CSS properties. Using the HTML attributes to define dimensions is the weakest way, so developers should avoid using it and use the CSS properties.
161 Views
