What is The Standards-Based / Semantic Way to Do Custom Fractions in HTML 5?

Question

Similar Question: How to write fraction value using html?

Where My Question Differs:

1. Is use of the <sup> and <sub> tags considered the "standard way" of doing fractions in HTML 5?
2. If not, what is the way that custom fractions are supposed to be done?

Further Clarifications:

I am not asking how to do custum fractions in HTML 5. I'm looking for what the standard or best practice is. I've seen a lot of different techniques and I'm looking for a solid reference from a reputable source that states what the best approach is in terms of semantics and web standards.

Answer 1

Probably the most correct way to do fractions in HTML5 is to use MathML. Can’t get much more semantic for fractions than the <mfrac> element.

You can do this:

<math>
  <mfrac bevelled="true">
    <mn>99</mn>
    <mn>100</mn>
  </mfrac>
</math>

But the problem with using cutting edge stuff is that it doesn’t have widespread support in browsers yet. A quick test shows that it currently only works in Firefox and Opera.

See it here: https://jsfiddle.net/6sfeqcw5/