CODEWITHSUNDEEP
htmldefinition
user31782
user31782

Reputation: 7589

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:

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.

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

Upvotes: 5

Views: 286

Answers (2)

James Donnelly
James Donnelly

Reputation: 128791

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>.

Upvotes: 3

BoltClock
BoltClock

Reputation: 723719

The answer to both of your questions is that any element that is a phrasing element is by necessity also considered flow content, because elements whose content model is "Flow content" may also directly contain phrasing elements.

As for <hr>, the reason it is a flow element and not a phrasing element is because, from its definition,

The hr element represents a paragraph-level thematic break

As it's intended to be used to divide paragraphs within a section, which in HTML are represented by the flow element <p>, it makes sense for <hr> to be a flow element rather than a phrasing element.

The content model of both elements is irrelevant. It's the content model of their parent elements that's pertinent here. The statement given by MDN is informative and not meant to be taken de jure; indeed, that statement does not appear in either W3C HTML5 or WHATWG HTML.

Upvotes: 0

Related Questions