Programação
 › Algoritmo  › C/C++  › Java
Web
 › HTML/XHTML  › JavaScript  › PHP
Sistema Operacional
 › Comandos de DOS  › Windows  › Linux  › Mac/BSD
Office
 › Word / Writer  › Excel / Calc
Áreas do Site
 › Download  › Fórum  › Blog
Recomendamos
Computadores e Informática em Lisboa
TI Expert » Programação » Web » HTML/XHTML » Sobrescrito e Subscrito - tags SUP e SUB

Sobrescrito e Subscrito

Muitas vezes, principalmente quando trabalhamos com números, necessitamos utilizar caracteres sobrescritos ou subscritos.

Caracteres sobrescritos ficam acima da base da linha e caracteres subscritos ficam abaixo.

Não existe uma forma de criarmos este efeito diretamente pelo teclado, portanto, devemos formatar tais caracteres para que o browser os renderize acima da linha ou abaixo.

Em HTML/XHTML quem faz esse papél são as tags SUP e SUB, sendo SUP sobrescrito e SUB subscrito.

Abaixo estão alguns exemplos que podemos nos deparar.

São Paulo tem 1.522,986Km2 de território.

A fórmula da água é H2O.

A url de TI Expert© é www.tiexpert.net.

112 equivale a 210. (lê-se: 11 na base binária equivale a 2 na base decimal).

Nos exemplos acima podemos ver a importância da prática do uso de SUP (sobrescrito) e SUB (subscrito). Isso fica bastante evidente principalmente no último exemplo, que fica indecifrável. Agora, vamos codificar estes 4 exemplos usando SUP e SUB no HTML/XHTML.

...
<P>São Paulo tem 1.522,986Km<SUP>2</SUP> de território.<BR>
A fórmula da água é H<SUB>2</SUB>O.<BR>
A url de TI Expert<SUP>&copy;</SUP> é www.tiexpert.net.<BR>
11<SUB>2</SUB> equivale a 2<SUB>10</SUB>.</P>
...

Isso é renderizado no browser da seguinte forma:

Exemplo de como é renderizado as tags SUP e SUB

Características - tag SUP (texto - formatação)
uso HTML 4.01 <SUP>...</SUP>
XHTML <SUP>...</SUP>
HTML 5 <SUP>...</SUP>
Formatação Padrão Fonte Serif
Tamanho 13px
Cor #000000 (preto)
Alinhamento Vertical superior
Margens 0px
visualização inline
Atributos Aceitos id, class, lang, dir, title, style
Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Fonte: w3.org
Características - tag SUB (texto - formatação)
uso HTML 4.01 <SUB>...</SUB>
XHTML <SUB>...</SUB>
HTML 5 <SUB>...</SUB>
Formatação Padrão Fonte Serif
Tamanho 13px
Cor #000000 (preto)
Alinhamento Vertical inferior
Margens 0px
visualização inline
Atributos Aceitos id, class, lang, dir, title, style
Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Creative Commons License
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons.

Faça o download da versão em PDF Indique nosso site Gostou?
Indique nosso site!
Este artigo foi
lido 43322 vezes
Bookmark e Compartilhe

Páginas Relacionadas

Enquete
O Google Chrome OS irá desbancar o Microsoft Windows 7?
» ProgramaçãoAlgorítmo | C/C++ | Java

» WebHTML/XHTML | JavaScript | PHP

» Sistema OperacionalComandos de DOS | Windows | Linux | Mac/BSD

» OfficeWord/Wirter | Excel/Calc

» Áreas do SiteDownloads | Fórum | Blog