Docs executáveis de HTML: Atributos HTML

Q: Qual a diferença entre class e id no HTML?

Um id precisa ser único na página e identifica um único elemento, para links com #fragment, e getElementById. Uma class pode ser compartilhada por vários elementos, e um elemento pode ter várias classes separadas por espaços. Use classes para estilizar.

Q: Como coloco várias classes num elemento HTML?

Coloque todas num único atributo class, separadas por espaços: . Escrever class duas vezes não funciona: o navegador fica só com o primeiro.

Q: Por que meu botão continua desativado com disabled="false"?

disabled é um atributo booleano: a presença dele significa verdadeiro, seja qual for o valor. Para ativar o elemento, remova o atributo, ou defina button.disabled = false no JavaScript, o que o remove.

Q: Posso inventar meus próprios atributos HTML?

Use o prefixo data-: data-price="12" ou data-user-id="7" são válidos em qualquer elemento e podem ser lidos no JavaScript por element.dataset. Nomes inventados sem o prefixo são HTML inválido.

O que são atributos HTML

Um atributo acrescenta informação a um elemento. Ele vai dentro da tag de abertura, escrito como um nome, um sinal de igual e um valor entre aspas: name="value". Um elemento pode ter quantos atributos quiser, separados por espaços.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href diz ao link para onde ir, src e alt descrevem a imagem, type, placeholder e required configuram o input. Cada elemento tem seu próprio conjunto de atributos, e alguns (os atributos globais abaixo) funcionam em qualquer elemento.

Regras de sintaxe

<input type="text" name="city" value="Paris" disabled>

Nome, sinal de igual, valor entre aspas. Aspas duplas são a convenção; aspas simples também funcionam (title='Say "hi"' é o jeito de colocar aspas duplas dentro de um valor).
Os nomes não diferenciam maiúsculas de minúsculas. CLASS e class são o mesmo atributo. Os valores diferenciam: class="Box" e class="box" são classes diferentes.
Aspas são opcionais sem espaços, mas use aspas mesmo assim. class=big box dá ao elemento a classe big e um segundo atributo, sem sentido, chamado box.
A ordem não importa. <img alt="" src="a.png"> é o mesmo que <img src="a.png" alt="">.
Cada nome uma vez por elemento. Se um atributo aparece duas vezes, o navegador fica com o primeiro e descarta o segundo sem avisar.

Atributos booleanos

Alguns atributos são ligado ou desligado. Neles, a presença significa verdadeiro, e o valor é ignorado. disabled, checked, required, readonly, hidden, multiple, autofocus e open funcionam todos assim.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

O terceiro botão fica desativado mesmo com o valor false, porque o navegador só verifica se o atributo está lá. Para desligar um atributo booleano, remova-o. No JavaScript, button.disabled = false faz exatamente isso.

O atributo class

class dá a um elemento um ou mais nomes que CSS e JavaScript usam para encontrá-lo. Vários elementos podem compartilhar uma classe, e um elemento pode ter várias classes, separadas por espaços:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Cada classe extra soma suas regras por cima. No CSS uma classe é selecionada com um ponto (.card); no JavaScript, element.classList.add('featured') e classList.remove as alteram. Classes são o jeito normal de estilizar: a maior parte do seu CSS vai mirar em classes.

O atributo id

id dá a um elemento um nome que precisa ser único na página. Use quando você precisa de exatamente um elemento: o destino de um link, um <label for> ou document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Clicar no label coloca o foco no input, porque for="email" aponta para id="email". O link rola até #pricing porque o fragmento no href corresponde ao id.

	`class`	`id`
Quantos elementos podem compartilhar	Quantos quiser	Um (único)
Valores por elemento	Vários, separados por espaço	Um
Seletor CSS	`.name`	`#name`
Uso típico	Estilizar grupos de elementos	Destinos de link, labels, um elemento específico no JavaScript

Um id não pode ter espaços. Comece com uma letra para facilitar o uso no CSS: #2col não é um seletor CSS válido sem escape.

Atributos globais

Estes atributos funcionam em qualquer elemento:

Atributo	O que faz
`id`	Nome único do elemento
`class`	Lista de nomes de classe separados por espaço
`style`	CSS inline, como `style="color: red"`
`title`	Texto de dica mostrado ao passar o mouse
`lang`	Idioma do conteúdo, como `lang="fr"`
`dir`	Direção do texto: `ltr`, `rtl` ou `auto`
`hidden`	Esconde o elemento (booleano)
`tabindex`	Torna um elemento focável com Tab, ou define a ordem
`contenteditable`	Permite que o usuário edite o texto do elemento
`data-*`	Seus próprios dados, lidos com JavaScript

O atributo lang tem uma página própria porque afeta leitores de tela, tradução e busca.

Atributos data-*

Quando você precisa guardar um valor seu num elemento, comece o nome com data-. Qualquer nome funciona depois do prefixo, e o JavaScript lê os valores por element.dataset, com os hífens convertidos em camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id vira dataset.productId. Os valores sempre voltam como strings, então converta com Number() antes de fazer contas. O CSS também consegue selecioná-los: [data-price="4.50"].

Erros comuns

Escrever class duas vezes. <div class="a" class="b"> fica só com a. Coloque as duas num único atributo: class="a b".
Repetir um id. Dois elementos com o mesmo id quebram links com #, labels e getElementById, que retorna só o primeiro. Use uma classe para qualquer coisa repetida.
disabled="false" ou checked="false". O atributo continua presente, então continua ligado. Remova-o.
Valores sem aspas com espaços. alt=My photo define alt como My. Coloque aspas em todo valor.
Inventar atributos sem data-. <div price="4"> é HTML inválido e pode colidir com um futuro atributo padrão. Use data-price.

Perguntas frequentes

O que é um atributo HTML?

Um atributo é uma informação extra escrita dentro da tag de abertura como name="value". Ele configura o elemento: href define para onde um link leva, src e alt descrevem uma imagem, class e id permitem que CSS e JavaScript encontrem o elemento.

Qual a diferença entre class e id no HTML?

Um id precisa ser único na página e identifica um único elemento, para links com #fragment, <label for> e getElementById. Uma class pode ser compartilhada por vários elementos, e um elemento pode ter várias classes separadas por espaços. Use classes para estilizar.

Como coloco várias classes num elemento HTML?

Coloque todas num único atributo class, separadas por espaços: <div class="card featured dark">. Escrever class duas vezes não funciona: o navegador fica só com o primeiro.

Os atributos HTML precisam de aspas?

As aspas são opcionais quando o valor não tem espaços nem caracteres especiais, mas colocar aspas sempre é o hábito seguro. class=big box dá ao elemento a classe big mais um atributo separado chamado box.

Por que meu botão continua desativado com disabled="false"?

disabled é um atributo booleano: a presença dele significa verdadeiro, seja qual for o valor. Para ativar o elemento, remova o atributo, ou defina button.disabled = false no JavaScript, o que o remove.

Posso inventar meus próprios atributos HTML?

Use o prefixo data-: data-price="12" ou data-user-id="7" são válidos em qualquer elemento e podem ser lidos no JavaScript por element.dataset. Nomes inventados sem o prefixo são HTML inválido.

Conceitos relacionados