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