HTML height Attribute

HTML height Attribute

The HTML height attribute specifies the height of certain visual and embedded HTML elements. It can be used with images, videos, iframes, canvases, embedded resources, and other supported elements.

Syntax

The height attribute is added to an element with a non-negative integer value representing its height in CSS pixels.

<img src="image.jpg" alt="Example image" height="300">

In this example, the image has a specified height of 300 CSS pixels.

Attribute Value

The height attribute generally accepts a non-negative integer that represents a height in CSS pixels. The number is written without a CSS unit such as px.

<img src="image.jpg" alt="Example image" height="250">

Do not include px or another CSS unit in the HTML attribute value.

Elements That Use the height Attribute

The height attribute can be used with several HTML elements that display images, video, embedded content, or a drawing surface.

Using the height Attribute

The height attribute provides a height for an element directly in the HTML markup.

<img src="photo.jpg" alt="Mountain landscape" height="300">

<iframe src="example.html" height="400"></iframe>

<video src="video.mp4" height="360" controls></video>

Although these examples all use the same attribute name, the exact effect of height depends on the element to which it is applied.

Image Height

When used on an <img> element, the height attribute provides the image's intrinsic height. It is often specified together with the width attribute.

<img src="/img/images/puppy.jpg"
  alt="Puppy in a basket"
  width="500"
  height="600">

Providing both dimensions allows the browser to determine the image's aspect ratio before the image finishes loading. This helps the browser reserve the appropriate amount of space in the page layout.

Canvas Height

On a <canvas> element, the height attribute controls the height of the canvas drawing surface rather than simply applying a visual CSS size.

<canvas width="400" height="200">
  Your browser does not support the canvas element.
</canvas>

If the height attribute is omitted from a <canvas>, its default drawing-surface height is 150 pixels.

HTML height vs. CSS height

The HTML height attribute and the CSS height property are not interchangeable in every situation. The HTML attribute provides an intrinsic or element-specific dimension, while CSS controls the rendered size as part of the page's presentation.

<img src="image.jpg" alt="Example image" width="800" height="600">

img {
  max-width: 100%;
  height: auto;
}

In this example, the HTML attributes provide the image's intrinsic dimensions while CSS allows the displayed image to scale down responsively without changing its aspect ratio.

For a <canvas>, changing its size with CSS does not change the dimensions of its drawing surface in the same way as changing the HTML width and height attributes.

Using width and height Together

For images and other content with a known aspect ratio, specifying both width and height provides the browser with useful dimension information before the resource has finished loading.

<img src="photo.jpg"
  alt="Example photograph"
  width="600"
  height="400">

The dimensions above describe an aspect ratio of 3:2. CSS can still resize the image while preserving that ratio.

Common Mistakes

Do not include a CSS unit such as px in a dimension attribute.

<!-- Incorrect -->
<img src="image.jpg" alt="Example image" height="300px">

<!-- Correct -->
<img src="image.jpg" alt="Example image" height="300">

Do not use the HTML height attribute on elements that do not support it. Use the CSS height property when you need to control the height of general layout elements such as <div> or <section>.

When specifying both width and height for an image, use values that represent the image's intended aspect ratio. Incorrect dimensions can provide the browser with the wrong aspect ratio before CSS or the image itself determines the final rendered size.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The height attribute and its established uses are widely supported in current core browsers. Compatibility details can vary depending on the element where it is used.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the height Attribute

The example uses the width and height attributes to provide the intrinsic dimensions of an image while CSS allows the image to scale down responsively.

Summary

The HTML height attribute specifies the height of supported visual and embedded elements. Its value is generally a non-negative integer representing CSS pixels and is written without a unit. For images, using height together with width provides intrinsic dimensions and an aspect ratio that can help the browser reserve space before the image loads. CSS can still be used to control the final rendered size and create responsive layouts.