1

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.

Community
  • 1
  • 1
Levi Hackwith
  • 9,232
  • 18
  • 64
  • 115
  • This question is not a good fit to our Q&A format. We expect answers to generally involve facts, references, or specific expertise; this question will likely solicit opinion, debate, arguments, polling, or extended discussion. – iambriansreed Apr 09 '12 at 23:36
  • @iambriansreed, I may have misread, but the OP is asking for what the semantic way to represent fractions is in HTML5. And, in this case, there is a specification designed for math which fits this question perfectly (and is extremely useful to anyone trying to find the semantic way to display math in HTML). – 0b10011 Apr 09 '12 at 23:49
  • @bfrohs "...this question will likely solicit opinion..." Good question just not for SO. – iambriansreed Apr 09 '12 at 23:53
  • 1
    @bfrohs That is indeed what I am asking for. In my opinion, asking questions about best-practice or "the proper way" is valid as long as the question solicits an authoritative response from the community and not just a matter of opinion. In this case, Alohci hit the nail on the head. – Levi Hackwith Apr 09 '12 at 23:58

3 Answers3

4

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/

Gandaro
  • 3,427
  • 1
  • 17
  • 19
Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 1
    MathML isn’t HTML5, or HTML at all. It’s just one of the many ways to insert non-HTML content. No reference was cited regarding its preferred status as opposite to the alternative approaches to this question (which is interesting but not the question that was asked). – Jukka K. Korpela Apr 10 '12 at 06:22
  • @JukkaK.Korpela - I've heard that argument before, that MathML is not HTML5, and I don't understand it. The HTML5 spec goes to some lengths to describe how to parse MathML embedded in HTML5 including managing the namespace issues. For marking up math in HTML5, MathML is the approved way to do it. There's no prospect of an alternative being introduced because it would just be duplication. It holds a similar status in HTML5 to SVG. If you want to do retained mode graphics in HTML5, use SVG, if you want to do math, use MathML. – Alohci Apr 10 '12 at 06:46
  • @JukkaK.Korpela - Added link to description of MathML in the HTML5 spec. It even has an example using `` – Alohci Apr 10 '12 at 07:46
  • 1
    The question was about HTML5, not something embedded into HTML5, and it requested for “a solid reference from a reputable source that states what the best approach is”. – Jukka K. Korpela Apr 10 '12 at 10:37
1

There is no standard on custom fractions in HTML5. (And HTML5 is not even close to a standard.) There is no best practice established for them in HTML in general. There appears to be no work in progress to define standards or best practices on them.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I don't understand the reason behind downvoting this. @jukka is right. MathML is a completely different markup language and is not a part of HTML just like SVG. – apnerve Apr 15 '12 at 21:20
-1

I don't have a reference, but this is my opinion: sup and sub are display tags, and shouldn't be used except for rare cases. This source http://www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage/ mentions chemical formulas, which are a good example because in their case the position of text has a semantic meaning.

I don't think that fractions belong to these cases. Fractions could be displayed in many ways, as discussed here: http://en.wikipedia.org/wiki/Fraction_(mathematics)#Writing_simple_fractions

So, you should probably just use a general solution like the span tag.

abresas
  • 835
  • 6
  • 7