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.