The HTML5 MathML <mfrac> tag is an inbuilt element in HTML5. It is use to add fraction symbol between two digits or equations.
Syntax:
<mfrac> numerator denominator </mfrac>
Attributes: This tag accepts below mentioned attribute:
- bevelled: This attribute holds the value how the fraction will be displayed if the value is true then numerator and denominator are displayed side by side and separated by a slash. If the value is false(default value) displayed numerator and denominator are on top of each other.
- class| id| style: This attribute is used to hold the styles of the child elements.
- href: This attribute used to hold any hyperlink to a specified URL.
- mathbackground: This attribute holds the value of the math expressions background color.
- mathcolor: This attribute holds the color of the math expressions.
- denomalign: This attribute holds the alignment value of denominator, possible values are left, center and right.
- linethickness: This attribute holds the value of the thickness of the fraction. Possible values are thick, medium and thin.
- numalign: This attribute holds the alignment value of the numerator, possible values are left, right and center.
Below example illustrates the MathML <mfrac> tag in HTML5:
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 MathML mfrac tag</title>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>HTML5 MathML mfrac tag</h3>
<math>
<mfrac bevelled="true">
<mfrac>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mfrac>
<mfrac>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</mfrac>
</mfrac>
</math>
</center>
</body>
</html>
|
Output:
Supported Browsers: The browsers supported by HTML5 MathML <mfrac> tag are listed below:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
07 Jul, 2023
Like Article
Save Article