# How to write equations in HTML

If you want to write equations for your web page, there are a few options. A mark-up language may not be supported by your browser. Some people use images but if you are using a big page, the images may be smaller than you wish. I use normal HTML tags to make equations. I have tested these in Firefox and Internet explorer 6. Here's what I do:
First of all, I use a CSS page with common underline borders because I use this a lot to portray fractions:
.BorderBottomLine {
border-bottom: 1px solid black;
}
I do make use of tables with invisible borders. I show them with and without the borders so you can see how I did it. These tables must NOT have a width and height set.

## Powers and indices

This is very easy. I use the <sup> tag for superscript:
x2 which is x<sup>2</sup>

and the <sub> for subscript
a1
I set in my CSS page that all <sub> tags have a font which is 50% size:
sub {
font-size: 50%;
}

## Square roots

It may be easier to show something to the power of 0.5 or just have no special tags:
√(x + 3)
but there is a way of doing it. It may not quite work on some browsers. Just set the contents in a <span> tag with a top border:
2+5x
but it doesn't look quite so nice with indices:
2+5x2

## Fractions

Here is a 2 by 2 table with the first column joined up:
 0.5 = 1 2
 0.5 = 1 2
The bottom-right cell has a top border, giving the line in between.
Here is another one without the joined up borders:
 2 20 = 1 10
This is a three cell table. I put the denominators in <span> tags and put a border on them:
 2 20 = 1 10

## Differentiation

This can be the same as above but the above does not work if you do the above on this:
 d x 2 dx
This had to be done with joined cells. It has three columns and two rows originally:
 d x 2 dx
The d / dx part has been centrally aligned with a top border on the <td> tag containing dx, the second column is joined up containing the x with central vertical alignment and the <td> containing the 2 is:
font-size: 75%;
vertical-align: bottom;

## Integration

This is a little more tricky:
 ∫ b sin x dx a
This has two rows and 3 columns with the first and third column joined up:
 ∫ b sin x dx a
I set the style of the <td> tags instead of using <span> tags which makes the code a little less complicated. The <td> of the integral sign is:
font-size: 200%;
vertical-align: middle;

and the upper limit is:
vertical-align: top;
text-align: center;
font-size: 75%;

and the lower limit is the same except the vertical alignment is at the bottom.

Without any additional markup, you can just use the symbol ∫:
∫ cos x dx = sin x + C

For this, I just used a two-cell table and put the second cell with a font size of 50%
 [2x] 10 2
 [2x] 10 2

## Limits

This is achieved with a 2 by 2 table:
 lim 2x +Δx Δx → 0
I make both the cells in the first column to have a central alignment and the bottom cell to have 50% font size:
 lim 2x +Δx Δx → 0
again, the CSS is in the <td> tags instead of unnecessary <span> tags.

## Infinite series

You can use <span> tags on the top and bottom limits and use this without the table:
5
∑ 1+x
x=1
Instead, use three rows and align the limits top and bottom, with all the contents in the first column centrally aligned:
 5 ∑ 1 + x x =1
 5 ∑ 1 + x x =1

## Matrices

This is fairly simple. You can have one row with the ( ) at a font size as large as you need:
 ( x1 y1 z1 x2 y2 z2 x3 y3 z3 ... ... ... )
 ( x1 y1 z1 x2 y2 z2 x3 y3 z3 ... ... ... )

 ( a b sin x b )
make sure you give the cells a little padding (I used a padding of 2).

## Symbols

There are lots of symbols which can easily be used in pages, if you express them in unicode × ∙ • π ≤ ≥ √ ≈ ≠ θ δ Δ ∫ ± → ←
The way I do it is to copy and paste them in to my web editor, and it converts them automatically e.g.
π = &#960;
I use free web-page editors Kompozer although this is becoming more out of date. You could also use Bluegriffon which supports HTML 5. With these, you can manually insert symbols.