How to write fraction value using html?

Question

I want to write fraction value such as the picture below:

How do I wri

Answer 1

Using MathML (Specification, Wikipedia):

<math>
 <mrow>
  <mn>1</mn>
  <mfrac>
   <mi>1</mi>
   <mi>2</mi>
  </mfrac>
 </mrow>
</math>

Answer 2

.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}
.frac > span {
    display: block;
    padding: 0.1em;
}
.frac span.bottom {
    border-top: thin solid black;
}
.frac span.symbol {
    display: none;
} 

1 <div class="frac">
    <span>1</span>
    <span class="symbol">/</span>
    <span class="bottom">2</span>
    
</div>

Answer 3

You can use <sup> and <sub> elements in conjunction with the fraction slash entity ⁄

<sup>1</sup>&frasl;<sub>2</sub> is ¹⁄₂

UPDATE: I made this fiddle that shows a hyphenated fraction in HTML using a table.

   <table>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td style="border-bottom:solid 1px">1</td>
          </tr>
          <tr>            
            <td>2</td>
          </tr>
      </tbody>
   </table>

Answer 4

Try the following:

1<sup>1</sup>&frasl;<sub>2</sub>

This displays as:

1¹⁄₂

Answer 5

I think there is an easier way for doing this. Use the following HTML.

1 ½

Result is 1 ½

Answer 6

Check out the following:

span.frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
span.frac > sup, span.frac > sub {
  display: block;
  font: inherit;
  padding: 0 0.3em;
}
span.frac > sup {border-bottom: 0.08em solid;}
span.frac > span {display: none;}

<p>7&nbsp;<span class="frac"><sup>42</sup><span>&frasl;</span><sub>73</sub></span>.</p>

CodePen