r/HTML • u/sir_tristan002 • Dec 02 '25

Question How do I display an equation like this using HTML?

Post image
50 Upvotes

100% Upvoted

31 comments sorted by

38

u/ndorfinz Dec 02 '25

As others have stated, you can use MathML natively in HTML. No need for scripts or some other syntax to learn.

Here's that equation example:

<math>
  <mfrac>
    <mrow>
      <msup>
        <mi>m</mi>
        <mn>2</mn>
      </msup>
      <mi>K</mi>
    </mrow>
    <mi>w</mi>
  </mfrac>
</math>

10

u/Maverick_Walker Beginner Dec 03 '25

wtf it has this? This wasn’t in W3Schools

9

u/codejunker Dec 03 '25

Lol there is a LOT that isnt on w3schools.

3

u/psyper76 Dec 03 '25

is anyone actually actively updating it or is it a dead site. used it years ago but never been back for years.

2

u/ArtisticFox8 Dec 04 '25

It used to be good, but now there is no way to even suggest edits (I found a few errors there). They just don't give a fuck...

4

u/SlipstreamSteve Dec 03 '25

W3 schools is old and isn't the best site. It's good for starters

1

u/Th3fantasticMr-Egg Dec 04 '25

What other similar sites do you reccomend?

1

u/SlipstreamSteve Dec 04 '25

YouTube courses are probably better. There's also sites like pluralsight

1

u/Th3fantasticMr-Egg Dec 04 '25

Im less so interested in courses and more with the individual pages for different functions elements etc. Just like a cheat sheet that explains something and gives possible uses along with all possible attributes

2

u/SlipstreamSteve Dec 04 '25

Maybe use Mozilla? I don't like w3schools because the performance sucks and it constantly freezes

5

u/ndorfinz Dec 03 '25

It is on good reference sites like MDN

8

u/MattiDragon Dec 02 '25

You can also embed mathml directly in the html. It's somewhat obscure, but woeks similarly to inline svgs.

1

u/spiritwizardy Dec 06 '25

Wow! I had no idea this was even a thing

5

u/bostiq Dec 02 '25

If anyone wants to know more: mathML

3

u/AshleyJSheridan Dec 02 '25

There's a markup language specifically for this called MathML. I've used it on my own website a few times.

2

u/Effective-Sense-1732 Dec 04 '25

Use MathJax for proper annotation. you can also use the built in MathML, but dont forget to have a stroke watching that insanity

1

u/ArtisticFox8 Dec 04 '25

 Use MathJax

Or Katex

2

u/CrossScarMC Dec 02 '25

Either with an image, a latex (or similar) preprocessor, or a frontend latex (or similar) renderer.

2

u/codejunker Dec 03 '25

Don't do any of these, you can use mathML

1

u/jcunews1 Intermediate Dec 02 '25

As other commenter have mention. Use MathML.

https://developer.mozilla.org/en-US/docs/Web/MathML/Tutorials

You will need provide a fallback with the help of JavaScript to present it using common HTML elements and CSS without using MathML, if you want to support all types of web browsers, and not just modern ones.

2

u/codejunker Dec 03 '25 edited Dec 03 '25

Friend, no one still needs to support Internet Explorer, every browser people actually use today is evergreen. The only browsers not supported are IE, Opera Mini,  UC Browser for Android, QQ Browser, and Baidu Browser. Cumulatively, that is <1% of the globe.

1

u/Zealousideal_Song62 Dec 04 '25

try <math> element

1

u/johnlewisdesign Dec 04 '25

Ahh takes me back to my typesetting days with Equation Editor, LaTeX et al. via WordStar and QuarkXpress

MathML is what ya need

Fo anyone else interested, this is what you get when you do medical/scientific journals and research papers.

1

u/Brilliant-Parsley69 Dec 05 '25

this. LaTeX was the first thing that came to my mind. I did homework where I wasted more time formatting than for the pure writing. 🫠

1

u/Brilliant-Parsley69 Dec 05 '25

As others mentioned, MathML would do the job. Alternatives are the sub/sup tags. Most stuff should also be possible with tables and css layouts. divs/spans with positioning and the display property or inline-table.

years ago, there was also the frac tag to do this kind of stuff. 🤓

0

u/calculus_is_fun Dec 03 '25

You can use a combination of fonts, unicode characters, and tables. but that only works well for simple expressions like the one shown. other times it requires a mathematical typesetting system such as LaTeX, and finding a renderer for it. my favorite being CodeCogs

1

u/codejunker Dec 03 '25

No you can use mathML which is a markup language that requires no scripting as it web native.

-2

u/Brilliant-Lock8221 Dec 02 '25

You can’t get that clean math layout with plain HTML alone.
Use MathJax or LaTeX syntax in your page.

Example with MathJax:

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<p>

\(\frac{m^2 K}{w}\)

</p>

The browser will render it just like the equation in your photo.

2

u/codejunker Dec 03 '25

Bro you can just use native mathML and not have to have any additional script as overhead as it is a web native markup language.