HTML height Attribute

Example

<form action="action.php">
	<label for="fname">First name:</label>
	<input type="text" id="fname" name="fname"><br><br>
	<label for="lname">Last name:</label>
	<input type="text" id="lname" name="lname"><br><br>
	<input type="image" src="demo/submit.jpg" alt="Submit" width="50" height="50">
</form>

Meaning

Specifies the height of the element.

Standard Syntax

<element height="pixels">

Browser Support

Status

Applies to:

The height attribute can be used on the following element:

Element	Attribute
<canvas>	height
<embed>	height
<iframe>	height
<img>	height
<input>	height
< object>	height
<video>	height

Attribute Values

Value	Description
Pixels	The height in pixels.

More Examples:

<canvas> Example

The height attribute specifies the height of the <canvas> element. (in pixels only)

<canvas id="myCanvas" width="100" height="100" style="border:1px solid black">
	Your browser does not support the HTML5 canvas tag.
</canvas>

<script type="text/javascript">
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	
	context.fillStyle = "red";
	context.fillRect(25,25,50,50);
</script>

<embed> Example

Specifies the height of the embedded object.

<h1>embed video</h1>
<embed type="video/webm" src="demo/video.mp4" width="300" height="150"><br><br>

<h1>embed image</h1>
<embed type="image/jpeg" src="demo/image.jpg" width="300" height="150">

<iframe> Example

Specifies the height of the iframe.

By default height of the <iframe> is 150 pixels.

<iframe src="demo/demo.html" height="500" width="400">
	Your browser does not support iframe element.
</iframe>

<img> Example

Specifies the height of an image.

Always specify height and width attributes for images.

<img src="demo/image.jpg" alt="demo" width="300" height="200">

<input> Example

The height attribute is used to size an input element particularly when images are used as in <input type="image">.

CSS properties are preferred.

Always specify both the height and width attributes for images.

<form action="action.php">
	<label for="fname">First name:</label>
	<input type="text" id="fname" name="fname"><br><br>
	<label for="lname">Last name:</label>
	<input type="text" id="lname" name="lname"><br><br>
	<input type="image" src="demo/submit.jpg" alt="Submit" width="50" height="50">
</form>

<object> Example

The height of the displayed resource, in CSS pixels.

Note: Absolute values only allowed, percentages not allowed

<object data="demo/image.jpg" width="300" height="150"></object>

<video> Example

The height attribute specifies the video display area, in CSS pixels.

<video width="340" height="260" controls>
	<source src="demo/video.mp4" type="video/mp4">
	<source src="demo/video.webm" type="video/webm">
	Your browser does not support the video tag.
</video>

❮ HTML Attributes