Aprenda tudo sobre tags HTML e atributos. Descubra como usar corretamente os elementos HTML, seus atributos e as melhores práticas para desenvolvimento web.
Os atributos HTML fornecem informações adicionais sobre as tags e modificam seu comportamento ou aparência. Eles são sempre especificados na tag de abertura e seguem o formato nome="valor".
<tag atributo1="valor1" atributo2="valor2">conteúdo</tag>
Esses atributos podem ser usados com qualquer tag HTML:
Fornece um identificador único para o elemento:
<div id="cabecalho-principal">Conteúdo único</div>
<p id="paragrafo-importante">Texto importante</p>
Características do atributo id:
Atribui uma ou mais classes CSS ao elemento:
<p class="texto-vermelho">Texto com classe única</p>
<div class="container grande centralizado">Elemento com múltiplas classes</div>
Características do atributo class:
Aplica estilos CSS inline ao elemento:
<p style="color: blue; font-size: 18px;">Texto estilizado</p>
<div style="background-color: yellow; padding: 10px;">Container colorido</div>
Nota: É preferível usar CSS externos em vez de estilos inline.
Fornece informações adicionais mostradas ao passar o mouse:
<p title="Esta é uma dica">Passe o mouse aqui</p>
<img src="foto.jpg" alt="Foto" title="Foto tirada em 2025">
Especifica o idioma do conteúdo do elemento:
<html lang="pt-BR">
<p lang="en">This paragraph is in English</p>
<span lang="fr">Ce texte est en français</span>
Atributos personalizados para armazenar dados:
<div data-user-id="123" data-role="admin">Usuário</div>
<button data-action="delete" data-confirm="true">Excluir</button>
Alguns atributos são booleanos, ou seja, sua presença indica "verdadeiro" e sua ausência indica "falso":
<input type="checkbox" checked>
<input type="text" required disabled>
<video controls autoplay muted>
<option selected>Opção selecionada</option>
Atributos booleanos comuns:
<!-- Incorreto -->
<img src=foto.jpg alt=Minha foto>
<!-- Correto -->
<img src="foto.jpg" alt="Minha foto">
<!-- Incorreto -->
<div id="conteudo">Primeira div</div>
<div id="conteudo">Segunda div</div>
<!-- Correto -->
<div id="conteudo-1">Primeira div</div>
<div id="conteudo-2">Segunda div</div>
<!-- Incorreto -->
<p class="importante">Texto</p class="importante">
<!-- Correto -->
<p class="importante">Texto</p>
<!-- Incorreto -->
<input type="checkbox" checked="false">
<!-- Correto -->
<input type="checkbox">
<input type="checkbox" checked>
Para melhorar a acessibilidade, use atributos ARIA:
<button aria-label="Fechar janela de diálogo" aria-expanded="false">
<span aria-hidden="true">×</span>
</button>
<nav aria-label="Menu principal">
<ul role="menubar">
<li role="menuitem"><a href="/">Início</a></li>
<li role="menuitem"><a href="/sobre">Sobre</a></li>
</ul>
</nav>
<div role="alert" aria-live="polite">
Mensagem de status importante
</div>
Use microdata para fornecer informações estruturadas:
<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">Título do Artigo</h1>
<p>Escrito por <span itemprop="author">João Silva</span></p>
<time itemprop="datePublished" datetime="2025-09-03">3 de Setembro de 2025</time>
<div itemprop="articleBody">
<p>Conteúdo do artigo...</p>
</div>
</article>
<article class="product-card" itemscope itemtype="http://schema.org/Product">
<header>
<h2 itemprop="name">Smartphone ABC</h2>
<img src="smartphone.jpg"
alt="Smartphone ABC cor preta"
itemprop="image"
loading="lazy">
</header>
<div class="product-info">
<p itemprop="description">
Smartphone de última geração com câmera avançada.
</p>
<div class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" content="599">R$599</span>
<meta itemprop="priceCurrency" content="BRL">
<meta itemprop="availability" content="http://schema.org/InStock">
</div>
<button type="button"
class="btn-primary"
data-product-id="123"
aria-label="Adicionar Smartphone ABC ao carrinho">
Adicionar ao Carrinho
</button>
</div>
</article>
<form class="contact-form"
action="/contato"
method="post"
novalidate
aria-labelledby="contact-title">
<h2 id="contact-title">Entre em Contato</h2>
<fieldset>
<legend>Informações Pessoais</legend>
<div class="form-group">
<label for="first-name">Nome *</label>
<input type="text"
id="first-name"
name="firstName"
required
aria-describedby="first-name-error"
autocomplete="given-name">
<div id="first-name-error" class="error-message" aria-live="polite"></div>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email"
id="email"
name="email"
required
aria-describedby="email-error email-help"
autocomplete="email">
<div id="email-help" class="help-text">
Usaremos seu email apenas para responder sua mensagem.
</div>
<div id="email-error" class="error-message" aria-live="polite"></div>
</div>
</fieldset>
<fieldset>
<legend>Mensagem</legend>
<div class="form-group">
<label for="subject">Assunto</label>
<select id="subject" name="subject" aria-describedby="subject-help">
<option value="">Selecione um assunto</option>
<option value="info">Solicitação de informações</option>
<option value="support">Suporte técnico</option>
<option value="feedback">Feedback</option>
</select>
<div id="subject-help" class="help-text">
Selecione o assunto mais apropriado para sua solicitação.
</div>
</div>
<div class="form-group">
<label for="message">Mensagem *</label>
<textarea id="message"
name="message"
rows="5"
required
aria-describedby="message-counter"
maxlength="500"></textarea>
<div id="message-counter" class="character-counter">0/500 caracteres</div>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" class="btn-primary">
Enviar Mensagem
</button>
<button type="reset" class="btn-secondary">
Limpar
</button>
</div>
</form>
O domínio das tags HTML e atributos é fundamental para criar páginas web bem estruturadas, acessíveis e semanticamente corretas. Compreender não apenas como usar esses elementos, mas também quando e por que usá-los, permitirá que você desenvolva sites de qualidade profissional.
Lembre-se de que o HTML está em constante evolução. Novas tags e atributos são adicionados regularmente, então é importante manter-se atualizado com as últimas especificações e melhores práticas. Pratique regularmente, experimente com diferentes tags e atributos, e não hesite em consultar a documentação oficial quando tiver dúvidas.
O objetivo final é criar código HTML que seja não apenas funcional, mas também semântico, acessível e manutenível. Com uma sólida compreensão das tags e atributos HTML, você terá as bases necessárias para construir experiências web excepcionais para todos os usuários.
Continue praticando, experimente com projetos reais e lembre-se de que todo especialista já foi um iniciante. Sua jornada no HTML está apenas começando, e as possibilidades são infinitas!