English العربية Português 日本語

HTML: Atributos HTML

Os atributos fornecem informações de configuração adicionais para as tags HTML, tornando o comportamento e a aparência dos elementos mais ricos.

1. O que são Atributos

Os atributos HTML são palavras-chave especiais escritas dentro da tag de abertura, usados para configurar as tags com mais detalhes. Os atributos são escritos no formato nome="valor" dentro da tag de abertura. Uma tag pode ter múltiplos atributos, separados por espaços.

▶ Exemplo

HTML 
<!-- Atributo único -->
<a href="https://example.com">Este é um link</a>

<!-- Múltiplos atributos, separados por espaços -->
<img src="foto.jpg" alt="Uma foto de paisagem" width="800" height="600">

<!-- Os valores dos atributos são recomendados entre aspas duplas, mas aspas simples também funcionam -->
<p title='Um texto de dica'>Um parágrafo com dica</p>
▶ Experimente

Nos exemplos acima, href, src, alt, width, height e title são todos nomes de atributos, e o conteúdo dentro das aspas são os valores específicos. Os nomes dos atributos devem ser sempre escritos em letras minúsculas, e aspas duplas são recomendadas para os valores.

📌 Convenção de Escrita: No HTML5, as aspas nos valores dos atributos podem ser omitidas (se o valor não contiver caracteres especiais como espaços), mas é altamente recomendável usar sempre aspas duplas. Isso torna o código mais claro e evita erros inesperados.

2. Atributos Globais Comuns

Os atributos globais são atributos que podem ser usados em qualquer tag HTML. Veja os mais utilizados:

(1) id — Identificador Único

O atributo id atribui um identificador único a um elemento. Dentro da mesma página, cada id só pode ser usado uma vez. É comumente utilizado para links de âncora, seletores CSS e operações JavaScript.

▶ Exemplo

HTML 
<h1 id="titulo-pagina">Bem-vindo ao Meu Site</h1>
<!-- #titulo-pagina pode ser usado para saltar para esta posição -->
<a href="#titulo-pagina">Ir para o Título</a>
▶ Experimente

(2) class — Nome de Classe

O atributo class atribui um ou mais nomes de classe a um elemento. Diferente do id, o mesmo nome de classe pode ser reutilizado em múltiplos elementos e é o método principal para estilização CSS e seleção JavaScript.

▶ Exemplo

HTML 
<!-- Múltiplos elementos podem usar a mesma classe -->
<p class="destaque">Este texto será destacado</p>
<p class="destaque">Este texto também será destacado</p>

<!-- Um elemento pode ter múltiplas classes, separadas por espaços -->
<div class="caixa borda arredondada">Esta é uma caixa arredondada com borda</div>
▶ Experimente

(3) style — Estilos Inline

O atributo style permite escrever estilos CSS diretamente dentro de uma tag. Embora não seja recomendado para uso intensivo (é melhor manter os estilos em arquivos CSS separados), é muito conveniente para testes rápidos ou para sobrepor estilos dinamicamente.

▶ Exemplo

HTML 
<p style="color: red; font-size: 18px;">Este é um texto grande e vermelho</p>
<div style="background: #f0f0f0; padding: 10px; border-radius: 5px;">
Esta é uma caixa arredondada com cor de fundo
</div>
▶ Experimente

(4) title — Texto de Dica

O atributo title fornece informações adicionais para um elemento. Quando o usuário passa o mouse sobre o elemento, o navegador exibe uma dica (tooltip).

▶ Exemplo

HTML 
<p title="Este é um texto de dica">Passe o mouse sobre este texto para ver o que acontece</p>
<abbr title="HyperText Markup Language">HTML</abbr>
▶ Experimente

(5) Resumo dos Atributos Globais

Atributo Finalidade Unicidade Frequência de Uso
id Identificador único do elemento, usado para âncoras, CSS, JS Único por página ⭐⭐⭐⭐⭐
class Atribui nome de classe ao elemento, usado para CSS / JS Reutilizável ⭐⭐⭐⭐⭐
style Escreve estilos CSS diretamente na tag — ⭐⭐⭐
title Exibe texto de dica ao passar o mouse — ⭐⭐
lang Declara o idioma do conteúdo do elemento — ⭐⭐
dir Especifica a direção do texto (ltr / rtl) — ⭐

3. Atributos Booleanos

Os atributos booleanos são um tipo especial de atributo — eles não precisam de valor; basta estarem presentes para significar "ativado/verdadeiro". Os atributos booleanos mais comuns incluem disabled, checked, readonly e required.

▶ Exemplo

HTML 
<!-- Campo de entrada desativado -->
<input type="text" disabled>

<!-- Checkbox pré-selecionado -->
<input type="checkbox" checked> Eu concordo com os termos

<!-- Campo de entrada somente leitura -->
<input type="text" value="Conteúdo somente leitura" readonly>

<!-- Campo obrigatório -->
<input type="email" required>
▶ Experimente

Os atributos booleanos também podem ser escritos como nome="nome", por exemplo disabled="disabled". Ambas as formas produzem exatamente o mesmo efeito. A forma concisa (apenas o nome do atributo) é a recomendada.

