O que é o HTML e suas tags? Parte 5: atributos dos elementos
Autores: Beatriz Moura e Mateus Henrique
Esse artigo compõe uma série de cinco artigos sobre o que é HTML e suas tags:
- O que é o HTML e suas tags: estrutura básica
- O que é o HTML e suas tags: elementos inline
- O que é o HTML e suas tags: elementos block-level
- O que é o HTML e suas tags: elementos de um formulário
- O que é o HTML e suas tags: atributos dos elementos
No artigo anterior vimos os elementos de um formulário no HTML, neste artigo partiremos para os atributos dos elementos.
Atributos HTML 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 que são aceitos por todas as tags, como por exemplo: class, id, lang, style e algumas outras que você pode conferir na documentação também existem os específicos que somente algumas tags possuem, como src, disabled, href, label, etc…
A estrutura de um atributo é:
nome=”valor”
Onde class é o nome do atributo (como class, src, styled, id) e intro é o valor daquele atributo.
São os principais atributos:
class=”NomeDaClasse”
Classes são como classificações de uma tag/elemento, para que no CSS estilizar uma tag específica, ou um conjunto de tags. Também é possível usar no JavaScript para selecionar uma tag específica.
HTML:
<h1 class="titulo">Mergulhe em Tecnologia!</p>CSS (Não se preocupe com o css, você pode aprendê-lo no curso HTML5 e CSS3 parte 1: A primeira página da Web):
.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”
Identificar de forma única um elemento naquela página HTML... É utilizado para identificar 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).
<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 por algum motivo não puder visualizá-la (devido à conexão lenta, um erro no atributo src ou se o usuário usar 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 <a>, 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 <link>, 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 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 aprofundar ainda mais, também recomendamos mergulhar os estudos nos cursos da Formação HTML e CSS. Além disso, você pode utilizar os tutoriais do W3schools para se guiar no aprendizado das tags.
Bons estudos e até o próximo artigo! =)