Feel free to utilize the following code snippet:

<sup>6</sup>/<sub>7</sub>​

VIEW DEMO

If you want to create a straight line, here's how you can do it:

HTML

<div class="top">2</div><div class="bottom">6</div>​

CSS

.top{border-bottom:solid black 1px; display:inline-block; float:left}
.bottom{ display:inline-block; clear:left; float:left}

VIEW DEMO 2

.fraction {
  display: inline-block;
  position: relative;
  vertical-align: middle; 
  letter-spacing: 0.001em;
  text-align: center;
  font-size: 12px;
  }
.fraction > span { 
  display: block; 
  padding: 0.1em; 
  }
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}

Foobar
  <div class="fraction">
    <span class="fup">4</span>
    <span class="bar">/</span>
    <span class="fdn">5</span>
  </div>
Foobar

Adjust the font size of .fraction as needed to customize it

Utilizing the contextual alternatives provided by the font is essential. While current support may be lacking, it will become more widespread in the future.

If you apply the fractions class to the number, you would implement the following:

.fractions { 
    -moz-font-feature-settings: "frac=1";
    -ms-font-feature-settings: "frac" 1;
}

Interestingly, Gecko interprets the raw data for fonts, but the Microsoft version is expected to become the norm.

Check out a demonstration here:

Currently supported only in Gecko and Trident, Webkit is likely to catch up soon.

If you're searching for a solution, consider exploring tools like MathJax that utilize Javascript functionality.

In case you only need basic fractions, you can make use of Unicode characters (or their equivalent HTML entities):
¼ ½ ¾ ⅓ ⅔ ⅛ ⅜ ⅝ ⅞

When it comes to styling with CSS, while the horizontal bar might be considered more traditional, nowadays many people prefer using the diagonal slash when writing fractions on paper. Here's an example of how you could achieve this:

.fraction > sup,
.fraction > sub {
  font-size: .66em;
}
.fraction > sup {
  vertical-align: .4em;
}
.fraction > sub {
  vertical-align: -.2em;
}

Here's how you would implement this in your HTML code:

<span class="fraction">
  <sup>1</sup>⁄<sub>8</sub>
</span>

Personally, I don't believe JavaScript is necessary in this particular situation.

Take a look at 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>

Check out this CodePen link as well!

New features have been added to Flexbox

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}

<span class="fraction">
  <span class="numerator">3</span>
  <span class="denominator">4</span>
</span>

<span class="fraction">
  <span class="numerator">12</span>
  <span class="denominator">7</span>
</span>

In my experience, I've found that the most effective approach is to use a font-size of 0.5em while incorporating the unicode fractional slash symbol (⁄ " ⁄ "). The numerator should be styled with vertical-align:super. If you're able to disregard support for IE7 and older versions, utilizing the :before pseudo-class can streamline the markup process.

.num {
    font-size: 0.5em;
    vertical-align: super;
}
.den {
    font-size: 0.5em;
}
.den:before {
    content: '\2044';
    font-size: 2em;
}

Furthermore,

<span class="num">19</span><span class="den">45</span>

(Check out this Demo)

An alternative method is to directly incorporate the respective Unicode characters to display ¹⁹⁄₄₅:

¹⁹⁄₄₅

(Refer to the wikipedia article for more information.)

This method does not automatically change '1/2' to a fraction format, however with more flexibility in the templating, you can try the following approach. Instead of exploring the use of tables to achieve this effect:

HTML:

<table class="fractional">
  <tr>
    <td class="numerator">Numerator</td>
  </tr>
  <tr>
    <td class="denominator">Denominator</td>
  </tr>
</table>

CSS:

table.fractional {
  display: inline-block;
  text-align: center;
  margin-left: 1em;
}

table.fractional td {
  line-height: 2em;
}

table.fractional td.numerator {
  border-bottom: 1px solid lightgray;
}

Output:

In order to display a vertically written fraction properly, handle mixed numbers, and keep it concise with HTML, we can utilize specific attributes and CSS styles without the need for Javascript. This approach is effective for aligning fractions in a vertical manner while ensuring they are centered, although it may not work well for complex fractions with multiple layers.

Utilizing Custom Tag Names

