O que é o HTML e suas tags? Parte 5: atributos dos elementos

No artigo anterior, vimos os elementos de um formulário no HTML, o que é tags, etc. Neste artigo, partiremos para o que é atributo dos elementos.

O que são atributos HTML?

Atributos HTML (em inglês html attributes") são palavras especiais usadas dentro da tag de abertura para controlar o comportamento do elemento.

Os atributos HTML são um modificador de um tipo de elemento HTML. Com eles, podemos identificar melhor um elemento, informar qual arquivo aquela tag deve utilizar, indicar o tipo de um campo de texto, etc.

Há dois tipos de atributos no HTML, os globais, aceitos por todas as tags, como, por exemplo: class, id, lang, style e algumas outras que você pode conferir na documentação; e também existem os específicos, que somente algumas tags possuem, como: src, disabled, href, label, etc.

A estrutura de um atributo é:

Onde class é o nome do atributo (como class, src, styled, id) e intro é o valor daquele atributo.

Quais são os principais atributos HTML?

São os principais atributos:

class=”NomeDaClasse”

Classes são como classificações de uma tag/elemento, para estilizar uma tag específica, ou um conjunto de tags no CSS.

Também é possível usar no JavaScript para selecionar uma tag específica. Veja alguns exemplos.

• HTML:

• CSS: neste momento, você não precisa se preocupar tanto com o css. Você pode aprendê-lo no curso HTML5 e CSS3 parte 1: A primeira página da Web.

No código acima, selecionamos o css com o seletor de classes usando ponto antes do nome da classe (.classe), e então aplicamos um tamanho de fonte, cor e cor de fundo.

Veja o resultado.

id=”NomeDoId”

É utilizado para identificar de forma única um elemento naquela página HTML, como o destino de âncoras, labels e outras funcionalidades neste sentido.

src=”Link ou diretório da mídia"

Comumente utilizado para indicar para a tag qual arquivo ou mídia utilizar. Recebe valores como links (https://google.com/minhaimagem.jpeg) ou o nome de um arquivo já presente no projeto (/minhaimagem.jpeg).

Veja o resultado.

alt=”Texto alternativo”

O atributo alt fornece informações alternativas para uma imagem se um usuário ou usuária, por algum motivo, não puder visualizá-la (devido à conexão lenta, um erro no atributo src ou a utilização de um leitor de tela).

Veja o resultado.

Obs: A imagem não foi carregada propositalmente para simular um link errado (como nesse caso) ou uma má conexão onde a imagem não venha a carregar.

href=”Url”

Para a tag , o atributo href especifica a URL da página para a qual o link vai.

Veja o resultado.

Para elementos ´´, o atributo href especifica a localização (URL) do recurso externo (geralmente um arquivo de folha de estilo).

lang=”Linguagem”

O atributo lang especifica o idioma do conteúdo da tag.

Os exemplos comuns são “en” para inglês, “es” para espanhol, “fr” para francês e assim por diante.

target=”blank”

Esse atributo abre o link do documento em uma nova janela ou aba.

Veja o resultado.

Conclusão

Agora é com você!

Encerramos por aqui a nossa série de artigos sobre o que é HTML e suas tags, vimos desde a estrutura básica, o que é elemento, o que são tags e até uma explicação detalhada de cada tipo de tag.

Mas essa troca não acaba aqui. Agora, queremos saber de você!

Qual foi a parte dessa série que foi mais interessante para você? Já conhecia todas as tags que foram mencionadas? Teve alguma dúvida durante a leitura?

Você pode responder aqui nesse tópico do fórum, onde também vai conseguir saber mais sobre a opinião de outras pessoas a respeito do HTML e as suas tags.

Além disso, para se aprofundar ainda mais no assunto, também recomendamos conhecer os cursos da Formação HTML e CSS.

Você também pode utilizar os tutoriais do W3schools para se guiar no aprendizado das tags.

Bons estudos e até o próximo artigo!