FrontEnd Development Zero to Hero (67 Part Series)
Elements in HTML are either Replaced or Void.
An answer on stackoverflow 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
imgelement will be replaced with the image defined as its
srcattribute. And only after replaced, browser could know how wide and high it is, then try to render it in the right position.
From the list above, these are the elements you will likely come across most of the time:
input- This element allow users to enter data in forms.
select- The container for a series of
optionelement shown as a drop-down list in forms.
button- also a form element that can be used in place of an
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 require attributes like
sourceas a child element that points to the location of the video.
br- This used to create a line break between a block of text.
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.
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 regards 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.