I have been reading about Content Categories from MDN. In the Flow Content section they say:
Elements belonging to the flow content category typically contain text or embedded content.
meta content elements
You're overlooking the word typically in the section you've quoted. Most of them do indeed contain text, but not all of them do. Some of them, like the
<hr> elements you've pointed out do not contain anything (and therefore aren't typical flow content elements).
The HTML5 specification defines flow content by saying:
Most elements that are used in the body of documents and applications are categorized as flow content.
Flow content encompasses metadata, headings, sectioning elements, interactive elements, phrasing and embedded content. It isn't limited to only elements which contain text.
The way I see it is that flow content is anything which can be a child of the
<body> element; it is content which flows within the
You can have a
<div> element next to a
<select> element, which in turn can be next to a
<br> element, which can be next to any other flow content element. You could say that these elements flow with each other. Using the definition "a steady, continuous stream or supply of something", (the second noun in the Oxford English Dictionary), we can say that these are a continuous and uninterrupted stream of HTML elements.
On the other hand, the
<li> elements are not flow content and equally are not allowed to be a child of the
<body> element. You can't have an
<optgroup> element next to a
<hr> element (because an
<optgroup> element must be a child of a
<select> element) - we can therefore say that these elements do not flow with children of the