YouTip

# HTML `` height Attribute The `height` attribute of the `` tag specifies the height of an image in pixels. This tutorial provides a comprehensive guide on how to use the `height` attribute, its syntax, browser compatibility, and best practices for modern web development. --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *pixels* | Specifies the height of the image in pixels (e.g., `height="100"`). | --- ## Code Examples ### Basic Usage The following example defines an image with both height and width set to 42 pixels: ```html ``` ### Responsive Image with CSS Override While the HTML `height` attribute sets the default dimension, you can override it using CSS for responsive designs: ```html ``` --- ## Browser Support The `height` attribute is universally supported by all major web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer * Safari * Opera --- ## Key Considerations & Best Practices ### 1. Preventing Layout Shifts (CLS) It is highly recommended to always specify both the `height` and `width` attributes on your `` elements. When these attributes are present, the browser can calculate the aspect ratio of the image before it actually loads. This allows the browser to reserve the correct amount of space in the page layout, preventing **Cumulative Layout Shift (CLS)**—a jarring user experience where page content jumps around as images load. ### 2. Avoid Using Attributes for Image Scaling Do not use the `height` and `width` attributes to shrink a large image file down to a smaller display size. For example, if you have a high-resolution image that is $4000 \times 3000$ pixels, do not display it as $400 \times 300$ using HTML attributes. The user's browser will still have to download the entire large file, which wastes bandwidth and slows down page load times. Instead, scale the image to the correct dimensions using an image editor or a build tool before uploading it to your server. ### 3. HTML 4.01 vs. HTML5 Differences * **HTML 4.01:** The height could be defined either in pixels or as a percentage of the containing element (e.g., `height="50%"`). * **HTML5:** The height value **must** be defined as an integer in pixels. Percentage values are no longer valid for the HTML `height` attribute. If you need relative sizing, use the CSS `height` property instead.