La etiqueta HTML <sup> y <sub>

Etiqueta para establecer superíndices y subíndices


Imaginemos el caso en el que estamos escribiendo un texto, y en una de las cifras tenemos que indicar un superíndice para hacer referencia a una exponenciación: 10 elevado a 2, por ejemplo.

Podríamos ser avispados y buscar la combinación de teclas apropiada para escribir dicha cifra (10²), esto es, pulsar la combinación de teclas ALT+253. De la misma forma podríamos conseguir algunas más, pero... ¿Qué ocurre si necesitamos hacer lo mismo con un texto o alguna cifra más específica que no tiene equivalente mediante esta forma?

En HTML se puede conseguir mediante las siguientes etiquetas.

La etiqueta <sup>

La etiqueta HTML <sup> se utiliza para indicar superíndices. De esta forma tenemos un mecanismo que nos permite diferenciar el número 242 del número 242. Observa el siguiente fragmento de código:

<p>El resultado de 24<sup>2</sup> es <strong>576</strong>.</p>

Esto nos puede servir tanto para números como para letras:

<p>Esa información la obtendremos en la variable <var>x<sup>a</sup></var>.</p>

La etiqueta <sub>

De la misma forma, podemos utilizar la etiqueta <sub> para hacer referencia a subíndices.

<p>El resultado queda guardado en la variable <var>x<sub>t</sub></var>.</p>

Fórmulas complejas

Si buscas un sistema más complejo para representar fórmulas o ecuaciones matemáticas, quizás deberías profundizar en alguno de estos sistemas:

NombreDescripción
MathJaxMotor Javascript para matemáticas. Convierte a SVG o a HTML.
MathMLEstándar de representación matemática para máquinas basada en XML.
Latex.jsConversor de LaTeX a HTML5.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev