HTML documents are made up of various elements. For example, p, table, span, and so on. Each element has an impact on the performance of the document. In CSS, each element generates a box (the legendary box) that contains the content of the element.
elements can be divided into two types depending on how they are created: replacement elements and non-replacement elements. the way you create will have an impact on the performance of your box model, as you'll see in subsequent notes.
- Replace element: The content part of this element is not displayed directly by the document, but instead is replaced with something else. The most common replacement element, IMG, is replaced by a picture file outside the document itself. Input is also a replacement element, which determines what the content is based on the value of the type, and sometimes the content is replaced with a radio button, sometimes a text input box.
- Non-replacement elements: Most HTML elements are non-replacement elements, and the content is displayed by the browser in the box generated by the element itself. For example, span.
There are two types of elements, based on their display roles: block-level elements and inline elements.
- Block-level elements: an element box is generated and the content area of its parent element is populated with no other elements next to it. Of course this is in the default case, there is a floating positioning setting said otherwise. The list item has a special performance, yes, there will be a marker, the marker will be "associated" to the element box
- Inline element: Generates an element box within a line of text that does not break this line of text.
CSS Authoritative Guide Learning notes--html element classification