Subíndice: la etiqueta <sub> se utiliza para agregar un texto de subíndice al documento HTML. La etiqueta <sub> define el texto del subíndice. El texto del subíndice aparece medio carácter por debajo de la línea normal y, a veces, se representa en una fuente más pequeña. El texto de subíndice se puede usar para fórmulas químicas, como H2O para escribirse como H 2 O.
Superíndice: la etiqueta <sup> se usa para agregar un texto de superíndice al documento HTML. La etiqueta <sup> define el texto en superíndice. El texto en superíndice aparece medio carácter por encima de la línea normal y, a veces, se representa en una fuente más pequeña. El texto en superíndice se puede utilizar para las notas al pie.
Ejemplos:
- Super y Subscript en código HTML:
html
<!DOCTYPE html> <html> <body> <p>Testing <sub>subscript text</sub></p> <p>Testing <sup>superscript text</sup></p> </body> </html>
- Producción:
- Establecer estilo de subíndice con CSS:
html
<!DOCTYPE html>
<html>
<head>
<style>
sub {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<p>A sub element is displayed like this</p>
<p>This text contains <sub>subscript text</sub></p>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
- Producción:
- Otro ejemplo con CSS:
html
<!DOCTYPE html>
<html>
<head>
<style>
sub {
vertical-align: sub;
font-size: medium;
}
</style>
</head>
<body>
<p>Examples to demonstrate subscript text</p>
<p> Chemical formula of water is H<sub>2</sub>O</p>
<p>T<sub>i+2</sub>= T<sub>i</sub> + T<sub>i+1</sub></p>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
- Producción:
- Ejemplo de superíndice con CSS:
html
<!DOCTYPE html>
<html>
<head>
<style>
sup {
vertical-align: super;
font-size: small;
}
</style>
</head>
<body>
<p>A sup element is displayed like this:</p>
<p>This text contains <sup>superscript text</sup></p>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
- Producción:
- Ejemplo para escribir ecuaciones matemáticas usando superíndices y subíndices :
html
<!DOCTYPE html>
<html>
<head>
<style>
sup {
vertical-align: super;
font-size: medium;
}
</style>
</head>
<body>
<p>Examples to demonstrate superscript text</p>
<p>2 <sup>4</sup>=16</p>
<p>X <sup>4</sup>+ Y<sup>6</sup></p>
<p>9<sup>th</sup> of september</p>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
- Producción:
Navegador compatible: los navegadores compatibles se enumeran a continuación.
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Este artículo es una contribución de Shubrodeep Banerjee . Si te gusta GeeksforGeeks y te gustaría contribuir, también puedes escribir un artículo usando write.geeksforgeeks.org o enviar tu artículo por correo a review-team@geeksforgeeks.org. Vea su artículo que aparece en la página principal de GeeksforGeeks y ayude a otros Geeks.
Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema tratado anteriormente.
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA