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 itssrc
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 ofoption
element shown as a drop-down list in forms. -
button
- also a form element that can be used in place of ainput
type ofsubmit
. -
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 likecontrols
,preload
,poster
andsource
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.