How to write fraction value using html?

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

How do I write fraction value using html without using image?

NOTE: I don't want this 1 1/2 pattern but strictly just as the pic above

Try the following:

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

This displays as:

1¹⁄₂

.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>

The following code will be rendered just as the example in the question, and if the client does not support CSS it will be rendered as plain text, still readable as a fraction:

<p>1 <span class="frac"><sup>12</sup><span>/</span><sub>256</sub></span>.</p>

span.frac {
  display: inline-block;
  font-size: 50%;
  text-align: center;
}
span.frac > sup {
  display: block;
  border-bottom: 1px solid;
  font: inherit;
}
span.frac > span {
  display: none;
}
span.frac > sub {
  display: block;
  font: inherit;
}

The middle <span> serves only for the clients who do not render CSS - the text is still readable as 1 12/256 - and that's why you should place a space between the integer and the fraction.

You may want to change the font-size, because the resulting element may be a little taller than the other characters in the line, or you may want to use a relative position to shift it a little to the bottom.

But the general idea, as presented here, may be enough for the basic use.

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

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>

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

1 ½

Result is 1 ½

Using MathML (Specification, Wikipedia):

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

Using pure html and with margin property of br you can work around

br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>

br {   
    content: "";
    margin: -1%;
    display: block;
 }

<big>1</big><sup> <u><big>1</big></u></sup><br/>&nbsp;&nbsp;<sup> <big>2</big></sup>

Here is another method using newer CSS methods. This method also uses custom tags, but you can change these to <div class = "..."></div> if you're not fond of custom tags.

Copy the following to your CSS:

Use .fraction and .numer if you use classes instead

fraction {
  display: inline-grid;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;

  font-size: 0.8em; // You can change fraction size here. I recommend 0.5em ~ 0.8em
  vertical-align: top;
}

numer {
  border-bottom: 1px solid;
}

You can now use the tags like this:

Add 1 <fraction> <numer>1</numer> 2 </fraction> cups of flour into the bowl and stir.

Output

I'd also recommend using read-only formatting for screen-reader output:

CSS

read {
  position: absolute;
  font-size: 0;
}

HTML

1 <fraction> <read>and</read> <numer>1</numer> <read>over</read> 2 </fraction>

Screen-reader: "one and one over two..."

It's something like this:

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