HTML5 Mestre dos Mestres • Aula Suprema 13

Atributos HTML

Atributos são as configurações que dão identidade, destino, comportamento, acessibilidade e poder real às tags HTML.

Ir para o Desafio Mestre Aula 12 Voltar ao Módulo
NARRAÇÃO MESTRE

Narrador Mestre

Ouça a aula, revise blocos e estude com foco.

Pronto para narrar. As vozes disponíveis dependem do navegador e do sistema.

ididentidade única
classgrupo reutilizável
altacessibilidade visual
10/10nível supremo
Abertura de impacto

Atributos são o DNA configurável das tags

Uma tag sem atributos pode existir, mas muitas vezes não sabe para onde ir, como se identificar, o que carregar ou como ser compreendida por tecnologias assistivas.

Promessa da aula:

Você vai dominar atributos como configurações técnicas: identidade, grupo, destino, origem, idioma, acessibilidade, dados personalizados e manipulação futura.

Base técnica

Tag, elemento, atributo e valor

Termo Significado
Tag O rótulo bruto, como <a> ou <div>.
Atributo Configuração dentro da tag de abertura, como href, class ou id.
Valor A informação atribuída ao atributo, como "contato.html".
Elemento Tag de abertura + atributos + conteúdo + tag de fechamento.

Atributo com nome e valor

<a href="https://google.com">Ir para o Google</a>

Atributo booleano

<video src="aula.mp4" controls></video>
“Use sempre aspas duplas nos valores. Código limpo também é disciplina visual.”
Identidade

id e class

O id é único. Ele funciona como o CPF do elemento. A class é reutilizável. Ela funciona como uma categoria compartilhada por vários elementos.

Uso correto

<h2 id="sessao-estudos">Módulo 1</h2>

<p class="alerta">Estude este conteúdo.</p>
<p class="alerta">Este conteúdo cai na prova.</p>

Erro: repetir id

<section id="contato">...</section>
<footer id="contato">...</footer> <!-- ERRO: id duplicado -->
  • Use id para âncoras e alvos únicos de JavaScript.
  • Use class para estilos repetidos e grupos de elementos.
  • Não trate class como se fosse identidade única.
  • Não repita id na mesma página.
Atributos globais

Atributos que podem aparecer em muitos elementos

title

Informação suplementar, mas nunca substitui texto visível ou acessível.

<abbr title="HyperText Markup Language">HTML</abbr>

lang

Define idioma da página ou de um trecho específico.

<span lang="en">Markup Language</span>

data-*

Armazena metadados personalizados para JavaScript.

<div data-aluno-id="99" data-status="ativo">Perfil</div>

hidden

Oculta conteúdo que não é relevante no momento.

<p id="msg-erro" hidden>O e-mail é obrigatório.</p>

tabindex e contenteditable

<button tabindex="0">Botão acessível na ordem natural</button>

<section contenteditable="true">Rascunho editável com cuidado.</section>
Atributos específicos

Atributos que dão função real às tags

href em links

<a href="https://refatorando.com.br" target="_blank">Acesse o portal</a>

src e alt em imagens

<img src="imagens/diploma.jpg" alt="Certificado oficial de Mestre em HTML5">
Regra Mestre:

Sem href, o link não aponta para lugar nenhum. Sem src, a imagem não carrega. Sem alt, a imagem informativa fica muda para leitores de tela.

Boas práticas

Como escrever atributos limpos

  • Use atributos em letras minúsculas.
  • Use aspas duplas em todos os valores.
  • Use nomes descritivos em ids e classes.
  • Evite style inline como padrão.
  • Não crie id sem necessidade real.
  • Não use title como substituto de texto visível.
  • Não use data-* para substituir atributos nativos.
  • Use alt descritivo em imagens informativas.
  • Use lang quando houver trecho em outro idioma.

Conexão com CSS e JavaScript

O CSS usa class e id como seletores. O JavaScript usa atributos como pontos de localização e manipulação no DOM.

Mini laboratório guiado

Identidade e conexão no navegador

  1. Crie três parágrafos com a mesma class="texto-padrao".
  2. Dê um id único apenas ao segundo parágrafo.
  3. Abra o navegador e use Inspecionar.
  4. Veja que class agrupa e id identifica um alvo específico.
  5. Crie uma nav com href apontando para ids únicos.
  6. Teste se as âncoras funcionam corretamente.

Exercício guiado

Crie um card com id="destaque-principal", uma lista com itens usando class="item-lista" e um title justificado em uma sigla.

Desafio Mestre

Página com Atributos Profissionais

Missão: criar o arquivo atributos-profissionais.html demonstrando domínio de identidade, configuração, acessibilidade e organização.

