Introdução ao HTML

Entendendo Atributos HTML: O Poder por Trás das Tags

Agora que você está confortável com o básico de tags HTML, é hora de entrar no universo dos atributos HTML. Os atributos são como "superpoderes" que você pode dar às suas tags, permitindo que você as customize e as torne interativas. Vamos começar!

Lembre-se de utilizar o CodePen para testar o código que você está aprendendo.

O que São Atributos?

Atributos são informações adicionais que você pode adicionar a uma tag HTML. Eles sempre vêm dentro da tag de abertura e são geralmente compostos por um nome e um valor, separados por um sinal de igual (=).

<nomedatag atributo="valor">Conteúdo</nomedatag>

Por exemplo:

<a href="https://www.google.com">Clique aqui para ir ao Google</a>

Neste caso, href é o atributo, e "https://www.google.com" é o valor do atributo.

Caso queira saber a lista de todos os possiveis atibutos clique aqui, você obviamente não precisa decorar todos os atributos, mas conforme você for usando eles, você os decora e fica mais facil de lembrar e entender pra que cada um serve.

Tipos Comuns de Atributos

Vamos conhecer alguns dos atributos mais utilizados em diferentes tags:

Atributos Globais

Estes são atributos que podem ser usados em qualquer tag HTML:

1. id: Define um identificador único para um elemento.
2. class: Define uma ou várias classes para um elemento.
3. name: Define nome para um elemento.
4. style: Possibilita a adição de estilização para um elemento.

<p id="paragrafo1" class="texto-grande">Este é um parágrafo.</p>

Atributos de Links

1. href: Especifica o URL para onde o link aponta.

<a href="https://www.exemplo.com">Visite nosso site</a>

Atributos de Imagem

1. src: Define a fonte da imagem.
2. alt: Fornece um texto alternativo para a imagem.

<img src="imagem.jpg" alt="Descrição da imagem" />

Atributos de Formulários

1. placeholder: Fornece uma dica para o usuário.
2. required: Torna o campo obrigatório.

<input type="text" placeholder="Digite seu nome" required />

A Importância do alt em Imagens

O atributo alt não é apenas para tornar seu site acessível para pessoas com deficiências visuais. Ele também é útil quando a imagem não pode ser carregada.

<img src="imagem-inexistente.jpg" alt="Imagem não encontrada" />

Exercício Prático

Vamos colocar tudo isso em prática. Crie uma HTML simples que contém:

1. Um cabeçalho h1 com um id.
2. Um link a com um href.
3. Uma imagem img com src e alt.
4. Um formulário form com um campo input com required e um placeholder.

<h1 id="titulo">Aula de Atributos HTML</h1>

<a href="https://www.exemplo.com">Visite nosso site</a>

<img src="imagem.jpg" alt="Uma bela paisagem" />

<form>
  <input type="text" placeholder="Digite seu nome" required />
</form>