✅ Boa Prática: Para atributos booleanos, escrever apenas o nome do atributo (sem valor) é recomendado — o código fica mais conciso. Use a forma nome="nome" apenas quando a sintaxe XHTML estritamente exigir.

4. Atributos Personalizados data-*

O HTML5 introduziu um recurso muito flexível: atributos personalizados. Você pode criar seus próprios atributos em qualquer tag HTML, desde que o nome do atributo comece com data-. O objetivo é armazenar dados adicionais dentro das tags HTML para uso do JavaScript e CSS.

Por exemplo, imagine que você tem uma lista de produtos e quer armazenar o preço e a quantidade em estoque de cada produto — esses dados não precisam ser exibidos na página, mas o JavaScript precisa lê-los para a lógica interativa.

▶ Exemplo

HTML 
<ul>
<li data-product-id="101" data-price="29.9" data-stock="50">Camiseta - R$ 29,90</li>
<li data-product-id="102" data-price="99.9" data-stock="20">Mochila - R$ 99,90</li>
<li data-product-id="103" data-price="199" data-stock="0">Fones de Ouvido - R$ 199,00 (Esgotado)</li>
</ul>

<script>
// Acesse data-* via a API dataset
const items = document.querySelectorAll('li');
for (let item of items) {
  console.log(item.dataset.productId);  // "101", "102", "103"
  console.log(item.dataset.price);      // "29.9", "99.9", "199"
}
</script>
▶ Experimente

Neste exemplo, data-product-id, data-price e data-stock são atributos que definimos nós mesmos. Eles não afetam a exibição da página, mas o JavaScript pode lê-los facilmente. Clique em "Experimente" abaixo e abra o console do desenvolvedor (F12) para ver os dados lidos.

Regras de Nomenclatura: No HTML, use data-user-name (separado por hífens). No JavaScript, o acesso correspondente é dataset.userName (camelCase). A primeira letra após cada hífen é automaticamente convertida para maiúscula.

▶ Exemplo

HTML 
<div data-user-name="João Silva" data-user-age="20">Informações do Usuário</div>

<script>
// Ler data-user-name → dataset.userName (camelCase)
const div = document.querySelector('div');
console.log(div.dataset.userName);  // "João Silva"
console.log(div.dataset.userAge);   // "20"
</script>
▶ Experimente
📌 Casos de Uso: Os atributos data-* são muito comuns no desenvolvimento front-end, por exemplo para armazenar IDs de usuário, estados de ordenação, tipos de botão, configurações de gráficos, etc. São mais intuitivos do que manter um objeto de dados separado no JavaScript, pois os dados "vivem junto" com a estrutura HTML correspondente. Você usará bastante esse recurso nos capítulos de JavaScript mais adiante.

⚠️ Atenção: Os atributos data-* devem ser usados apenas para armazenar dados relacionados à exibição da página, não como substituto de bancos de dados ou armazenamento no back-end. Informações sensíveis (como senhas, chaves de API) nunca devem ser colocadas em data-* — pois qualquer pessoa pode visualizá-las ao inspecionar o código-fonte da página.

❓ Perguntas Frequentes

P Os valores dos atributos devem sempre estar entre aspas? Qual é a diferença entre aspas simples e duplas?
R O HTML5 exige que os valores dos atributos estejam entre aspas — aspas duplas ("valor") são o padrão da indústria. Aspas simples ('valor') também são válidas no HTML5, mas aspas duplas são preferidas pela legibilidade e consistência. Use aspas simples apenas quando o valor contiver aspas duplas (como title='Ele disse "Olá"'). Omitir aspas pode funcionar em alguns casos, mas pode causar erros de análise — nunca recomendado.
P Qual é a diferença entre id e class? Quando uso cada um?
R id é como um RG — cada página pode ter apenas um elemento com um determinado id, sendo único. class é como um nome de turma — múltiplos elementos podem compartilhar o mesmo class, sendo reutilizável. Na prática, use class em 90% dos casos porque reutilização de estilo é a norma. id tem maior especificidade CSS, mas não abuse apenas pela prioridade. Lembre-se: id para mirar com JavaScript, class para estilizar com CSS.
P Por que alguns atributos como disabled e checked não precisam de valor?
R Esses são chamados de "atributos booleanos" — sua presença significa "ativado" e sua ausência significa "desativado". Como um interruptor de luz: o interruptor estar lá significa ligado, ausente significa desligado. O HTML5 diz que atributos booleanos não podem ter valor false; para desativar, simplesmente remova o atributo. Exemplo: <input disabled> desabilita a entrada; remova disabled para habilitar. Não escreva disabled="true" (redundante) ou disabled="false" (não vai desabilitar — um erro comum).

📖 Resumo

📝 Exercícios

  1. Prática de Combinação de Atributos: Crie uma página contendo os seguintes elementos:
    • Um parágrafo com os atributos id, class e style;
    • Um link com o atributo title (passe o mouse para ver a dica);
    • Um campo de entrada com o atributo disabled (acinzentado, não clicável).
  2. Prática de data-*: Crie uma lista de cards de produtos onde cada card usa atributos data-* para armazenar o nome do produto, preço e estoque. Depois, use JavaScript para ler esses dados no console do navegador via document.querySelectorAll e dataset.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%