Difference Between Phrasing Content and Flow Content

What is the difference between phrasing content and flow content?

The easiest way to remember, is that if it can be inside a sentence, it's phrasing content.

Text can be inside a sentence, so it's phrasing.

An emphasised bit can be inside a sentence, so it's phrasing.

An image can be Sample Image inside a sentence, so it's phrasing.

A sub-heading or an article cannot be inside a sentence, so they are not phrasing.

A link can be inside a sentence, so it's phrasing. But as of HTML 5, one is also allowed to have a link containing whole blocks of text, in which case it is not phrasing.

Phrasing content falls into three categories:

Content that is replaced by something visually. (E.g. as <img> is replaced by an image.
Content that contains text within a run.
Content that provides metadata about a specific piece of text within a run. (E.g. <link> when used with itemprop rather than <link> in the <head> which defines a relationship between a document as a whole and the resource linked to).

Flow content includes phrasing content, but also elements like <p> and <h1> which define a whole run of text, <article> which contains one or more runs and <table> which contains rows of cells which contain runs of text.

It is very critical in advanced CSS to know the different kinds of content and not just the definition of it , or just the list of elements that come under a certain type of content , but also "Why" a certain element comes under a certain category and whats the major difference between similar content categories , in the case of my question , whats the difference between "Phasing content" and "Flow content".

I don't entirely agree.

It's absolutely vital to basic HTML to know this. It's the very first thing that should be taught in HTML after writing <html><head><title>Hello</title></head><body><p>Hello World!</p></body></html> in a text editor and opening it in a browser, and "there are several different elements in HTML". It may not become fully clear until one has then learnt the elements that are examples of each, but getting one's head around it is important as a lot of things just don't make sense otherwise and it makes the difference between a simple markup language with easy-to-remember elements and attributes and a messy soup of tags where you can never remember why validators are saying you're doing it wrong.

Now certainly, your CSS is going to generally follow from your semantics, and the defaults follow from them too (most visible phrasing content is either a replaced element or display: inline;, most other flow content is either display: block; or something that relates quite obviously to the semantics (e.g. tr: {display: table-row;}).

But because the HTML is where you think first about the semantics, when writing the CSS you can focus more on just the rendering, and to a degree free yourself from that concern. Certainly, correct semantics should not generally become a restriction upon the CSS beyond the simple fact that you obviously want a visual design that helps your message get across.

So for example, just because <p> is defined as "a paragraph" and in our culture paragraphs are today generally typeset as blocks of text with either a vertical margin between them or an indent on the first line, does not mean we have to follow that rule. We can layout our paragraphs in late-mediæval style like here with paragraphs running together separated by pilcrows.

Not that you are likely to want to do so, but you certainly can. So while good CSS does build on the semantics of the elements, it also frees us from them in that we don't have to have incorrect semantics in order to have something look (or sound) like we want.

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

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

navbutton - phrasing content where flow content is expected

Because flow content includes phrasing content; the definition explicitly includes button element.

In HTML 4 (and even in HTML 2), the “strict” version requires that text-level content be wrapped in block-level containers, and “text-level” meant roughly the same as phrasing content. But there is no such requirement in HTML5.

Phrasing content with changed display property in CSS

Even though you style a span with display: block you still can't put block-level elements inside it:

<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>

The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.

So they are different, and thus there is nothing problematic here.

Why is s not listed as Phrasing Content on MDN?

Probably a mistake or inconsistency on MDN's part. W3C HTML5 and WHATWG HTML both clearly list the <s> element under §4.5 Text-level semantics as flow content, phrasing content, and palpable content, exactly as they do with the <b> and <i> elements.

How to interpret permitted parent elements of HTML tags

Embedded content is a subset of phrasing content, which is itself a subset of flow content. There is a diagram in the spec:

Venn diagram showing the relationships between HTML5 content types