This article describes how mathematical notation can be incorporated into an HTML document. This article can be used as a basic template, along with the CSS style sheet and the JavaScript file.
This article describes how mathematical notation can be included in a basic HTML document. This article can be used as a basic template, along with the CSS style sheet and the JavaScript file. If you have not already done so, please read the introductory article Mathematics with Structure and Style for basic information on best practices, HTML, CSS, and JavaScript.
Recall that the first part of an HTML document contains declarations about the type of HTML used, the document type definition, and the type of encoding. Some of this information is necessary for HTML validators to work properly. We recommend that a basic mathematics HTML document be saved with the extension html and have the following initial declarations:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ···
If your document contains extensive mathematical notation, you should considering using MathML, the Mathematics Markup Language. Please see the companion document A Basic Article with MathML for more information.
HTML provides some limited markup for mathematical expressions, notably <var></var> for a variable, <sub></sub> for subscript and <sup></sup> for superscript. For anything complicated, you need to use images, perhaps in conjunction with HTML markup.
Special mathematical symbols (Greek letters, arrows, operators, relations, etc.) can be displayed by using HTML entity names. An entity name always starts with & (ampersand) and ends with ; (semicolon), so that for example, α is the markup for the Greek letter α. The symbols that display correctly depend on the browser and platform, on installed fonts, and other issues. Please see the tables of mathematical symbols for more information.
Our style sheet subclasses the <var></var> tag to indicate a couple of different types of variables:
<var class="vector"></var> for a vector or matrix variable; these are rendered in italic font style and bold weight.<var class="collection"></var> for a variable that represents a higher-order collection (such as a collection of subsets). These are rendered in script font.<var class="natural"></var> for natural number systems These are rendered in normal font style and bold weight.Of course, you can change the style attributes, if you don't like them and you can add more subclasses.
Images of mathematical expressions should be marked as follows:
<img class="math" src="URL" alt="alternative text" title="tool-tip text" width="m" height="n" />
Most of these attributes are standard ones, but some have special purposes:
alt attribute gives an alternative text description. This could be a simple description, such as "the quadratic equation" or it could describe the expression in an alternative mark-up (LaTeX, for example).title attribute is a shorter text description that is displayed when the user rests her mouse over the image.Please see the tables of mathematical symbols for common symbols in image form. You can download all of these symbols is compressed form to use in your documents.
An inline mathematical expression using HTML and/or images should be enclosed in the <span class="math"></span> tag. This has two important effects. First, the expression becomes a well-defined "object" in the document, accessible through the DOM. Second, of course, we can control the appearance of the expression with our CSS style sheet. One important style attribute is white-space: nowrap; which prevents the expression from breaking across lines.
A single, displayed, unlabeled mathematical expression should be enclosed in the <p class="math"></p> tag. Again, the expression is a well-defined object, tagged as a mathematical object, and we can control how it looks. Our style sheet centers the expression and makes sure that it does not break across lines.
A displayed, labeled mathematical expression can be marked using a special class of the table element. For example, the first labeled equation might be marked as follows:
<table class="math" id="Equation1">
<tr>
<td class="label">(1)</td>
<td class="math">mathematical expression</td>
</tr>
</table>
Note that the label is anchored with an id attribute, so that you can link back to it. You can easily modify this basic construction for displayed mathematical expressions consisting of several lines.
Elements of 3-dimensional Euclidean space R3 can be thought of as vectors of the form v = (x, y, z) where x, y, and z are elements of R. We will let B(R3) denote the Borel sigma-algebra; that is, the sigma-algebra generated by the open sets.
The mathematical expressions in this example are written in HTML; note the different types of variables used.
A quadratic function has the form f(x) = ax2 + bx + c where a, b, and c are constants and a ≠ 0. The roots are given below, in Equation 1.
The mathematical expressions in this example are written in HTML; try resizing your browser window and note that the expressions do not break across lines.
A polynomial function of degree n has the form, where a0, a1, ..., an are constants and an ≠ 0.
f(x) = a0 + a1x + a2x2 + · · · + anxn
Again, the mathematical expressions in this example are written in HTML. Try resizing your browser window and note that the expressions does not break across lines.
The quadratic equation 
has roots given by
| (1) |  |
Note that the mathematical expressions in this example are images. Rest your cursor on the images to see the tool-tip description. Look at the properties of the image or the source code to see the alternative text in LaTeX.