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 moves from left to right, except for languages that read from right to left (flow goes from right to left as well).

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.

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.

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.

Note

The type of any element can be found in the reference or specification.