Tag HTML <small>
A tag <small> diminui o tamanho da fonte do texto em um nível abaixo do tamanho base do documento (de médio para pequeno, ou de x-grande para grande).
A tag HTML <small> marca comentários secundários e letras miúdas — conteúdo de importância secundária, como avisos de direitos autorais, isenções de responsabilidade legais, informações de licença, atribuições e as letras pequenas ao lado de um preço. Os navegadores a renderizam aproximadamente um tamanho menor do que o texto circundante (cerca de 80% do tamanho de fonte do elemento pai), mas seu valor real é semântico: ela indica aos navegadores e tecnologias assistivas que o texto é uma nota lateral, e não um título ou a mensagem principal.
Quando usar <small> (e quando não usar)
Esta é a distinção fundamental que muitos desenvolvedores não percebem. No HTML5, <small> não é uma ferramenta genérica para "deixar este texto menor". Se você deseja apenas alterar o tamanho visual de um texto por motivos de design, use a propriedade CSS font-size.
Use <small> quando o conteúdo for letra miúda ou um comentário secundário:
- Linhas de direitos autorais em rodapés
- Isenções de responsabilidade e termos legais ("Termos aplicáveis")
- A nota com asterisco ao lado de um preço ou taxa de juros
- Notas de atribuição e licenciamento
Recorra ao CSS font-size quando quiser simplesmente texto menor sem o significado de "comentário secundário" — por exemplo, uma legenda ou rótulo visualmente pequeno por estilo.
Assim como as tags <i>, <b>, <sub> e <sup>, <small> é totalmente semântica no HTML5 e não viola a regra de separação entre estrutura e apresentação. É um elemento inline, portanto flui dentro de uma linha de texto em vez de iniciar um novo bloco.
Sintaxe
A tag <small> vem em pares. O conteúdo é escrito entre as tags de abertura (<small>) e fechamento (</small>).
Exemplo da tag HTML <small>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>Exemplo da tag HTML <small> dentro de uma tag <div>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<h1>Small tag example</h1>
<p>This is some standard paragraph text.</p>
<div>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<small>This is a small text.</small>
</div>
</body>
</html>Exemplos do mundo real
Linha de direitos autorais no rodapé
Um aviso de direitos autorais é a letra miúda clássica, portanto pertence a um elemento <small>:
<footer>
<small>© 2024 Example Inc. All rights reserved.</small>
</footer>Letra miúda ao lado de um preço
Use <small> para o aviso que qualifica um preço ou taxa:
<p>
$9.99/month
<small>Billed annually. Taxes not included.</small>
</p><small> aninhado para redução adicional de tamanho
Você pode colocar um elemento <small> dentro de outro elemento <small>. Cada nível reduz o tamanho da fonte novamente em relação ao seu pai, de modo que quanto mais profundo o aninhamento, menor o texto:
<p>
Main text
<small>
smaller side note
<small>even smaller detail</small>
</small>
</p>Atributos
A tag <small> suporta os Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <small>
O tamanho padrão do navegador para <small> vem do CSS, portanto você pode substituí-lo com a propriedade font-size. O exemplo abaixo mantém o significado semântico de letra miúda enquanto controla a aparência exata:
<!DOCTYPE html>
<html>
<head>
<title>Styling the small tag</title>
<style>
small {
font-size: 0.75em;
color: #777;
}
</style>
</head>
<body>
<p>
Subscribe today!
<small>Cancel anytime.</small>
</p>
</body>
</html>Lembre-se da diferença: use o elemento <small> quando o texto significar letra miúda ou um comentário secundário, e use a propriedade CSS font-size quando quiser apenas alterar o tamanho visual de um texto comum.