CODEWITHSUNDEEP
htmlcss
Tenali_raman
Tenali_raman

Reputation: 2192

What is the difference between phrasing content and flow content?

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 helpful and states:

Flow content is defined as following:

Elements belonging to the flow content category typically contain text or embedded content.

Phrasing content is defined as following:

Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.

However, the documentation gives very little difference between the two, can somebody clarify what the major differences are between phrasing content and flow content?

Upvotes: 47

Views: 14942

Answers (4)

Alpesh Rathod
Alpesh Rathod

Reputation: 385

PHRASING CONTENT

Phrasing content is made up of text content, embedded content elements and phrasing elements, possibly interspersed with HTML comments and/or white space.

These HTML elements are allowed to be used in HTML code where either flow content is expected or phrasing content is expected, with some possible restrictions in specific cases.

Flow Content

Flow content in HTML is made up of flow elements, phrasing content and text content, possibly interspersed with HTML comments and/or white space.

Flow content Elements restricted for use only where flow content is allowed These HTML elements can be used only in HTML code where flow content is allowed, with some additional restrictions in specific cases. In addition, text and HTML elements categorized as phrasing content can also be used where flow content is expected.

Upvotes: 3

Jon Hanna
Jon Hanna

Reputation: 113282

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:

  1. Content that is replaced by something visually. (E.g. as <img> is replaced by an image.
  2. Content that contains text within a run.
  3. 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.

Upvotes: 45

C3roe
C3roe

Reputation: 96316

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.

Upvotes: 9

maioman
maioman

Reputation: 18744

These categories are made when trying to give a semantic meaning to markup in order to best describe the content in it.

Phrasing content defines the text and the mark-up it contains and is a subcategory of the flow-content,
but there are also other subgroups as headers and sections....

Even if it's not very descriptive the documentation gives the exact list of elements which belong to the respective categories.

Upvotes: 3

Related Questions