The easiest and best way to display mathematical equations on the web is to write them in TeX and convert them to scalable vector graphics (SVG) with MathJax.  MathML is another option; but like XML, MathML is not intended to be hand-coded, and an authoring application like LibreOffice Math is reqiured.  TeX and its descendants such as LaTeX are widely used in the academic and scientific communities.  It is not harder to learn TeX than it is to use a graphical math editor; and having learned TeX, one can easily write and make alterations to equations on-the-fly.

Here is a very brief tutorial to illustrate how TeX works.  For more detailed information, please see:

MathJax TeX and LaTeX Support
LaTeX/Mathematics - Wikibooks
LaTeX/Fonts - Wikibooks
TeX Commands Available in MathJax
MathJax basic tutorial and quick reference - Mathematics Meta Stack Exchange

First, TeX equations on a web page must be surrounded by math delimiters.  Display delimiters \\[ \\] produce full-size, centered, block-style equations, suitable for a scientific publication typeset in LaTeX.  Inline delimiters \\( \\) will shrink tall equations.  For full-size equations that may be positioned on a web page using standard html formatting and css, use inline delimiters with the \displaystyle command.

(Dollar sign delimiters \$\$ . . . \$\$ and \$ . . . \$ may also be used, but MathJax uses the LaTeX delimiters above by default to prevent confusion with dollar signs in plain text.)

Display delimiters:
\\[ . . . \\]
\[ \sum_{i=0}^{n-1} \frac{1}{2^i} \]

Inline delimiters:
\\( . . . \\)
\( \sum_{i=0}^{n-1} \frac{1}{2^i} \)

Inline delimiters, display style, inside a paragraph:
<p style="margin-left: 2em">
\\( \displaystyle . . . \\)
</p>

\( \displaystyle \sum_{i=0}^{n-1} \frac{1}{2^i} \)

Here are some examples of TeX math code.  Commands are preceded by a backslash, and braces are used to group expressions.

Ordinary operators:
\\( a + bc = d/e \\)
\( a + bc = d/e \)

Superscript:
\\( x^2 \\)
\( x^2 \)

Subscript:
\\( x_{i+1} \\)
\( x_{i+1} \)

Roots:
\\( \sqrt{9} = \sqrt[3]{27} \\)
\( \sqrt{9} = \sqrt[3]{27} \)

Fractions and Greek letters:
\\( \Phi = (\sqrt{5} + 1)/2 = \frac{\sqrt{5} + 1}{2} = { \displaystyle \frac{\sqrt{5} + 1}{2} } \\)
\( \Phi = (\sqrt{5} + 1)/2 = \frac{\sqrt{5} + 1}{2} = { \displaystyle \frac{\sqrt{5} + 1}{2} } \)

Operators that take “above” and “below” arguments may be displayed in different ways.

Inline:
\\( \sum_{i=1}^{\infty} {\frac{1}{2^i}} = 1 \\)
\( \sum_{i=1}^{\infty} {\frac{1}{2^i}} = 1 \)

Inline with  \limits:
\\( \sum\limits_{i=1}^{\infty} {\frac{1}{2^i}} = 1 \\)
\( \sum\limits_{i=1}^{\infty} {\frac{1}{2^i}} = 1 \)

Display style:
\\( \displaystyle \sum_{i=1}^{\infty} {\frac{1}{2^i}} = 1 \\)
\( \displaystyle \sum_{i=1}^{\infty} {\frac{1}{2^i}} = 1 \)

Display style with  \nolimits:
\\( \displaystyle \sum\nolimits_{i=1}^{\infty} {\frac{1}{2^i}} = 1 \\)
\( \displaystyle \sum\nolimits_{i=1}^{\infty} {\frac{1}{2^i}} = 1 \)

Plain text; note that all math variables are italic:
\\( \textrm{for each } n \\)
\( \textrm{for each } n \)
\\( \textsf{for each } n \\)
\( \textsf{for each } n \)

Spaces in math code are ignored.  To add them, a number of space characters are available.  Two useful ones are backslash for a regular space, and backslash comma \\, for a thin space:
\\( a b \ c d \\)
\( a b \ c d \)
\\( r \, \textrm{cos} \theta \\)
\( r \, \textrm{cos} \theta \)