# MathML: Write Math Like HTML

**MathML** or Mathematics Markup Language is used to write mathematical formulas such as functions, fractions, scripts, radicals, matrices, integrals, series, etc. It is based on XML and generally embedded in HTML documents.

# Syntax

MathML uses the same syntax as HTML. For example, each mathematical formula is placed in `<math>` tag. Another example is &lt;mfrac&gt; which represents a fraction with a nominator and denominator. This example shows some common math formulas written using MathML:

```xml
<body>
	<math>
		<mtext>Pythagorean Theorem:</mtext>
	</math>
	<math>
		<mrow>
			<msup>
				<mi>a</mi>
				<mn>2</mn>
			</msup>
			<mo>+</mo>
			<msup>
				<mi>b</mi>
				<mn>2</mn>
			</msup>
			<mo>=</mo>
			 <msup>
				<mi>c</mi>
				<mn>2</mn>
			</msup>
		</mrow>
	</math>

	<math>
		<mtext>Quadratic Formula:</mtext>
	</math>

	<math>
		<mrow>
			<mi>x</mi>
			<mo>=</mo>
			<mfrac>
				<mrow>
					<mo form="prefix">&minus;</mo>
					<mi>b</mi>
					<mo>&PlusMinus;</mo>
					<msqrt>
						<msup>
							<mi>b</mi>
							<mn>2</mn>
						</msup>
						<mo>&minus;</mo>
						<mn>4</mn>
						<mo>&InvisibleTimes;</mo>
						<mi>a</mi>
						<mo>&InvisibleTimes;</mo>
						<mi>c</mi>
					</msqrt>
				</mrow>
				<mrow>
					<mn>2</mn>
					<mo>&InvisibleTimes;</mo>
					<mi>a</mi>
				</mrow>
			</mfrac>
		</mrow>
	</math>
	
	<math>
		<msup>
			<mi>x</mi>
			<mi>y</mi>
		</msup>
		<mo>&#x2261;</mo>
		<msup>
			<mi>y</mi>
			<mi>x</mi>
		</msup>
	</math>
</body>
```

![Math formula written with MathML](https://cdn.hashnode.com/res/hashnode/image/upload/v1677481578700/cd0ecec4-9daa-4d73-bb2d-e95916c87e50.png align="center")

# Style

Styling MathML is the same as HTML. You can use CSS to style the MathML tags. This example is the style for the above sample:

```css
* {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}

math {
	font-size: 24px;
	font-family: Latin Modern Math;
}

mi {
	color: blueviolet;
	font-size: 48px;
}

mn {
	color: brown;
	font-size: 36px;
}
```
