Flow

The flow of a web page determines the order in which elements are displayed vertically and horizontally. By default, elements are shown in the order in which they appear in the HTML document, from top to bottom. The horizontal flow typically moves from left to right; however, the flow is also reversed from right to left in languages that read from right to left.

Every element in HTML is a rectangular area that takes up a position on a line, similar to words on a lined sheet. There are two primary types of elements: block-level and inline elements.

After inspecting the example, we can say:

Block-level element occupies the whole line. It doesn’t matter the content length. Block elements follow each other from top to bottom.

Inline element occupies the space taking into account the content size. That is why some inline elements can be on the same line. When there is not enough space on one line to fit all the elements, then it is carried over into a new line.

Note

The display property of HTML elements is predefined according to standards and conventions established by the HTML specification. These standards dictate the default rendering behavior of elements across various web browsers. You can find the specific type of any element in the reference or specification links provided: HTML Reference and HTML Specification.

Element Types

As previously mentioned, every element in the browser style sheet has a type represented by the display property, which determines its behavior. The two main types of elements are block-level and inline elements, and there are also additional types, such as inline-block elements.

Inline elements are primarily used for styling and highlighting text content, such as links, buttons, and images. They are positioned on a single line until no more space is left. When the line is complete, they jump to the next line and continue to fill it.

Block-level elements are intended to define text containers such as headings, lists, and paragraphs, as well as larger semantic sections like headers, footers, and sections. They are visually represented as rectangular areas stacked on top of each other vertically.