HTML - height Attribute

HTML height attribute is used to specify the vertical dimension of an element. We can also use height as a property in CSS to specify the height of the elements.

This attribute is essential for keeping the aspect ratio of elements and assuring uniform design. By managing the visual presentation of items inside the content, web developers can control the height attribute to create pixel-perfect layouts and improve user experience.

Syntax

<tag height = 'value'></tag>

Any CSS meassurment value will be accepted as height attribute value.

Applies On

Below listed elements allow using of the HTML height attribute

Element	Description
<img>	HTML <img> tag is used to render a image in webpage.
<canvas>	HTML <canvas> is used to draw graphics using JavaScript.
<embed>	HTML <embed> tag is used as a container for external applications and multimedia.
<iframe>	HTML <iframe> is an inline frame that allows us to embed another document within the current HTML document..
<input>	HTML <input> is used to accept various type of input from user.
<object>	HTML <object> tag in HTML is used to show multimedia on web pages, including audio, video, pictures, webisite, PDFs, and Flash.
<video>	HTML <video> is used to render a video in webpage

Example of HTML height attribute

Below examples will illustrate the HTML height attribute, where and how we should use this attribute!

Set height of Image Element

All images have it's own height but we can set the height using HTML height attribute as per our need. Here in this example we will set the image height using px(pixel) unit. You can use whatever measuring unit is comfortable to you.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' attribute</title>
</head>

<body>
    <h3>
        Example of the HTML 'height' Attribute
    </h3> 
    <p>
        Here you can see the same image with different height value,
        as we did not set the width attribute so the width is adujusted
        based on height of the image.
    </p>
    <!--HTML 'height' attribute-->
    <strong>Image with 50px height</strong>
    <br>
    <img src="html/images/html-mini-logo.jpg" height="50px">
    <br>
    <strong>Image with 100px height</strong>
    <br>
    <img src="html/images/html-mini-logo.jpg" height="100px"> 
</body>
</html>

Set height of input Element

In this following example code we will use input tag to render an image and set the height of the image in the input element.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        In this example we set the width also so 
        the image can render on fixed dimension 350*100(w*h).
    </p>
    <!--HTML 'height' attribute-->
    <strong>Image with 100px height</strong>
    <br>
    <input type="image" src="/html/images/html-mini-logo.jpg" 
           height="100px" width="350px"> 
</body>

</html>

Set height of object Element

Let's look at the following example, where we are going to use the height attribute on the object element. We have created a image object to test the height attribute on object element.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        Here we did not mention any unit but you 
        can as per the need, without the unit it 
        measure in px(pixels).
    </p>
    <!--HTML 'height' attribute-->
    <strong>Object with 300 height</strong>
    <br>
    <object data=
"https://www.plus2net.com/php_tutorial/images/pdf-student-table.PNG" 
            height="300"> 
    </object>
</body>

</html>

Set height of canvas Element

In this example we are creating a canvs and set height for a canvas element using HTML height attribute.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have created a canvas 400*200 and using 
        JavaScript to fill the color by mentioning the coords
    </p>
    <!--HTML 'height' attribute--> 
    <canvas id="myCanvas" width="400" height="200">
    </canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(30, 50, 335, 100);
    </script>
</body>

</html>

Set height of iframe Element

Here we set the height of iframe element using height attribute and rendering out HTML tutorial landing page.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have created an iframe 400*400 and 
        rendering HTML landing page
    </p>
    <!--HTML 'height' attribute--> 
    <iframe src="/html/index.htm" width="450" height="400">
</body>

</html>

Set height of embedded Element

In this example we will embed out HTML tutorial landing page and will adjust the height of embedded element using height attribute

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have embedded an image and 
        rendering the image in 300*100
    </p>
    <!--HTML 'height' attribute--> 
    <embed type="image/jpg" src="html/images/html.jpg"
           width="300" height="100">
</body>

</html>

Set height of video Element

In this example we included a video and set the height of video element using height attribute. May be video will not play because of broken link or access issue.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have included a video and 
        rendering the video in 320*240
    </p>
    <!--HTML 'height' attribute--> 
    <video width="320" height="240" controls>
      <source src=
"https://cdn.pixabay.com/vimeo/165221419/ipad-2988.mp4?width=640&hash=4816e81143efa7f31f1e8c86c5605f43fdfac941" 
              type="video/mp4">
</body>

</html>

Supported Browsers

Attribute
height	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm