- For other than the simplest equations, using an equation editor such as Codecogs can make formulas and equations far more readable and aesthetically pleasing. After typing in the equation, paste the generated code in your web page. When your page loads in the browser a fetched image of the equation will appear.
- When using Codecogs-generated code for math equations and using
<!doctype html> (the doctype for HTML5), the W3C Markup Validator will flag several errors. So effect the following changes to the Codecogs snippet before pasting into your webpage:- Replace ampersands
& with& - Replace backslashes
\ with%5C - Replace carets
^ with%5E - Replace opening curly braces
{ with%7B - Change closing curly braces
} to%7D - There may be other characters that have to be percent encoded depending on which math symbols you include in your equations.
- W3C requires the use of the
alt attribute in allimg tags. Addalt="" to allimg tags in your web page.
- Replace ampersands
- The following doctype declaration (XHTML 1.0 Transitional) will not cause the W3C Validator to flag Codecogs non-percent-encoded special characters as errors, although it will still flag ampersands that are not encoded as character entity references or numeric character references.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head> - Use the XHTML 1.0 Transitional doctype instead of Strict when Javascript is used to minimize W3C markup validation errors
- I currently use Notepad++ as web page code editor. I've found the "Snippets" plug-in quite indispensable for inserting tags and CSS. Editing the existing snippets and adding one's own is possible. For instance, because it doesn't exist, I've added an HTML5 template. And deleted the attributes in the anchor tag which I don't normally use. I've also added various character entity references for math symbols (that aren't pre-existing in the plugin) and grouped them in a library of its own.
- "Character Reference," "Character Entity Reference," "Numeric Character Reference." I can never get those terms straight. Here's the definitive definitions of those terms, straight from the W3C.
- Bear in mind that character entity references are case-sensitive. So
Π will display Π (upper case Greek letter pi) whileπ will output π (lower case pi) - A very good Character Entity Reference Chart by the W3C. Hovering over an item displays the description of that glyph. The page is searchable (use the find feature in your browser—Ctrl+F in mine). The page also lists alternate character entity references. Thus I discovered that
· · &CenterDot ; all refer to the same decimal character reference· and so produce the same glyph. - Extensive, if not complete, list of named character references by the W3C. Hovering over the glyphs will display a magnified view. (Note: As of April 2016 the page does not render properly in Opera (v36). No immediately apparent problems in Firefox (v45).
- List of character references for Greek letters by W3Schools
- List of character references for math symbols by W3Schools
- List of character references for Latin supplementary symbols by W3Schools
- List of character references for punctuation symbols by W3Schools
The following are some commonly used math symbols and their character references. Bear in mind the glyphs' exact appearance depends on what font is being used by the browser. This page uses the typeface Open Sans, verdana, sans serif—in that order of priority depending on your browser's capability
| Reference | Glyph | Name | |
|---|---|---|---|
| Decimal | Character | ||
| < | < < |
< | less than |
| > | > > |
> | greater than |
| ≪ | ≪ ≪ ≪ |
≪ | much less than |
| ≫ | ≫ ≫ ≫ |
≫ | much greater than |
| ≤ | ≤ ≤ |
≤ | less than or equal |
| ≥ | ≥ ≥ ≥ |
≥ | greater than or equal |
| ≡ | ≡ ≡ |
≡ | identical to |
| ≈ | ≈ ≈ ≈ ≈ ≈ ≈ |
≈ | almost equal to, approximately |
| ≠ | ≠ ≠ |
≠ | not equal |
| ² | ² | ² | superscript 2 (squared) |
| ³ | ³ | ³ | superscript 3 (to the third power) |
| √ | √ √ |
√ | square root |
| ° | ° | ° | degree |
| π | π | π | pi |
| ∞ | ∞ | ∞ | infinity |
| ∩ | ∩ | ∩ | intersection |
| ∪ | ∪ | ∪ | union |
| ∴ | ∴ ∴ ∴ |
∴ | therefore |
| ± | ± ± ± |
± | plus minus |
| ÷ | ÷ ÷ |
÷ | division |
| × | × | × | multiplication |
| The following dot glyphs are or can be used as multiplication sign. (I've listed them in order of personal preference—beginning with my first choice. When magnified the dot operator ( |
|||
| · | · · · |
· | middle dot / interpunct |
| • | • • |
• | bullet |
| ⋅ | ⋅ | ⋅ | dot operator |