HTML height Attribute

What You’ll Learn

The height attribute sets the vertical size of certain HTML elements in CSS pixels. It is most commonly used on <img>, <iframe>, <canvas>, and <video>. For general page layout, CSS height is the modern approach—but the HTML attribute still matters for media defaults and embedded content.

Purpose of height Attribute

The height attribute defines how tall an element appears on the page. On <img>, <canvas>, and <video>, the value is an integer representing CSS pixels—for example, height="200" means 200 pixels tall. Do not include a px suffix in the HTML attribute value.

On <iframe>, the attribute accepts either an integer pixel value or a percentage string such as height="50%". The percentage is relative to the containing block’s height. Units like vh, rem, and em are not valid in the HTML height attribute—use the CSS height property for those.

📝 Syntax

Add height to a supported element with an integer pixel value (no unit suffix):

<!-- Image: integer CSS pixels -->
<img src="photo.jpg" alt="Landscape" width="400" height="300">
<!-- iframe: pixels or percentage -->
<iframe src="page.html" width="100%" height="400" title="Embedded page"></iframe>
<!-- CSS alternative for any element -->
<style>
  .hero { height: 50vh; }
</style>

Syntax Rules

• On <img>, <canvas>, and <video>: integer CSS pixels only—use height="200", not height="200px".
• On <iframe>: integer pixels or a percentage string such as height="50%".
• vh, rem, em, and other CSS units are not valid in the HTML attribute—use CSS height instead.
• Always pair height with width on images to prevent layout shift while loading.
• height on <td> and <th> is deprecated—use CSS for table cell sizing.
• For responsive layouts, prefer CSS height, max-height, or aspect-ratio.

💎 Values

The height attribute accepts different value formats depending on the element:

• height="128" — Integer CSS pixels on <img>, <canvas>, or <video>. No px suffix.
• height="400" — Pixel height on <iframe> (same integer format).
• height="50%" — Percentage of the containing block’s height. Valid on <iframe> only.
• height: 50vh — CSS only. Viewport units are not valid in the HTML attribute.

<!-- Correct: integer pixels -->
<img src="logo.png" alt="Logo" width="128" height="128">
<!-- Correct: iframe with percentage -->
<iframe src="chart.html" height="50%" title="Sales chart"></iframe>
<!-- Wrong: px suffix in HTML attribute -->
<img src="photo.jpg" height="200px"> <!-- Invalid -->
<!-- Use CSS for vh, rem, em -->
<style>
  .panel { height: 20rem; }
  .banner { height: 40vh; }
</style>

Applicable Elements

HTML height vs CSS height

Examples Gallery

Image height in pixels, iframe embed sizing, and dynamic height changes with JavaScript.

👀 Live Preview

An image sized with height="128" (integer pixels, no px suffix):

Example — Image Height in Pixels

Set image height with an integer value. Always include width, height, and descriptive alt text:

image-height.html

Copy

<img
  src="/images/javascript.png"
  alt="JavaScript logo"
  width="128"
  height="128">

View Output Try It Yourself

📤 Output:

height="128" sets 128 CSS pixels. Do not write height="128px" in HTML.

How It Works

The browser reads height="128" as 128 CSS pixels and renders the image at that vertical size. Pairing width and height reserves space before the image loads, reducing layout shift.

Example — iframe Height

Control embedded content height with the height attribute. Iframes accept integer pixels or a percentage:

iframe-height.html

Copy

<iframe
  src="https://example.com/widget"
  width="100%"
  height="180"
  title="Embedded widget"></iframe>
<!-- Percentage relative to container -->
<iframe src="panel.html" height="50%" title="Side panel"></iframe>

View Output Try It Yourself

📤 Output:

height="180" sets the iframe to 180 CSS pixels. Percentages like height="50%" are also valid on iframes.

How It Works

The iframe’s height attribute sets the frame’s vertical dimension before CSS applies. Always include a title for accessibility. For responsive embeds, combine with CSS or use percentage values relative to a sized container.

Dynamic Values with JavaScript

Change element height at runtime. Use the height property (number) on media elements, or style.height (CSS string) on any element:

dynamic-height.html

Copy

<img id="myImg" src="photo.jpg" alt="Photo" height="100">
<div id="myBox">Resizable box</div>
<script>
  // img, canvas, video: assign a number (CSS pixels)
  var img = document.getElementById("myImg");
  img.height = 200;
  // div and other elements: use style.height with a CSS string
  var box = document.getElementById("myBox");
  box.style.height = "200px";
</script>

View Output Try It Yourself

📤 Output:

This box height changes when you click the button.

Set height to 120px

Current height: auto

How It Works

Media elements expose a numeric height property that maps to CSS pixels. General elements like <div> do not have this property—use element.style.height with a full CSS value including the unit.

♿ Accessibility

• Always include alt on images — Height controls size, not meaning. Descriptive alt text tells screen reader users what the image represents.
• Set title on iframes — Describes embedded content for assistive technology users.
• Preserve aspect ratio when scaling — Distorted images from mismatched width/height harm readability.
• Avoid fixed heights that clip content — Use max-height in CSS when content may overflow.
• Do not rely on height alone for layout — Responsive designs should use CSS with relative units for better zoom and reflow support.
• Test at different zoom levels — Fixed pixel heights can cause usability issues when users enlarge text.

💡 Best Practices