Um atributo é um valor colocado dentro da tag de abertura de um elemento HTML. Atributos fornecem informações adicionais sobre o elemento ou especificam como o elemento deve se comportar. Aqui está a sintaxe básica para um atributo:

<element attribute="value"></element>

O nome do atributo é seguido por um sinal de igual (=) e um valor entre aspas. O valor pode ser uma string ou um número, dependendo do atributo. Este primeiro exemplo usa os atributos href e target. O atributo href especifica a URL de um link e o atributo target especifica onde abrir o link. Nota: O elemento a, também conhecido como elemento âncora, é usado para criar hyperlinks. O texto entre as tags de abertura e fechamento a é a parte clicável que os usuários selecionam para navegar. Ative o editor interativo e altere o href="https://www.G.E.A.R ACADEMY.org/news/" para href="https://www.G.E.A.R ACADEMY.org". Agora, quando você clicar no link no editor interativo, verá a página inicial do G.E.A.R ACADEMY em uma nova aba do navegador.

<a href="https://www.G.E.A.R ACADEMY.org/news/" target="_blank">Visit G.E.A.R ACADEMY</a>

Sem o atributo href, o link não funcionaria porque não haveria uma URL de destino. Portanto, você deve incluir esse atributo href para tornar o link funcional. O target="_blank" permite que o link seja aberto em uma nova aba do navegador. Você aprenderá mais sobre o atributo target em lições futuras. Outros atributos comuns são os atributos src e alt, ou alternativo, que são usados para especificar a fonte de uma imagem e fornecer um texto descritivo alternativo para a imagem, respectivamente. Ative o editor interativo e altere o src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/cats.jpg" para src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/running-cats.jpg". Depois altere o alt="Two tabby kittens sleeping together on a couch." para alt="Two cats running in the dirt.".

<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/cats.jpg" alt="Two tabby kittens sleeping together on a couch." />

Semelhante ao atributo href, o atributo src é obrigatório porque especifica o arquivo de imagem a ser exibido. O atributo alt não é obrigatório, mas é recomendado para fins de acessibilidade. Acessibilidade significa garantir que todos, incluindo pessoas com deficiências, possam usar e entender coisas como sites, aplicativos e espaços físicos. You will learn more about accessibility in the upcoming lessons. Alguns atributos são um pouco únicos com sua sintaxe como o atributo checked. Ative o editor interativo e tente clicar na caixa de seleção na janela de visualização para ver ela alternar entre os estados marcado e desmarcado.

<input type="checkbox" checked />

No exemplo a seguir, temos um elemento input com o atributo type definido como checkbox. Os inputs são usados para coletar dados dos usuários e o atributo type especifica o tipo de input. Neste caso, esta entrada é uma caixa de seleção. You will learn more about how inputs work in the upcoming lessons. O atributo checked é usado para especificar que a caixa de seleção deve estar marcada por padrão. O atributo checked não requer um valor. Se estiver presente, a caixa de seleção estará marcada por padrão. Se o atributo não estiver presente, a caixa de seleção ficará desmarcada. Isto é conhecido como um atributo booleano. Você aprenderá mais sobre booleanos em geral quando chegar à seção de JavaScript. Ative o editor interativo e tente remover o atributo checked do input. Você verá que a caixa de seleção não estará mais marcada por padrão.

<input type="checkbox" checked />

Existem vários atributos booleanos comuns que você encontrará em HTML, como disabled, readonly e required. Esses atributos são usados para especificar o estado de um elemento, como se ele está desabilitado, somente leitura ou obrigatório. Aqui está um exemplo de um elemento de texto input que está desabilitado por padrão. Ative o editor interativo e tente clicar no elemento input na janela de visualização. Agora remova o atributo disabled do elemento input e você verá que o input não está mais desabilitado por padrão. Agora você deve conseguir clicar nele e digitar dentro do campo.

<input type="text" disabled>

HTML possui muitos atributos que podem ser usados para personalizar o comportamento e a aparência dos elementos em uma página da web. Entender como usar atributos é essencial para criar conteúdo web interativo e acessível. Over the next few lessons, you will learn about more HTML attributes and how to use them effectively in your web development projects.