user31782 user31782 - 1 month ago 7
HTML Question

Why do <hr>, <br> and <em> elements belong to flow content in html?

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.


So, Flow content elements are supposed to contain something. Now as we know
hr
and
br
elements are void elements, that is is they don't contain nothing. So the question is:


  • Why do
    <hr>
    and
    <br>
    elements belong to flow content in html?



Also I am quite confused about what flow content actually is? I have been reading on SO about this, e.g. the difference between phrasing and flow content here. As far as I could understand, the flow content seems to correspond to block level elements and phrasing content seems to correspond to inline elements. More precisely, It seems like Flow Content is supposed to be the structural content that outlines the whole document. For example,
section
elements,
div
elements,
header
,
footer
and
article
etc. Flow content seems to be some kind of container elements, or higher level elements, like
p
element which contain lower level components(like text, images and hyperlinks etc) of the document.


  • Then why are elements like
    <em>
    ,
    <b>
    and
    <i>
    etc included in flow content?



Seeing the list of flow content elements, it seems like every element but
meta content elements
belong to flow content.

Answer

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 <br> and <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 body.

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 <option>, <optgroup> and <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 <body>.

Comments