Replaced Element and Void Element

Elements in HTML are either Replaced or Void.

REPLACED ELEMENT

An answer on Stack Overflow on this same topic sums it up:

Replaced elements are those, whose content will be replaced in the document preparation phase. Before the replacement happens, browser (or officially, user agent) could not know the exact dimensions. For example, the content of img element will be replaced with the image defined as its src attribute. And only after replaced, browser could know how wide and high it is, then try to render it in the right position.

LIST OF REPLACED ELEMENTS

• <applet>
• <audio>
• <br>
• <button>
• <canvas>
• <embed>
• <iframe>
• <img>
• <input>
• <math>
• <object>
• <select>
• <svg>
• <textarea>
• <video>

From the list above, these are the elements you will likely come across most of the time:

• input - This element allows users to enter data in forms.
• select - The container for a series of option element shown as a drop-down list in forms.
• button - also a form element that can be used in place of a input type of submit.
• textarea - a form element that allow users to enter specified amount of characters.
• video - As the name implies, this is used for showing video on-page, it requires attributes like controls, preload, poster and source as a child element that points to the location of the video.
• br - This used to create a line break between a block of text.

VOID ELEMENTS

To quote the spec:

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

Furthermore, void elements don't have closing tags and don't wrap any content because they are the content. There are not many void elements, they are discussed below.

LIST OF VOID ELEMENTS

• area
• base
• br
• col
• command
• embed
• hr
• img
• input
• keygen
• link
• meta
• param
• source
• track
• wbr

Some void elements can be used ion their own, and others require additional information. Examples of elements that can be used on their own:

• hr - for separating block of text
• br - for creating break lines

In regard to elements that require additional information the img tag is an example, it requires at least two attributes:

• src - which indicate the location of the file
• alt - This text is displayed if the image fails to download after page rendering or the user has image disabled in their browser. The alt text should be a brief description of the image. Screen readers also read this alt text when navigating your web page.

Edited September 19, 2020: Grammar fix.