The CSS3 model  the replaced content refers to all those HTML elements that are not CSS defined, or in other words have their dimensions and appearance defined most likely directly inside a HTML document and with the given element's legal attributes.

Naturally the elements that most typically have their dimensions assigned inside their attributes (not counting the style="" attribute), are also the most common replaced content elements. These are:

  • <img /> - represents an image in a document
  • <object> - represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin
  • <video> - used to embed video content in a document
  • <input /> (most likely type="image") - used to create interactive controls for web-based forms in order to accept data from the user
  • <textarea> - represents a multi-line plain-text editing control.

Other elements may be existing as a replaced element, as well:

  • <br /> - inserts (forces) a line break bewteen to lines of text in HTML document
  • <hr /> - adds a visual hotizontal line in an HTML document
  • <audio> - used to embed audio content in a document
  • <canvas> - used to, in combination with JavaScript, draw graphics in an HTML document
  • <select> - creates drop-down menus for an HTML form

And others...

NOTE: The main reason why media elements such as images, objects, videos and canvases (and others) have often dimensions directly defined instead of being driven by a CSS styling, is because assigning the width and height attributes locally helps browsers render the document faster.


›› go to examples ››