HTML height Attribute

The height attribute on an element tag sets the height of that HTML element. The height is specified in pixels - without the ‘px‘ unit. Elements that accept this attribute include <img>, <input>, <canvas>, <video>, <embed>, <iframe>, and <object>.

Example

#

A height attribute on an <img> element.

Van Gogh, self-portrait
<img src="/img/html/vangogh.jpg" height="250"
     alt="Van Gogh, self-portrait" />

For additional details see our HTML img height Reference.


Using height

The height attribute specifies the height of an element.

The height is specified in pixels -- without the 'px' unit.

Percentages (%) are not allowed, but most browsers do support it.


Syntax

<tagname height="pixels" >

Values

#

Value Description
pixels A numeric height in pixels.

Elements that accept height

The following elements accept the height attribute.

Elements Description
<img> Displays an image -- see example above
<input> Specifies an input field.
<canvas> Creates a container used to render 2d or 3d graphics.
<video> Creates a video player.
<embed> Embeds an external source.
<iframe> Displays another page inside a frame.
<object> Renders the resource as an object in the page.

<input> with height

An image <input> tag with a height attribute.






<form action="/tutorial/action.html">
  <label for="firstname">First name</label><br />
  <input type="text" id="firstname" name="firstname"><br />
  <label for="lastname">Last name</label><br />
  <input type="text" id="lastname" name="lastname"><br /><br />

  <input type="image" src="/img/html/arrow.png" height="40" alt="Submit">
</form>

For additional details see our HTML input height Reference.


<canvas> with height

A <canvas> tag with a height attribute.

<canvas id="mycanvas" height="110" width="110"></canvas>

<script>

  ( () => {
    let canvas = document.getElementById("mycanvas");
    let context = canvas.getContext("2d");

    context.fillStyle = "lightblue";
    context.fillRect(5, 5, 100, 100);
  } )();

</script>

For additional details see our HTML canvas height Reference.


<video> with height

A <video> tag with a height attribute.

<video width="320" height="240" controls>
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
</video>

For additional details see our HTML video height Reference.


<embed> with height

An <embed> tag with a height attribute.

<embed src="/img/html/vangogh-bedroom.jpg" 
       height="280">

For additional details see our HTML embed height Reference.


<iframe> with height

An <iframe> tag with a height attribute.

<iframe src="https://www.wikipedia.org/wiki/Vincent_van_Gogh"
        height="450" style="width:100%;"></iframe>

For additional details see our HTML iframe height Reference.


<object> with height

An <object> tag with a height attribute.

PDF cannot be displayed.
<object data="/media/sample.pdf"
        type="application/pdf"
        height="500" style="width:100%">
   PDF cannot be displayed.
</object>

For additional details see our HTML object height Reference.


Browser support

Here is when height support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like



Guides