## DEV Community

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.

## Latest comments (3)

Me-Debarghya

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

and after paste

over all thanks a lot 😘

Jon Randy 🎖️

Or maybe use MathML

Clément Gaudinière

Yes of course it is a good alternative

DEV Community

## 16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.