Cet article est également disponible en français

There’s not a lot of information about replaced HTML elements to be found online. Neither is the topic addressed in any web development book that I’m aware of. That’s is unfortunate… because, from my experience, knowing the limitations of replaced elements would have saved me a lot of stress when I started experimenting with advanced CSS.

Essentially, replaced elements are HTML elements that have a predetermined width and height, without benefit of CSS. Another way of thinking of replaced elements is “any tag that has its content replaced by an outside source”. <img> and <video> are obvious examples, but many form elements, such as <input>, are also replaced. For example, whezn you insert the following code on a page:

<input type="text">

… the input just shows up, at a size that is suitable for single-line text-input. That doesn’t mean you shouldn’t add extra attributes and values to the element, or that you can’t apply CSS to it, just that the browser replaces that tag with an object of a predetermined size by default. The same happens with <img>:

<img src="bison.jpg" alt="Plains bison">

Without any extra information, bison.jpg will be loaded onto the page and the img tag replaced with whatever content bison.jpg contains, at the picture’s natural width and height.

<br>, <hr> and <object> are all replaced elements, as are <input>, <button>, and <textrarea>. In HTML5, <video> and <iframe> are replaced elements, as are <audio> and <canvas> under some circumstances.

If you can still use CSS to alter the appearance of these elements, how does the fact that they are “replaced” make any difference? Because of one vital rule: