In HTML there are replaced elements and non-replaced elements. Properties like height are effective on replaced elements, but not always effective on non-replaced elements, so understanding this concept is important for layout. Most elements are non-replaced

Replaced Elements

Replaced elements are those which appearance and size are defined by an external resource.The actual content of the tags is replaced by something from an external source.

These replaced elements could be tags such as:

  • <img>
  • <object>
  • <button>
  • <textarea>
  • <input>
  • <select>

These replaced elements have what is referred to as intrinsic dimensions. This means that their width and height are defined by the element itself, the image, the textarea or input box as defined by the browser, etc. Some replaced elements can have their width and height changed using CSS properties, such as images.

Computed values for replaced elements

A good example of this would be an image with actual dimensions of 500px wide by 400px high. There is a ratio between the width and the height that is held by the browser for display if only one of the properties of width or height is specified. When only one is specified, the other has the value of auto. If the image is given width: 250px then the height will automatically be set at 200px. If both the width and the height is set for the image, the image will hold each and may become distorted if the ratio is not held.

Form Elements as replaced elements

Forms often have the elements of <textarea>, <button>, <input> and <select>. The size of these elements are often a default size for the browser, unless there is a possible width, number of rows, number of columns, etc., to be set with the HTML for that element. Some form elements can be changed with CSS styles, some cannot.

Example:

<form>
    Name: <input type="text" name="fname" size="40"><br/>
    Message: <textarea rows="5" cols="30"></textarea>
</form>

Non-replaced Elements

All other elements except those listed above, are non-replaced elements. An example of non-replaced elements is as follows:

Example:

<div>Content area</div>
<p>Paragraph here</p>

In this example the content for the <div> and the <p> is shown, the content is not being replace by an image or a textarea or a button.