CODEWITHSUNDEEP
htmlstandardssemantic-markupfractions
Levi Hackwith
Levi Hackwith

Reputation: 9332

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

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.

Upvotes: 1

Views: 653

Answers (3)

Alohci
Alohci

Reputation: 83016

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/

Upvotes: 4

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201798

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.

Upvotes: 1

abresas
abresas

Reputation: 835

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.

Upvotes: -1

Related Questions