How to insert superscript characters (e.g: 2^2) in HTML?

How to insert superscript characters (e.g: 2^2) in HTML?

Problem Description:

As the title says, is it possible in HTML (or with special characters) to type for example: 2^2 so the square is smaller and placed at the top.

Any ideas how to achieve that?

Solution – 1

Try this:

2<sup>2</sup>

Solution – 2

You need the superscript tag.

2<sup>2</sup>

This outputs 2²

Solution – 3

You can use the “superscript 2” unicode character (HTML entity ² or ²), e.g.

<p>2²</p>

It looks like this:

2²

Solution – 4

It’s called Superscript and there’s a slight difference in it’s use with a <sup> tag and directly using the Unicode Character called "Superscript Two":

HTML Tag: 2<sup>2</sup> 2²

HTML entity: (see the difference) 2² 2²

Encodings :

HTML Entity (decimal)              ²
HTML Entity (hex)                  ²
HTML Entity (named)                ²
Windows                            Alt +B2
                                   Alt 0178
                                   Alt 253
UTF-8  (hex)                       0xC2 0xB2 (c2b2)
UTF-8  (binary)                    11000010:10110010
UTF-16 (hex)                       0x00B2 (00b2)
UTF-16 (decimal)                   178
UTF-32 (hex)                       0x000000B2 (b2)
UTF-32 (decimal)                   178
C/C++/Java source code             "u00B2"
Python source code                 u"u00B2"

^{Fileformat link}

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
http://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts

Solution – 5

You can use ² html entity:

2²

It will be displayed as “2²”.

Solution – 6

You could use the <sup> tag which is used for superscripts. Alternatively if you wanted more control you could use a span with a special style and an offset of relative.

HTML (Example)

<div>2<span class="superscript">2</span></div>

CSS

.superscript {
    font-size: 0.4em;
    line-height: 1.2em;
    vertical-align: top;
    position: relative;
}

You can see this example working in JSFiddle here.

Solution – 7

Using MathML,

<math>
  <msup>
    <mn>2</mn>
    <mn>2</mn>
  </msup>
</math>