HTML width/height Attribute vs CSS width/height Property

In HTML5, the width and height attributes are supported by certain elements such as images and graphics-related tags. These attributes define the element's dimensions but can be overridden by CSS styles.

Supported by elements like <img>, <iframe>, <canvas>, and <svg>.
Not supported by elements such as <div>, <span>, <article> and <section>.
Width and height attributes provide default dimensions for supported elements.
CSS width and height properties have higher priority and can override HTML attributes.

Example: CSS Overrides HTML Width and Height Attributes

HTML:

<!-- HTML -->
<img src="image.jpg" width="600" height="200">

CSS:

/* CSS */
img {
    width: 400px;
    height: 400px;
}

The image will be displayed as 400px × 400px.
The CSS width and height properties override the HTML width and height attributes.

Some attributes have a stronger effect on an element's appearance, and overriding them may require using the !important rule in CSS.

Example: Uses height/width attributes and height/width property.

html

<!--Driver Code Starts-->

<!DOCTYPE html>
<html>

<!--Driver Code Ends-->

<head>
    <title> 
        Comparison between height/width
        attributes and height/width
        property
    </title>
    
    <style>
        h1 {
            color: green;
        }
        .container {
            width: 95%;
            border: 2px solid black;
            padding: 5px;
            height: 400px;
        }
        
        .first {
            text-align: center;
            width: 45%;
            float: left;
        }
        
        .second {
            text-align: center;
            width: 45%;
            float: right; 
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        
        <h2>
            HTML height/width Attribute Vs
            CSS height/width property
        </h2>
        
        <div class="container">
            <div class="first">
                <h3>HTML width/height Attributes</h3> 
                <img src="" width="150px" height="150px"
                        style="border:2px solid #000000;">
                
                <iframe src="" width="150px" height="150px"
                        style="border:2px solid #000000;">
                </iframe>
                
                <canvas src="" width="150px" height="150px"
                        style="border:2px solid #000000;">
                </canvas>
                
                <svg src="" width="150px" height="150px"
                        style="border:2px solid #000000;">
                </svg>
            </div>
            
            <div class="second">
                <h3>CSS width/height Property</h3>
                <div width="150px" height="150px"
                        style="border:2px solid #000000;">
                    This is div tag
                </div>
                
                <br><br> 
                
                <span width="150px" height="150px"
                        style="border:2px solid #000000;">
                    This is span tag
                </span>
                
                <br><br>
                
                <article width="150px" height="150px"
                        style="border:2px solid #000000;">
                    This is article tag
                </article>
                
                <br><br>
                
                <section width="150px" height="150px"
                        style="border:2px solid #000000;"> 
                    This is section tag
                </section>
            </div>
        </div>
    </center>
</body>

<!--Driver Code Starts-->

</html>

<!--Driver Code Ends-->

Differences between HTML width/height attribute and CSS width/height property

Here are some differences:

HTML width/height Attributes	CSS width/height Properties
Primarily used for presentation and defining default dimensions.	Used to control the actual rendered size of elements on a web page.
Supported by specific elements such as <img>, <svg>, <canvas>, and <iframe>.	Can be applied to most HTML elements.
Helps reserve space before content loads, reducing layout shifts and improving page stability.	Does not reserve space before content loads, which may cause layout shifts during loading.
Can be overridden by CSS styles.	Takes precedence over HTML width and height attributes when both are specified.

HTML width/height Attribute vs CSS width/height Property

Example: CSS Overrides HTML Width and Height Attributes

Differences between HTML width/height attribute and CSS width/height property

Explore