Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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

#

An <img> element with a height attribute.

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




Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides