O que é o HTML e suas tags? Parte 5: atributos dos elementos
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, 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”
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:
<h1 class="titulo">Mergulhe em Tecnologia!</p>
- 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.
.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.
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 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!
