DEV Community

Cover image for Writing mathematical formulas in HTML
Clément Gaudinière
Clément Gaudinière

Posted on

Writing mathematical formulas in HTML

Hello, today we are going to learn how to write mathematical formulas in HTML, for example, to insert them on a website.

How to use letters in a calculation ?

The first and most important thing to learn when doing calculations with letters is to write them in such a way that they can be distinguished from the text. Thanks to HTML you can directly write letters as variables with the <var> tag. We notice that the letters are slightly italicized and slightly bolded.

The exhibitors

For exhibitors, HTML allows you to directly exhibitors an element without necessarily using a cascading style sheet. To do this, we will use the variable <sup>.
To repeat the previous example :

The roots

After having seen the exponents, we will learn the roots, which are not necessarily easy to write. To achieve it, you must necessarily go through the CSS.
You can for example copy the code below :

The problem with this code is that the horizontal bar of the square root is realized with the border property. So in some cases, if the display window is too small, the formula may be distorted. This is why many sites prefer images to handle square roots.

The fractions

First we will look at fractions, which can be problematic to create in HTML. There is no ready-made tag to create fractions, so we have to use CSS. The code is available below :

The vectors

Vectors are particularly useful in physical sciences, you will see later that the code is not very complicated.
For this example, I took the fraction seen before and I applied arrows on the letters.
The vectors for capital letters are designated by the class: oncapital and the vectors for small letters by the class: onsmall.

The sum

To make a sum in HTML and CSS :

The integrals

To make an integral in HTML and CSS :

I hope you enjoyed this tuto, feel free to suggest other tips in comments.

Top comments (4)

medebarghya profile image

thanks a lot .I searched so such for a CSS based alternative of mathjax but i failed. now I started a project(open source obviously) alternative of mathjax . and its helps a lot.. why i ignore mathjax, benefits , pros and cons , limitations etc you will see on the beta release. after beta release I will contact you. but let me give you some hint ,
before copy
before copy
and after paste
after paste

over all thanks a lot 😘

clementgaudiniere profile image
Clément Gaudinière

Glad I could help you 😉. I look forward to seeing how your project develops further ! 🔥

jonrandy profile image
Jon Randy 🎖️

Or maybe use MathML

clementgaudiniere profile image
Clément Gaudinière

Yes of course it is a good alternative