height

The height attribute in HTML specifies the height of an element, using units like pixels or percentages. It plays a key role in preserving layout consistency, while also considering aspect ratios.

height attribute

The height attribute in HTML sets the height of an element, including tags like <img>, <iframe>, <video> and more. It can be specified in units such as pixels or percentages. By defining the height, space is reserved for the element before it fully loads, helping to maintain layout stability. However, it’s important to use this attribute with caution to prevent distortion of the content, especially when taking the aspect ratio into account.

Syntax

index.html
<tagname height="pixels">

Example

Below is an example of how the height attribute is used in HTML:

Example Image
index.html
<img src="image.jpg" height="200" alt="Example Image">
<iframe src="video.html" height="300"></iframe>
<canvas height="150"></canvas>

In this example, the image will have a height of 200 pixels, the <iframe> will be set to 300 pixels, and the <canvas> will be displayed at 150 pixels.

Values

  • pixels
    • A numeric height in pixels.

Applies To

The height attribute can be applied to the following HTML elements:

Example

Image description
index.html
<img src="/placeholder.jpeg" alt="Image description" height="100" width="200">

Conclusion

The height attribute in HTML enables you to set the height of elements such as <img>, <video>, and <iframe>. It aids in preserving layout stability by reserving space for the element before it finishes loading. This attribute accepts values in pixels, ensuring that content is displayed correctly.