Explanation of the problem

Mediawiki currently generates incorrect HTML markup whenever authors use <math display=block>

See example: https://en.wikipedia.org/wiki/User:Jacobolus/math_block_example

If I type into e.g. a wikipedia page,

Here is a formula,
<math display=block>x^2 + y^2 = 1,</math>
and here is text afterward.

The generated markup is:

<p>Here is a formula,
<div class="mwe-math-element">
    <div class="mwe-math-mathml-display mwe-math-mathml-a11y" style="display: none;">
        <math display="block" ...>...</math>
    </div>
    <img ... />
</div>

and here is text afterward.
</p>

And this gets treated by any spec-compliant browser as:

<p>Here is a formula,</p>      <!-- implicitly closed <p> tag -->
<div class="mwe-math-element">
    <div class="mwe-math-mathml-display mwe-math-mathml-a11y" style="display: none;">
        <math display="block"  ...>...</math>
    </div>
    <img ... />
</div>

and here is text afterward.    <!-- bare text node -->
<p></p>                        <!-- implicitly opened -->

The basic problem is that <div> elements (in which the math output is wrapped) are not considered to be "phrasing content" according to the HTML specification. See https://html.spec.whatwg.org/#phrasing-content

So whenever a browser sees a div inside a paragraph, the paragraph is implicitly closed immediately before the div.

Later, the text after the div is put into a bare text node, not inside any top-level element. This is a problem because it is impossible for CSS to target such elements to be styled. As a result, any style intended to apply to top-level paragraphs will not affect these text nodes, with no way to work around the problem.

Finally, when the browser sees the closing paragraph tag not corresponding to any opening tag, it will implicitly open it, leaving an empty paragraph at the end.

What markup should be generated instead:

Semantically the text before and after a block formula is often considered a single "paragraph" in mathematical writing. However, I think trying to maintain this grouping in the generated markup causes more trouble than it is worth, because the style which should be applied to block-level mathematics and prose (including inline formulas) is significantly different. Block formulas are given extra padding, are indented, and visually function similarly to a block quotation, data table, numbered list, prose-interrupting figure, or similar block element.

Thus I would recommend keeping the div elements from the current math output. But I would recommend always wrapping the text before and after block mathematics in separate <p> tags, and not try to put the block math inside its own <p> tag per se.

For the example before, I would recommend generating this markup:

<p>Here is a formula,</p>
<div class="mwe-math-element">
    <div class="mwe-math-mathml-display mwe-math-mathml-a11y" style="display: none;">
        <math display="block"  ...>...</math>
    </div>
    <img ... />
</div>
<p>and here is text afterward.</p>

Current user-level workaround:

It is possible for authors to explicitly add blank lines to force Mediawiki to put the following text into a separate paragraph:

Here is a formula,

<math display=block>x^2 + y^2 = 1,</math>

and here is text afterward.

This renders correctly at least. However, this still results in stray empty <p></p> tags in the resulting markup as interpreted by spec-compliant browsers, because Mediawiki wraps the formula's div in a <p>.

Also many authors don’t currently do this, and adding the extra lines to every page is annoying both for whoever does the fix and for anyone whose watchlist is spammed by the resulting cosmetic fixes.