id, class, style e title
Aplicar atributos globais essenciais a qualquer elemento HTML.
id, class, style e title é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Atributos globais
Atributos globais podem ser aplicados a qualquer elemento HTML:
id— identificador exclusivoclass— uma ou mais classes CSSstyle— CSS incorporadotitle— texto da dica de ferramenta- E muitos outros: lang, hidden, tabindex, data-*...
O atributo id
O atributo id atribui um identificador exclusivo a um elemento:
<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>
<!-- Rules:
- Must be unique per page
- No spaces
- Use hyphens: user-profile
- Case-sensitive: #hero ≠ #Hero
-->Usos de id
O atributo id serve para várias finalidades:
- Seleção com CSS:
#hero-banner { ... } - Seleção com JavaScript:
document.getElementById('signup-form') - Navegação por fragmentos:
<a href="#installation"> - Rotulagem com ARIA:
aria-labelledby="modal-title"
O atributo class
O atributo class atribui uma ou mais classes CSS:
<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>
<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->id versus class
Quando usar cada um:
id— um elemento específico na páginaclass— um padrão de estilo aplicado a vários elementos
<!-- id: unique element -->
<main id="main-content">...</main>
<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>O atributo style
O atributo style adiciona CSS incorporado:
<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
Info box
</div>
<!-- Inline styles have the highest specificity
They are hard to override and hard to maintain
Prefer external CSS classes whenever possible -->Quando usar style incorporado
O style incorporado é aceitável nestes casos:
- Valores dinâmicos definidos por JavaScript
- Valores que não podem ser conhecidos no momento de escrever o CSS (cores e larguras definidas pelo usuário)
- HTML de e-mail (os clientes de e-mail removem o CSS externo)
Não use style para escolhas estáticas de apresentação — isso pertence ao CSS.
O atributo title
O atributo title fornece o texto de uma dica de ferramenta ao passar o cursor:
<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>Limitações de acessibilidade de title
O atributo title apresenta problemas importantes de acessibilidade:
- Não é acessível pela navegação com teclado
- Não é exibido em telas sensíveis ao toque
- O comportamento dos leitores de tela é inconsistente
- Nunca coloque informações essenciais apenas em
title
Use aria-label ou texto visível para informações importantes.
Especificidade: id versus class versus incorporado
Especificidade do CSS, da menor para a maior:
/* Element selector: 0-0-1 */
p { color: gray; }
/* Class selector: 0-1-0 */
.text { color: blue; }
/* ID selector: 1-0-0 */
#unique { color: green; }
/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>Convenções de nomenclatura de class
Convenções populares de nomenclatura de class:
<!-- BEM (Block Element Modifier) -->
<div class="card">
<div class="card__header">
<h2 class="card__title card__title--featured">Title</h2>
</div>
</div>
<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">Verificação rápida
Qual é a regra principal sobre o atributo id?
Resumo: id, class, style e title
Atributos globais essenciais:
id— exclusivo por página; usado para CSS, JavaScript, fragmentos e ARIAclass— reutilizável; várias classes separadas por espaçosstyle— CSS incorporado (use com moderação; prefira CSS externo)title— dica de ferramenta; não é acessível para usuários de teclado ou de telas sensíveis ao toque- A especificidade de id é maior que a especificidade de class no CSS
Perguntas Frequentes
A aula “id, class, style e title” é grátis?
Sim — o texto completo de “id, class, style e title” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “id, class, style e title”?
Aplicar atributos globais essenciais a qualquer elemento HTML. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “id, class, style e title”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- id, class, style e title
- O atributo hidden
- tabindex e accesskey
- Atributos de dados personalizados data-*