Have you found an error or do you want to add more information to these pages?
You can contact me at the bottom of the home page.

Home page

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 x2
dx
This had to be done with joined cells. It has three columns and two rows originally:
d x2
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.


Have you found an error or do you want to add more information to these pages?
You can contact me at the bottom of the home page.

Home page