Menu
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?
206
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.
Flow content is an HTML5 category that corresponds to the HTML categories Block-level elements and Inline elements. It contains all elements that are allowed as a direct child of the <body> element. Elements belonging to the flow content category also contain text or embedded content.
Phrase Tag: In HTML, phrase tag is used to indicate the structural meaning of a block of text. For example, abbr tag indicates that the phrase contained the abbreviation word. Some examples of phrase tags are abbr, strong, mark, . . . etc.
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:
<img> is replaced by an image.<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.
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
