How to Write Equations in HTML

How to write equations in html?

Try mathjax http://www.mathjax.org/ . I personally find it very good.

Write formula in html

Check out MathJax, which is used on math.stackexchange.com.

Math equations on the web

It turns out this is a bit of a pain.

You can use MathML, but browser support is still iffy. If you are starting with latex you've got a few options for converting to html, but they'll all typically end up rendering the actual equations to images and inlining those.

Nothings all that pretty (unless you resort to pdf or something). What's best will depend a bit on what sort of content, how many equations, and how complicated the equations are.

Here is a decent summary.

What's the best way to write Mathematical Equations on the Web?

The jsMath package is an option that uses LaTeX markup and native fonts. Quoting from their webpage http://www.math.union.edu/~dpvc/jsMath/:

The jsMath package provides a method
of including mathematics in HTML pages
that works across multiple browsers
under Windows, Macintosh OS X, Linux
and other flavors of unix. It
overcomes a number of the shortcomings
of the traditional method of using
images to represent mathematics:
jsMath uses native fonts, so they
resize when you change the size of the
text in your browser, they print at
the full resolution of your printer,
and you don't have to wait for dozens
of images to be downloaded in order to
see the mathematics in a web page.
There are also advantages for web-page
authors, as there is no need to
preprocess your web pages to generate
any images, and the mathematics is
entered in TeX form, so it is easy to
create and maintain your web pages.

See for example this page or that one.

How to write chemical formulas in HTML?

You can use MathML, which may be a bit verbose. This is technically not HTML, but XML. However, it is supported natively by some browsers, such as Safari and Firefox. Unfortunately, Chrome does not support this, but by including a MathJax script, it can be converted to pure HTML.

<math class="chem">
  <mmultiscripts>
    <mi>Sn</mi>                            <!-- base expression -->
    <none />                               <!-- postsubscript -->
    <mrow><mi>119</mi><mo>+</mo></mrow>    <!-- postsuperscript -->
    <mprescripts />
    <mn>50</mn>                            <!-- presubscript -->
    <mn>119</mn>                           <!-- presuperscript -->
  </mmultiscripts>
</math>

<hr>

<!-- For browsers that do not support MathML: -->
<script id="s"></script><button onclick="s.src='https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=MML_CHTML'">Load MathJax Script</button>

Mix of text and math formula on HTML page

In this answer, Davide Cervone states:

MathJax only implements the macros used for math layout, not text layout, so things like \begin{tabular} and \begin{center} are not supported. Instead, you can use an array environment [...]

This is why we can't use all the environments. The following code should work:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathJax</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>

<body>
\(
  \begin{array}{ccc}
    \left\lbrace
    \begin{matrix}
      \mathrm{Option1}\\
      \mathrm{Option2}
    \end{matrix}
    \right\rbrace & %
%
    your\ content & %
%
    \begin{matrix}
      \mathrm{type1}\\
      \mathrm{type2}\\
      \mathrm{type3}
    \end{matrix}\\
  \end{array}
\)
</body>
</html>

Snippet:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

\(
  \begin{array}{ccc}
    \left\lbrace
    \begin{matrix}
      \mathrm{Option1}\\
      \mathrm{Option2}
    \end{matrix}
    \right\rbrace & %
%
    your\ content & %
%
    \begin{matrix}
      \mathrm{type1}\\
      \mathrm{type2}\\
      \mathrm{type3}
    \end{matrix}\\
  \end{array}
\)

How to write physics equation in HTML

Hopefully this might set you in the right direction:

<table>
  <tbody>
    <tr>
      <td>y = A sin ω</td>
      <td style="font-size:200%">(</td>
      <td>t -</td>
      <td>
        <table>
          <tr>
            <td style="border-bottom:solid 1px black">x</td>
          </tr>
          <tr>
            <td>v</td>
          </tr>
        </table>
      </td>
      <td style="font-size:200%">)</td>
  </tbody>
</table>

There is a lot you can achieve with nested tables.

How to Write Equations in HTML