HTML
Agora que já entendemos os elementos e sintaxe HTML, chegou a hora de explorar os atributos, que são fundamentais para definir propriedades e comportamentos nos elementos de uma página.
O que são Atributos HTML?
Os atributos HTML servem para modificar o comportamento de um elemento.
Eles fornecem informações adicionais, como largura, altura, identificadores, links e estilos.
Regras básicas sobre atributos:
- Sempre são adicionados dentro da tag de abertura.
- Possuem um nome e um valor, escritos assim:
nome="valor". - Alguns atributos são obrigatórios para determinados elementos.
Por exemplo, a tag <img> precisa dos atributos src (origem da imagem) e alt (texto alternativo).
Exemplo de Atributos em Uso
<img src="imagens/foto.jpg" width="300" height="200" alt="Foto de exemplo">
<a href="https://www.google.com" title="Ir para o Google">Google</a>
<input type="text" name="usuario" value="Seu Nome">
Como visto acima, atributos como href, title, type e name personalizam o comportamento dos elementos.
Tipos de Atributos HTML
1. Atributos Obrigatórios
Algumas tags exigem atributos específicos. Por exemplo, a tag <img> precisa de src e alt, enquanto <a> precisa de href.
✅ Exemplo com <img>
<img src="foto.jpg" alt="Imagem de exemplo">
✅ Exemplo com <a>
<a href="https://exemplo.com">Acesse aqui</a>
2. Atributos Booleanos
Atributos booleanos são aqueles que não precisam de valores. Apenas sua presença já define o comportamento do elemento.
✅ Exemplos
<input type="checkbox" checked>
<input type="text" readonly>
<input type="submit" disabled>
Se um atributo booleano estiver presente, ele será considerado verdadeiro. Se estiver ausente, será falso.
Atributos de Uso Geral
Existem alguns atributos que podem ser usados em qualquer elemento HTML, pois são considerados globais.
1. O atributo id
O id é um identificador único para um elemento HTML. Ele é muito usado em CSS e JavaScript para personalizar estilos ou interações.
✅ Exemplo
<p id="destaque">Este parágrafo tem um ID único.</p>
Dica: Nunca repita o mesmo
idem elementos diferentes no mesmo documento.
2. O atributo class
O class é usado para agrupar elementos com um mesmo estilo ou comportamento.
✅ Exemplo
<p class="texto-grande">Parágrafo com uma classe.</p>
<p class="texto-grande">Outro parágrafo com a mesma classe.</p>
Dica: Diferente do
id, vários elementos podem ter a mesma classe.
3. O atributo title
O title exibe um texto informativo quando o usuário passa o mouse sobre um elemento.
✅ Exemplo
<a href="https://site.com" title="Visite nosso site">Clique aqui</a>
4. O atributo style
O style permite aplicar estilos CSS diretamente no elemento HTML.
✅ Exemplo
<p style="color: red;">Texto vermelho</p>
Dica: Embora funcione, é recomendável usar arquivos CSS em vez do atributo
style.
Elementos HTML Vazios e Seus Atributos
Alguns elementos HTML não possuem conteúdo interno e, por isso, não precisam de tag de fechamento.
✅ Exemplos
<br> <!-- Quebra de linha -->
<img src="foto.jpg" alt="Imagem"> <!-- Imagem -->
<hr> <!-- Linha horizontal -->
Esses elementos podem receber atributos normalmente. Por exemplo:
<img src="logo.png" alt="Logotipo" width="200">
Conclusão
Os atributos são essenciais para personalizar o comportamento e a aparência dos elementos HTML.
📌 Principais aprendizados:
✅ Atributos sempre são usados na tag de abertura.
✅ Alguns elementos precisam de atributos obrigatórios.
✅ Existem atributos booleanos que funcionam sem valor.
✅ Atributos como id, class, title e style são de uso geral.
💬 Tem dúvidas? Comente abaixo! 🚀
