Can block MathML element be nested inside of a `p` element?

This page investigates whether MathML styled as a block element should be written inside or outside of the p element.

In short

MathML content is phrasing content (among others), which is allowed inside the p element even if it is displayed as a block element. So, yes, block math is allowed inside the p element.

It is also allowed to write block math as a sibling to the p element, when they are both nested inside an HTML element, which accepts phrasing and flow content.

These deductions are based on the HTML specification, which is gone more into detail further.

Motivation

People used to writing HTML and CSS are used to the block model of representing the web page (or similar). Basically this means that all content is somehow divided into vertical blocks that can stretch across the whole view.

This paragraph is in a block and they can vary in size.

Inside blocks of content there is inline content such as this text inside the paragraph.

MathML can be marked up as an inline or as a block element with the display attribute. It can be either

display="block"
display="inline".

In a way, it has a this kind of dual property. This has led to some confusion on how MathML should be written in an HTML document. The inline MathML is quite self-explanatory: It is inline content.

The confusion rises from MathML code's dual nature: it can also be block content.

The question

The question is that when you use the display="block" attribute-value pair, which HTML markup should you use?

Option 1. MathML inside the p element:


<p>The quadratic formula is the one many people know
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
        <mrow>
            <mo>-</mo>
            <mi>b</mi>
            <mo>±</mo>
            <msqrt>
                <msup>
                    <mi>b</mi>
                    <mn>2</mn>
                </msup>
                <mo>-</mo>
                <mrow>
                    <mn>4</mn>
                    <mo>⁢</mo>
                    <mi>a</mi>
                    <mo>⁢</mo>
                    <mi>c</mi>
                </mrow>
            </msqrt>
        </mrow>
        <mrow>
            <mn>2</mn>
            <mo>⁢</mo>
            <mi>a</mi>
        </mrow>
    </mfrac>
</math></p>

Rendered (with the CSS style: math[display="block"] { margin-top: 1em;}):

The quadratic formula is the one many people know $x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$

Option 2. MathML outside the p element:


<p>The quadratic formula is the one many people know</p>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
        <mrow>
            <mo>-</mo>
            <mi>b</mi>
            <mo>±</mo>
            <msqrt>
                <msup>
                    <mi>b</mi>
                    <mn>2</mn>
                </msup>
                <mo>-</mo>
                <mrow>
                    <mn>4</mn>
                    <mo>⁢</mo>
                    <mi>a</mi>
                    <mo>⁢</mo>
                    <mi>c</mi>
                </mrow>
            </msqrt>
        </mrow>
        <mrow>
            <mn>2</mn>
            <mo>⁢</mo>
            <mi>a</mi>
        </mrow>
    </mfrac>
</math>

Rendered:

The quadratic formula is the one many people know

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

Discussion

Let's look into how the MathML block content should be interpreted. This we will start by going into the relevant specifications:

The content model

Since we are talking about a specific element, p, we have to figure out what kind of content is allowed inside it.

The HTML specification specifies each element's content model, which means

"Content model

A normative description of what content must be included as children and descendants of the element."

Concept content model, 3.2.4 Element definitions, HTML specification

Now, the p element's content model is "phrasing content" (4.4.1 The p element, HTML specification), which means that the p element accepts only phrasing content.

This is the reason that, for example, list elements ol and ul are not allowed inside the p element, since the list elements are only "flow content" (4.4.5 The ol element and 4.4.6 The ul element).

This leads a natural question: What kind of content is MathML?

MathML as content

MathML is a lot of different content:

"The MathML math element falls into the embedded content, phrasing content, flow content, and palpable content categories --."
4.8.15 MathML, HTML specification

We have an answer: since MathML is phrasing content, it is allowed inside the p element.

This might have been clear when MathML is presented inline, but the question is what about when it is a block element?

(Another discussion would be that does it make sense for MathML content to be so diverse? This will not be discussed here.)

MathML as an inline or as a block element?

The confusion with MathML content lies in the way it is presented. MathML can be marked up as an inline or a block (or an inline-block) element.

(To be fair, so can any other element with styling.)

There are two answers.

1. It is allowed, because MathML is phrasing content

The way content is presented shouldn't affect its category. MathML doesn't lose its categories when its visual representation is changed, so it would still be allowed inside the p element.

2. We have to look at the CSS specification

CSS specification (as cited in the HTML specification) can also provide us with some depth to our answer.

The p element is a block element. MathML content can be either inline or block content, but in this case it is block content.

What is said about nesting block content (math) inside other block content (p) in the CSS specification (that the HTML specification cites)?

"-- if a block container box -- has a block-level box inside it --, then we force it to have only block-level boxes inside it."
9.2.1.1. Anonymous block boxes, CSS specification

So, nesting block content isn't an issue, because it turns all of the content to be in block-level boxes inside it.

What about block MathML content's relation to other content inside p element?

The text that is not nested in any other element (such as math would be in the math element) is in an inline container:

"Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element."
9.2.2.1. Anonymous inline boxes, CSS specification

Together with the previous quote we deduce how the content will be handled for option 1 (padding and spacing have been exaggerated):

The quadratic formula is the one many people know

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

So, here the markup can be categorized as

p is a block element
text inside p element will be inline
math content will be in its own block element.

Which poses no problems at all.

Should MathML be marked up inside the `p` element or not?

You an do it either way.

It is not wrong to include or exclude it. If the MathML code is always inside an HTML element, be it main, section or other, it is allowed to be only a sibling to the p element as well.

Can block MathML element be nested inside of a p element?