What The Heck Is A Replaced Element?

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, when 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:

You cannot apply generated content to replaced elements. That is, you cannot apply the pseudo-element selectors :before or :after to them.

Think about it. Wouldn’t it be great to be able to auto-generate captions for images in CSS? You have the information right there, in the image’s alt and title! All you’d need to do is this:

img:after { content: attr(alt); }

That would be perfect! You could just display the title value of the image directly on the page, and not have to worry about <figcaption> or definition lists for images at all. But it can’t be done. The <img> tag is already replaced content: you can’t generate more content on top of that with CSS.

Bottom line: if you can’t get a result from directly applying :before or :after to a tag, it’s a replaced element. But there is still a way, as we’ll see in the next article.

Dudley, just noticed that if we favourite a page twice by mistake it prevents us from writing comments on the page. Liked the article on mobile site icons, very useful- thanks

posted by Sumita Biswas 3 months ago

Dudley Storey You're welcome, Sumita! And I'm aware of the problem... just solved it in the latest code version of the blog, which should be uploaded tomorrow. Thanks for mentioning it.