What is the difference between phrasing content and flow content?

Question

I am new to HTML and CSS and I would like to know the difference between flow content and phrasing content. Other than the W3 official documentation the MDN documentation is

Answer 1

I think this can be considered the main point about phrasing content:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

(Highlight by me.)

Phrasing content is mainly whatever you (could/would) put into paragraphs. For longer parts of text content inside your page, most of it should usually be organized into paragraphs. Paragraphs are the most basic level of structuring text content, same as you would have it in a traditional written text in a book or similar.

Flow content is a broader category. As you can see in the Venn diagram on the MDN page, it contains all other categories of content (with the exception of meta data, with is displayed as being partly outside of it – which makes sense, since a lot of meta data goes into the head element.)

So phrasing content is mostly intra-paragraph level, whereas flow content is basically whatever you might want to put inside body directly, or in any of the “larger” structuring elements.

You see that the list of elements for flow content and the list of elements for phrasing content overlap in large parts – f.e. both contain elements such a, img, input, label, span, etc. All of those elements you might want to put inside a p paragraph for a good reason, but they might also be children of body directly, or nested into other elements, such as a links inside an (un-)ordered list for purpose of marking up a navigation list, an img that is the site logo (and therefor not part of a paragraph), etc. So a lot of that stuff can be both inside of paragraphs, as well as outside of them – depending on the specific meaning of the piece of content they mark up.

The elements that phrasing content does not encompass, but that are part of flow content only, are those that are not allowed inside a paragraph – p itself of course, the different headline levels, section, article, aside, div, form, footer, fieldset, table etc. You might also call these the main, “top level” structural elements.

If you are familiar with the “old” HTML 4.01 classification of inline vs block elements, then this should not present too much trouble. Most of what was categorized inline was allowed in paragraphs, whereas no other block element was allowed inside a paragraph. (Of course HTML 5 added some new elements, that therefor where not part of either inline or block before.)

I used paragraphs to make the point up to here mostly, but same holds true for headline elements as well. Those were also only allowed to contain inline elements in HTML 4.01 – and now their content model is phrasing content as well. Putting a div, footer, table or paragraph inside a headline would just not make sense; putting a link or image in there however can make sense in a lot of cases easily.

And of course this kind of “trickles down” as well. For an element such as em (random example), the content model is phrasing content as well. Would not make sense otherwise – for an em element inside a paragraph all of a sudden to allow elements that the paragraph itself is not allowed to contain, would not be sensible at all.

(The a element has gotten some special treatment in HTML 5 though. Previously only allowed to contain inline elements, it can now contain both phrasing content and flow content – f.e. having an a contain a div or a paragraph is allowed. It depends on context of course – if the a itself is an ancestor of an element that allows only phrasing content, then it itself can only contain phrasing content too. This change was made due to demand by developers to be able to use larger sections of structured content to link somewhere else – f.e., you might want a link to contain a headline plus some additional [paragraph] text inside it. Before HTML 5, people had to “fake” this using inline elements inside the link and formatting them via CSS to look like a headline and paragraph.)

So although HTML 5 has broken up the two basic categories of block and inline into several categories, flow and phrasing content are the two most important ones of those still, I think, and can be said to be the “successors” of block and inline to a certain extend.

---

And when in doubt, there is always the specification to look things up in; and the validator will tell you if you nested elements in a way that is not allowed. I’d recommend you always check your pages using this tool – and with time, all of this will come more naturally by itself.