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

O que é o HTML e suas tags? Parte 5: atributos dos elementos
Mateus Henrique, Beatriz Moura
Mateus Henrique, Beatriz Moura

Compartilhe

Esse artigo compõe uma série de cinco artigos sobre o que é HTML e suas tags:

  1. O que é o HTML e suas tags: estrutura básica
  2. O que é o HTML e suas tags: elementos inline
  3. O que é o HTML e suas tags: elementos block-level
  4. O que é o HTML e suas tags: elementos de um formulário
  5. O que é o HTML e suas tags: 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 é:

nome=”valor”
Linha de código html <p class=”intro”>Esse é um parágrafo com atributo</p>.

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

Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto

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:
<h1 class="titulo">Mergulhe em Tecnologia!</p>
.titulo {
  font-size: 21px;
  color: #fff;
  background: blue;
}

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.

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).

<img loading="lazy" src="https://www.alura.com.br/assets/img/alura-share.1636535197.png" >

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).

<img loading="lazy" src="https://www.alura.com.br/assets/img/alura-share.163653197.png"  alt=”Logo da alura”>

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.

<p>Clique <a href="https://www.alura.com.br/">aqui</a> para ir para o site da alura</p>

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.

<p>Clique <a href="https://www.alura.com.br/" target="blank">aqui</a> para ir para o site da alura</p>

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!

Mateus Henrique
Mateus Henrique

Desenvolvedor Front End na Alura

Beatriz Moura
Beatriz Moura

Estudante de Analise e Desenvolvimento de Sistemas, troquei a área da saúde e mergulhei em programação!Apaixonada por desenvolvimento Front-end e entusiasta de UX/UI Design.Descobri a paixão por ensinar sendo monitora durante uma outra graduação de ensino, onde também era presidente de Liga Acadêmica e Diretora de Mídia no Diretório Acadêmico.Atualmente sou Instrutora e Desenvolvedora de Software na Alura e já fiz parte do Scuba Team de Front-end.

Veja outros artigos sobre Front-end