Description

An object doesn’t require a height attribute, but it has its uses. The main reason for specifying the height (and width) is to improve the user experience while a page is loading. If the dimensions are specified in the markup, the space required for the object is reserved by the browser as the page loads. Without this information, the browser doesn’t know how big the object is, and can’t allocate the necessary space to it. On a slow-loading page, the effect can be quite unsightly, as content is constantly reflowed as each new object appears on the page.

The downside of specifying a height (and width) is that if you later decide to update an object that’s used site-wide, you’ll need to change the dimension attributes for each page of the site. Depending on how your web site’s managed (manually, in a template-driven way, via a CMS, or through server-side includes), this may either be a minor niggle, or a real issue for you. It’s a case of weighing up the pros and cons in each situation.

If the height attribute is set by itself, but no width attribute is set, the image will be rescaled proportionally. The results of this approach vary depending on the type of the object in question, and the browser rendering it. If nonproportional dimensions are specified (for instance, a 200x200-pixel object is set to take a height of 100 and a width of 300 pixels), the results vary: image objects can be stretched or squashed just as they can when different width and heights are applied using the imgid element, but not all multimedia objects distort in the same way.

Value

This attribute takes as its value a number that represents the height of the object in pixels, or a percentage of the containing element.

Compatibility

The compatibility of this attribute is dependent on the type of the object. For objects of type image, there is excellent cross-browser support for the height attribute.