How to write maths fraction in HTML

how to write fraction in html

Html code writes a fraction in your webpage correctly.

In this article, we will learn HTML codes for writing fractions on a webpage. How To Write perfect Fractions Using Only simple HTML & CSS codes. Guide to writing fractions in HTML and CSS from Infolips.com. How to write numerator and denominator in Html. So we will learn a complete idea and trick to write a perfect fraction on

What is a fraction?

Fraction is an important part of mathematics or science. It is written with two numbers arranged vertically separating them by a line. The top number is called the numerator and the divisor number or bottom number is called the denominator. One half meaning 1 is divided by 2 or we can say 1 part out of 2, and is expressed as 1 over 2 like ½. Let’s learn how to write maths fractions in HTML website.

What is the common practice to write the fraction in HTML?

Common fractions are written in HTML with the help of “&frac” entity. The entity code is included a numerator and a denominator.

Let’s see the example, ¼ represents one quarter, which will appear on the page like this ¼. This is not a correct solution, we can not write a bigger fraction with these entities’ codes.

Some other options to write fractions in HTML webpage :

Some are written fraction in superscript <sup> and subscript <sub> form. But we can not write a bigger fraction in this format. Most of the browsers like Chrome, Edge, Opera, Firefox, and Safari and so on are not support this.

How to write the perfect fraction in HTML?

Unfortunately writing fractions in HTML is a little bit difficult or tricky task. We can not write fractions like our normal text writing.

How to write fractions in HTML?

Most of the writers write fractions in decimal form, i.e. (0.51). It is not a proper way to express your fraction values in decimal form. So start to learn how to write the below fraction on your web page. That is also in simple HTML and ccs codes.

Look at the following fraction and let’s learn how to write fraction value using html ?

So see the html codes for write the fraction and write the math equation.

<table style=”width: auto;”>
<tbody><tr>
<td class=”mid1″ rowspan=”2″> (2) &nbsp; 0 > </td><td class=”frac”>−9</td>
</tr>
<tr>
<td class=”frac1″>5</td>
</tr>
</tbody></table>

CSS codes:

.frac {border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #333; font-family: “Trebuchet MS”;
padding: 0px; font-size: 0.9em; text-align: center; vertical-align: bottom; padding: 0px;}

.frac1 {font-size: 0.9em; text-align: center; border: 0px; vertical-align: top; padding: 0px; margin-top: -2px; font-family: “Trebuchet MS”;}

.mid1 {vertical-align: top; padding-top: 13px;}

Result is :

(2)   0 > −9
5

This way we can learn how to write fraction values using HTML without using images?

Practice to write the math equation. Let’s check one more bigger fraction write with simple htmls codes :

Check the below coding and make yourself more confident to write the fraction in html :

<table>
<tr>
<td rowspan=”2″> (B) : </td><td class=”frac”>10</td>
<td rowspan=”2″> = </td><td class=”frac”>10 &divide; 2</td>
<td rowspan=”2″> = </td><td class=”frac”>5 </td>
</tr>

<tr>
<td class=”frac1″>4 </td><td class=”frac1″>4 &divide; 2</td>
<td class=”frac1″>2 </td>
</tr>
</table>

CSS coding :

.frac {border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #333; font-family: “Trebuchet MS”;
padding: 0px; font-size: 0.9em; text-align: center; vertical-align: bottom; padding: 0px;}

.frac1 {font-size: 0.9em; text-align: center; border: 0px; vertical-align: top; padding: 0px; margin-top: -2px; font-family: “Trebuchet MS”;}

.mid1 {vertical-align: top; padding-top: 13px;}

Result is :

(B) : 10 = 10 ÷ 2 = 5
4 4 ÷ 2 2

You can check these fraction codes and try them as per your requirement. We have developed this page by using these same codes – to check click here: Rational number

I hope you get your desired code for your fraction and it helps you to search.

Some informative links :

How to select AC: AC buying guide