Requisitos obrigatórios

  • Doctype HTML5.
  • html lang="pt-BR".
  • Head completo com charset, viewport, title e meta description.
  • Body com header, main e footer.
  • H1 com “Atributos HTML Profissionais”.
  • Nav com links internos usando href e ids únicos.
  • Pelo menos 3 sections com h2 e ids únicos.
  • Uso de class para preparar estilos futuros.
  • Uso de title em apenas um caso justificado.
  • Uso de lang em trecho curto de idioma estrangeiro.
  • Uso de data-* em um card ou item.
  • Uso de hidden em conteúdo auxiliar.
  • Explicação clara da diferença entre id e class.
  • Lista com pelo menos 5 boas práticas de atributos.
  • Footer com nome do aluno, ano e link para voltar ao topo.

Erros eliminatórios

  • Repetir ids.
  • Âncoras apontando para ids inexistentes.
  • Valores de atributos sem aspas.
  • Usar style inline de forma exagerada.
  • Usar nomes genéricos como div1 ou texto2.
  • Ignorar alt em imagens informativas, se houver.
Banco de erros

Erros comuns e correções

Erros comuns

  • Esquecer aspas.
  • Repetir id.
  • Usar alt vazio sem motivo.
  • Usar title como substituto de texto visível.
  • Colocar atributo que não pertence à tag.
  • Usar class sem padrão.
  • Usar data-* para tudo.

Correções

  • Use nome="valor".
  • Use id apenas uma vez por página.
  • Use class para padrões repetidos.
  • Use alt descritivo em imagem informativa.
  • Use atributos nativos antes de data-*.
  • Use nomes claros e consistentes.
Diagnóstico de domínio

Você domina atributos HTML?

  • Consigo explicar nome, valor, atributo, tag e elemento.
  • Sei usar id como identidade única.
  • Sei usar class como agrupamento reutilizável.
  • Entendo atributos globais e específicos.
  • Sei usar href, src e alt corretamente.
  • Entendo que alt e lang são requisitos de acessibilidade.
  • Preparo o HTML para CSS e JavaScript com classes e ids limpos.
Quiz com gabarito

15 perguntas para provar domínio

  1. Onde atributos devem ser escritos? Na tag de abertura.
  2. Estrutura básica de atributo? Nome e valor.
  3. Para que serve class? Agrupar elementos para estilo/comportamento.
  4. Regra do id? Deve ser único no documento.
  5. Atributo usado pelo JavaScript para alvo único? id.
  6. Por que evitar style inline? Dificulta manutenção e reaproveitamento.
  7. O que significa src? Origem do arquivo.
  8. Diferença entre caminho absoluto e relativo? Absoluto é URL completa; relativo depende do arquivo atual.
  9. Por que alt é vital? Descreve imagens para leitores de tela.
  10. Se imagem falhar, o que aparece? O texto alternativo.
  11. Atributo de destino do link? href.
  12. Como abrir link em nova aba? target="_blank".
  13. O que são booleanos? Atributos ativados pela presença.
  14. Atributo de idioma? lang.
  15. Recomendação sobre aspas? Usar sempre aspas duplas.
Projeto real

Acessibilidade, SEO, mercado e manutenção

Acessibilidade

Atributos como alt e lang tornam o conteúdo compreensível para tecnologias assistivas e usuários que dependem delas.

SEO

O Google usa atributos como alt, href e metadados do head para entender imagens, links e contexto da página.

Mercado

Empresas exigem padrões: atributos em minúsculas, aspas duplas, ids únicos, classes legíveis e separação entre estrutura e estilo.

GitHub e portfólio

Registre sua página com atributos profissionais

git status
git add .
git commit -m "aula-13: cria pagina com atributos profissionais"
git push
  • git status: lista arquivos modificados.
  • git add .: prepara as alterações.
  • git commit: registra o domínio de atributos.
  • git push: envia para GitHub e portfólio.

Evidência para portfólio

  • Arquivo atributos-profissionais.html.
  • Print do código com id, class, href, lang, data-* e hidden.
  • Print da navegação interna funcionando.
  • Commit no GitHub.
  • Explicação curta sobre id vs class.
Resumo Mestre

Atributos são engrenagens de configuração

Eles definem destinos, fontes, descrições, identidades, grupos, idiomas, dados personalizados e estados. Uma tag sem atributos pode ser simples; uma tag com atributos mal configurados é um risco técnico.

Critério para avançar

  • Consigo explicar por que alt é obrigatório em imagem informativa.
  • Sei quando usar id e quando usar class.
  • Sei criar links internos com href e ids únicos.
  • Sei usar atributos globais com critério.
  • Consigo criar o desafio Atributos HTML Profissionais.
Nota final: 10/10 Supremo.

Esta aula transforma atributos em arquitetura de identidade digital, conectando HTML com CSS, JavaScript, acessibilidade, SEO, GitHub e mercado.

Voltar ao Módulo HTML5 Voltar ao Topo