To achieve this, we define custom tags like fraction, numerator, and denominator to render fractions using basic HTML elements and CSS properties such as inline-block display, relative positioning, and vertical alignment with borders. Occasionally, adding left padding can prevent content overlap. The CSS styling would look like:

fraction, numerator, denominator {
    display: inline-block;
    vertical-align: middle;
    padding-left: 2px   
}

fraction {
    display: inline-block;
    text-align: center;    
}

numerator {
    border-top: 1px solid;
    display: block;
}

The structure of entering a fraction involves nesting these three custom tags in the following order:

<fraction>
    <numerator>A</numerator>
    <denominator>B</denominator>
</fraction>

Examples

I have shortened the tag names and added padding to avoid overlap issues. An example of a small-fraction html implementation is also showcased below.

frac, numer, denom, fracsmall {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px; margin-right: 2px; 
}

frac, fracsmall {
    display: inline-block;
    text-align: center;    
}
 
denom {
    border-top: 1px solid;
    display: block; /* Creates new line */
}

fracsmall > numer {
    font-size: 75%;
}

fracsmall > denom {
    font-size: 75%;
}

The value of 9<frac><numer>3</numer><denom>4</denom></frac> is also represented as 
<frac><numer>39</numer><denom>4</denom></frac>.

Additionally, <fracsmall><numer>1</numer><denom>1</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>2</denom></fracsmall>
+ <fracsmall><numer>1</numer><denom>3</denom></fracsmall> + ... exhibits divergence.
<br />

Here is an illustration of a more intricate fraction:
<frac>
<numer>
    1 + 
    <frac><numer>1</numer><denom>x</denom></frac> + 
    <frac><numer>1</numer><denom>x<sup>2</sup></denom></frac>
</numer>
<denom>
    x + <frac><numer>1</numer><denom>y</denom></frac> + z
</denom>
</frac>
<br />

Let's experiment with a continued fraction. π = 
<frac>
<numer>4</numer>
<denom> 1 +
<frac>
<numer>1<sup>2</sup></numer>
<denom> 3 +
    <frac>
    <numer>2<sup>2</sup></numer>
    <denom> 5 +
        <frac>
        <numer>3<sup>2</sup></numer>
        <denom> 7 + ...
        </denom>
        </frac>
    </denom>
    </frac>
</denom>
</frac>
</denom>
</frac>. It appears somewhat awkward without proper bracketing...

This method really helped me

I recently discovered a helpful technique for aligning fractions based on the length of the numerator and denominator. By adjusting some code provided by Johnatan Lin, I was able to achieve the desired outcome. Essentially, when the numerator is longer, I applied the "numerator" class only to the numerator element and left the denominator without any classes. Conversely, when the denominator is longer, I used the "denominator" class only for the denominator element.

The css styling

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}

Example of html code

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}

<h1>A way to show fractions (not only numers)</h1>
This is what I did after different solutions found on stackoverflow.

<h2>This is with longer numerator</h2>
<div class="fraction">
  <div class='numerator'>Longer than the other one</div>
  <div>Number of guests</div>
</div>


<h2>This is longer denominator</h2>
<div class="fraction">
  <div>Revenues</div>
  <div class="denominator">Number of guests</div>
</div>
<p>Hello from Giovanni</p>

A simplified approach

In order to streamline the process, I created a JavaScript function that can be inserted in the body tag within script tags or in a separate JavaScript file.

function numeratore(num, den){
    document.write("<div class='fraction'><div class='numerator'>" + num + "</div><div>" + den + "</div></div><div id='div1'></div>")
}

function denominatore(num, den){
    document.write("<div class='fraction'><div>" + num + "</div><div class=\"denominator\">" + den + "</div></div><div id='div1'></div>")
}

Include this in the html body

<script>
denominatore("Revenues", "number of guests")
numeratore("Production costs", "Number of menu items served")
</script>

denominatore: for longer denominators numeratore: for longer numerators

CSS styling remains the same

This CSS should be added within the style tags or in an external stylesheet.

.fraction {
  display: inline-flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}
.numerator {
  border-bottom: 2px solid grey;
}
.denominator {
  border-top: 2px solid grey;
}