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>.
An <img> element with a height
attribute.
<img src="/img/html/vangogh.jpg" height="250"
alt="Van Gogh, self-portrait" />
For additional details see our HTML img height Reference.
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.
<tagname height="pixels" >
Value | Description |
---|---|
pixels | A numeric height in pixels. |
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. |
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.
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.
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.
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.
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.
An <object> tag with a height attribute.
<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.
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 |