3 Ways To Write Math Equations In HTML

Welcome to a tutorial on how to write Math equations in HTML. The Internet has come a long way from the Stone Age, and HTML is now fully capable of handling various types of content, different languages, images, audio, and videos. But there is seemingly one mystery left unanswered… How do we write Math equations?

That covers the basics, but let’s walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Math Equations	Useful Bits & Links
The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

METHOD 1) HTML SYMBOLS & TAGS

1A) BASIC HTML MATH SYMBOLS

<h1>NOT EQUAL</h1>
<p>1 + 1 &#8800; 11</p>

<h1>CUBE ROOT</h1>
<p>&#8731; 27 = 3</p>

<h1>POWER OF</h1>
<p>3<sup>4</sup> = 81</p>

Just what kind of sorcery is this? What is that &#8731 and <sup> tag?

• In short, there are a ton of HTML symbols available, and we can define them using &CODE;. For example, ≠ above “translates” to the “not equals” symbol.
• HTML symbols are not restricted to only Math. There are also many other icons, smileys, arrows, etc…
• I will leave a link to a complete list of Math symbols in the extras section below.
• <sup> is but a simple superscript tag.
• Not in the above example, but the other useful one is the <sub> subscript tag.

 

 

1B) MORE MATH WITH CSS

<style>
/* (A) MATH SYMBOL "WRAPPER" */
.math { display: inline-block; }
 
/* (B) SMALL FONT SIZE FOR SUPER & SUB SCRIPT */
.math .smol {
  font-size: 0.9em;
  height: 0.9em;
}
 
/* (C) BIG FONT SIZE FOR SYMBOL ITSELF */
.math .big {
  font-size: 1.4em;
  height: 1.4em;
}
</style>

<h1>SUMMATION</h1>
<div class="math">
  <div class="smol">n</div>
  <div class="big">&#8721;</div>
  <div class="smol">i=1</div>
</div>

<div class="math">
  <div class="smol">&nbsp;</div>
  <div class="big">c = cn</div>
  <div class="smol">&nbsp;</div>
</div>

As you might have seen from the above, those are only simple equations. If we want to have “advanced equations” such as summation… Things are going to get a little rough. In a nutshell:

• We have created “3 layers” .math containers here.
• For the first <div class="math"> –
  • Both the top and bottom .smol layers are used to specify the upper and lower limits respectively.
  • The middle layer ∑ is the summation (sigma) symbol.
• For the second <div class="math"> –
  • Both the top and bottom .smol layers are empty with a white space  .
  • The middle layer is the formula c = cn.

Yep… This is kind of a painful way to do it, but it works.

 

 

METHOD 2) MATH LIBRARY

2A) MATH EQUATIONS WITH TEX

<!-- (A) LOAD THE MATHJAX LIBRARY -->
<!-- DOCS: https://docs.mathjax.org/en/latest/basic/mathematics.html -->
<!-- DEMO: https://github.com/mathjax/MathJax-demos-web -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<!-- (B) TEX EQUATION -->
$$\sum_{i=1}^nc=cn$$

Following up on the above, there are thankfully libraries that we can use. This is a popular one called MathJax, and it supports multiple “Math Code Languages” – Tex, LaTeX, MathML, and AsciiMath. While this library is not the friendliest for beginners, this is still way better than manually creating formulas using raw HTML and CSS.

P.S. I will leave links for the library tutorials in the extra section below.

 

2B) MATH EQUATIONS WITH MATHML

<math display="block">
  <!-- (A) DF / DX -->
  <mfrac>
    <mrow>
      <mi>d</mi><mi>f</mi>
    </mrow>
    <mrow>
      <mi>d</mi><mi>x</mi>
    </mrow>
  </mfrac>
 
  <!-- (B) = -->
  <mo>=</mo>
 
  <!-- (C) DF / DU -->
  <mfrac>
    <mrow>
      <mi>d</mi><mi>f</mi>
    </mrow>
    <mrow>
      <mi>d</mi><mi>u</mi>
    </mrow>
  </mfrac>
 
  <!-- (D) . -->
  <mo>&#x22C5;</mo>
 
  <!-- (E) DU / DX -->
  <mfrac>
    <mrow>
      <mi>d</mi><mi>u</mi>
    </mrow>
    <mrow>
      <mi>d</mi><mi>x</mi>
    </mrow>
  </mfrac>
</math>

This is another example of the Mathjax library, but using the MathML “language”. I personally prefer this over the “less human” Tex and LaTeX – As you can see, this is a lot more similar to HTML and easier to understand.

 

 

METHOD 3) IMAGE EQUATIONS

3A) ONLINE EQUATION EDITORS

If all else fails, we can always go back to the old school “write on a piece of paper, take a photo, post online”. But here is a small twist to make things look better. There are quite a lot of online tools that allow us to write Math equations easily. Here are a few of them:

• Online LaTex Equation Editor – Code Cogs
• Mathcha – Online Math Editor
• iMathEQ

Just do a search for “latex online editor”, “Math equation online”, or “latex to image”, and there will be plenty.

 

3B) LATEX TO IMAGE

What’s next is to simply use one of these tools to create the equation, and download it as an image accordingly – Finally, insert this image into your HTML file. Captain Obvious to the rescue.

 

 

LINKS & REFERENCES

• HTML Math Symbols – ginifab.com
• MathJax – Official Website | Documentation | Examples
• MathML Tutorial – Tutorialspoint

 

INFOGRAPHIC CHEAT SHEET