References

Beginner-friendly references for web development, with live, editable examples.

The HTML height attribute

Attribute All modern browsers Updated
Quick answer

The HTML height attribute sets the intrinsic height of the element in CSS pixels. It is used on the <img>, <video>, <canvas>, <iframe>, <embed>, <object> and <input type="image"> elements.

Overview

The height attribute sets the rendered height of certain elements — <img>, <video>, <iframe>, <canvas>, <embed> and image inputs — as a number of CSS pixels (unitless, with no "px").

Its most important job, together with width, is preventing layout shift on images and iframes: providing both dimensions lets the browser reserve the correct space before the resource loads, so content does not jump as the page fills in. That improves the Cumulative Layout Shift metric and the reading experience.

As with width, CSS overrides the attribute for display purposes. The common responsive recipe is to keep the width/height attributes for their aspect ratio and add max-width: 100%; height: auto in CSS so the element scales down without distortion.

Syntax

<img src="p.jpg" width="640" height="360" alt="">

Values

Value
A non-negative integer (pixels).

Best practices

  • Set width and height together on images and iframes to prevent layout shift.
  • Use a unitless pixel number — height="480", not height="480px".
  • Add CSS height: auto with max-width: 100% so responsive images keep their ratio.
  • On a <canvas>, the attribute is the drawing resolution, separate from the CSS display size.

Frequently asked questions

What does the height attribute do?
It sets the rendered height of an element such as an image, video, iframe or canvas, in CSS pixels.
Why set both width and height on an image?
So the browser can reserve the exact space before the image loads, avoiding layout shift.
Do I use px in the height attribute?
No. It is a unitless pixel number, e.g. height="480".
How do I keep an image responsive after setting height?
Add CSS max-width: 100%; height: auto so it scales down while preserving its aspect ratio.
headers high