Quando falamos de html, é bom estarmos cientes que é algo onde envolvem inúmeras coisas, e uma das, são os atributos. Os atributos são praticamente indispensáveis quando estamos desenvolvendo um documento html, mas, o que seriam esses atributos de fato?
Vamos acompanhar a seguir este artigo onde irá explicar o que são os atributos, para que servem e como utilizá-los.
O que é?
Atributos são palavras específicas que têm a finalidade de alterar o comportamento de uma tag, e ele é inserido dentro da abertura da tag. Em breve veremos diversos exemplos.
Curso HTML5 + CSS3 - Propriedades e seletores avançados
Conhecer o cursoAlém disso, existem os atributos globais, que são aqueles que irão servir para todos os tipos de tags, e, os específicos, que serão direcionados apenas para algumas tags, cada um possui seu nome e seu valor. Veremos aqui os mais utilizados.
Atributos Globais
- class
- id
- hidden
Class
Primeiramente, veremos sobre o atributo class, sua função é determinar uma ou mais classes de atalho para uma tag, para que assim, seja possível mudar o comportamento dessa tag e estilizá-la através da linguagem CSS. Essa determinação de class é feita através de um nome que iremos escolher e que faça sentido.
Mas, existem alguns critérios para utilizarmos esse atributo corretamente, começando pelo nome que iremos escolher. A separação desse nome é feita através de hífen - ou underscore _, e, não se pode utilizar caracteres especiais, além de hífen e underscore. Para que seja possível declararmos mais de uma class para o mesmo atributo, devemos acrescentar um espaço entre um nome e outro.
Só para exemplificar, no Visual Studio Code, vamos abrir um documento html com o seguinte nome, index.html. Nele, iremos declarar uma tag de título h1, e na tag de abertura, vamos colocar uma class com o nome “titulo-principal”. Feito isso, vamos declarar uma tag de título h2 e na tag de abertura, vamos colocar uma class com o nome “subtitulo_da_pagina”, dessa forma:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<h1 class="titulo-principal">Título Principal</h1>
<h2 class="subtitulo_da_pagina">Subtítulo da Página</h2>
</body>
</html>
Quando abrirmos este documento no navegador, veremos que não irá alterar nada, pois como foi dito antes, só é possível realizar alterações apenas com a linguagem CSS.
Estilização utilizando atributo class
Mas, para termos uma ideia da importância desse atributo e como utilizá-lo, vamos fazer uma estilização simples. Para isso, dentro de body, vamos declarar style, que será nossa linguagem CSS.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<style>
</style>
<h1 class="titulo-principal">Título Principal</h1>
<h2 class="subtitulo_da_pagina">Subtítulo da Página</h2>
</body>
</html>
Feito isso, vamos “chamar” a nossa class utilizando um . (ponto final) e escrevendo o nome dela, em seguida, basta inserirmos chave de abertura e fechamento { }.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<style>
.titulo-principal {
}
</style>
<h1 class="titulo-principal">Título Principal</h1>
<h2 class="subtitulo_da_pagina">Subtítulo da Página</h2>
</body>
</html>
Agora, dentro das chaves, iremos alterar a cor do nosso h1 para azul, mas, a linguagem CSS tem uma característica, só é possível declarar algo em inglês. Tendo isso em vista, vamos digitar color: blue;, assim, vamos obter a cor azul.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<style>
.titulo-principal {
color: blue;
}
</style>
<h1 class="titulo-principal">Título Principal</h1>
<h2 class="subtitulo_da_pagina">Subtítulo da Página</h2>
</body>
</html>
Após isso, para alterarmos a cor do nosso h2, basta seguirmos os mesmos passo a passo que foi dado anteriormente.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<style>
.titulo-principal {
color: blue;
}
.subtitulo_da_pagina {
color: red;
}
</style>
<h1 class="titulo-principal">Título Principal</h1>
<h2 class="subtitulo_da_pagina">Subtítulo da Página</h2>
</body>
</html>
No navegador, ficará dessa forma:
ID
Diferente do atributo class, que permite declararmos diversas classes na mesma tag, podemos também reutilizar a mesma class que foi declarada em uma tag diferente, o id é um identificador único de um elemento, só é possível declararmos apenas um id por elemento, e o mesmo não pode ser repetido.
Curso HTML5 + CSS3 - Dominando o Flexbox
Conhecer o cursoPodemos utilizar este atributo quando queremos estilizar um único elemento, e temos certeza de que essa estilização não irá se repetir no decorrer do nosso documento. Além disso, é podemos também identificar destino de âncoras com id.
Foi visto antes que, para conseguirmos estilizar um elemento utilizando o atributo class, dentro de style, devemos adicionar um . (ponto final) antes de colocarmos o nome da nossa class. Já com id, adicionamos uma # (cerquilha) e, em seguida, o nome que atribuímos para o nosso id.
Para ficar mais prático, vamos pegar o mesmo exemplo anterior, mas, agora utilizando id. Dessa vez, para h1, vamos declarar a cor verde, e para h2, roxo.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<style>
#titulo-principal {
color: green;
}
#subtitulo_da_pagina {
color: purple;
}
</style>
<h1 id="titulo-principal">Título Principal</h1>
<h2 id="subtitulo_da_pagina">Subtítulo da Página</h2>
</body>
</html>
No navegador irá ficar dessa forma:
Ancoragem com id
Para que seja possível utilizar essa funcionalidade do atributo id, o nosso documento html deverá possuir conteúdo o suficiente para gerar scroll na página. Vamos criar um exemplo só para aprendermos a utilizar essa função.
Primeiramente, vamos abrir um novo documento html, com o seguinte nome, index.html. Feito isso, vamos declarar uma tag de lista não ordenada, ul, dentro de ul, declaramos a tag de lista li, e, dentro de li, inserimos a tag de âncora, a, por fim, inserimos 12 itens dentro da tag a. No código ficará assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
<li><a href="">Item 7</a></li>
<li><a href="">Item 8</a></li>
<li><a href="">Item 9</a></li>
<li><a href="">Item 1</a>0</li>
<li><a href="">Item 1</a>1</li>
<li><a href="">Item 1</a>2</li>
</ul>
</body>
</html>
Após isso, declaramos um total de 12 tags de título h2, e para cada h2, inserimos um id, o primeiro <h2> terá um id com o seguinte nome, id=“item-1”, e o último, id=“item-12”. Abaixo de cada h2, vamos declarar um parágrafo com um lorem só para termos conteúdo o suficiente a ponto de gerar scroll na página.
Ficando dessa forma:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
<li><a href="">Item 7</a></li>
<li><a href="">Item 8</a></li>
<li><a href="">Item 9</a></li>
<li><a href="">Item 1</a>0</li>
<li><a href="">Item 1</a>1</li>
<li><a href="">Item 1</a>2</li>
</ul>
<h2 id="item-1">Item 1</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-2">Item 2</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-3">Item 3</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-4">Item 4</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-5">Item 5</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-6">Item 6</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-7">Item 7</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-8">Item 8</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-9">Item 9</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-10">Item 10</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-11">Item 11</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-12">Item 12</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
</body>
</html>
Agora, para que seja possível usar a função de ancoragem, basta irmos nos href que declaramos anteriormente, junto da tag a, e nele, inserimos o id que se refere ao item, dessa maneira:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<ul>
<li><a href="#item-1">Item 1</a></li>
<li><a href="#item-2">Item 2</a></li>
<li><a href="#item-3">Item 3</a></li>
<li><a href="#item-4">Item 4</a></li>
<li><a href="#item-5">Item 5</a></li>
<li><a href="#item-6">Item 6</a></li>
<li><a href="#item-7">Item 7</a></li>
<li><a href="#item-8">Item 8</a></li>
<li><a href="#item-9">Item 9</a></li>
<li><a href="#item-10">Item 10</a></li>
<li><a href="#item-11">Item 11</a></li>
<li><a href="#item-12">Item 12</a></li>
</ul>
<h2 id="item-1">Item 1</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-2">Item 2</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-3">Item 3</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-4">Item 4</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-5">Item 5</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-6">Item 6</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-7">Item 7</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-8">Item 8</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-9">Item 9</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-10">Item 10</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-11">Item 11</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
<h2 id="item-12">Item 12</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum officia dolorem commodi tempora recusandae pariatur et error neque doloremque labore? Labore aliquid possimus veniam soluta iste distinctio numquam reiciendis necessitatibus!
</p>
</body>
</html>
No navegador, teremos esse resultado:
Quando clicarmos em “item 12”, o navegador irá descer até o item 12 automaticamente, o mesmo se aplica aos demais.
Hidden
Por fim, teremos o atributo hidden, sendo sua função ocultar elementos do nosso documento html, indicando ao navegador que o elemento que possuir este atributo, se tornará irrelevante e não será renderizado.
Curso HTML5 + CSS3 - Dominando o Flexbox
Conhecer o cursoSua declaração é feita dentro da tag de abertura do elemento, assim como os demais. Vamos observar um exemplo a seguir:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<h1>TreinaWeb</h1>
</body>
</html>
No navegador veremos o título “TreinaWeb” normalmente.
Agora, para ocultar este elemento, basta adicionar hidden dentro da tag de abertura do h1.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<h1 hidden>TreinaWeb</h1>
</body>
</html>
Como dito anteriormente, o elemento ainda está lá, porém, não será renderizado devido ele ter se tornado irrelevante para o navegador, sendo essa a função do hidden.
Atributos Específicos
- src
- alt
- disabled
Src
O atributo src vem acompanhado da tag img, assim como alt, mas veremos sobre alt em breve.
A função de src é indicar para img qual mídia será utilizada no documento html, podendo ser a URL de uma imagem retirada do Google, por exemplo, ou até mesmo uma imagem que já esteja dentro da pasta do nosso projeto.
O código no Visual Studio Code ficará dessa forma:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<img src="" alt="">
</body>
</html>
Lembrando que veremos em breve sobre o atributo alt.
Só para exemplificar, vamos utilizar o mesmo código mostrado acima e inserir uma imagem qualquer, para isso, vamos criar uma pasta no Visual Studio Code com o nome de img.
Feito isso, vamos escolher uma imagem do Google e salvar dentro da pasta img que acabamos de criar.
Para conseguir inserir essa imagem no nosso projeto, dentro do atributo src iremos escrever img, sendo o nome da pasta que criamos anteriormente, em seguida, colocamos uma barra / e inserimos o nome da nossa imagem.
O código final ficará dessa forma:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<img src="img/treinaweb-logo.webp" alt="">
</body>
</html>
Quando abrirmos o navegador, ele irá renderizar a imagem.
Alt
Agora, veremos sobre o atributo alt, que vem em conjunto da tag img e do atributo src, como vimos anteriormente.
O atributo alt serve como um texto alternativo, o objetivo é descrever a imagem que colocamos no nosso projeto, com a finalidade de manter a acessibilidade e caso a imagem não seja renderizada pelo navegador, ele irá apresentar o texto que foi inserido para que o usuário saiba do que se trata a imagem.
Vamos utilizar o mesmo exemplo acima para entender como usamos esse atributo de extrema importância.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<img src="img/treinaweb-logo.webp" alt="Imagem da logo da Escola online para desenvolvedores TreinaWeb">
</body>
</html>
No navegador, caso a imagem não seja renderizada, ficará dessa forma:
Disabled
Por fim, temos o atributo disabled, sendo ele o responsável por desabilitar a função de determinadas tags quando declarado, como button, input, select, entre outras.
Em outras palavras, disabled é um atributo booleano, isso significa que ele ficará ativo, desabilitando a função de determinada tag, ou inativo, permitindo que o usuário interaja com a tag. Mas, só é possível alterar a função do disabled através do JavaScript.
Curso JavaScript Básico
Conhecer o cursoVamos criar um breve exemplo para melhorar o entendimento sobre esse atributo. Primeiro, criaremos um arquivo html com o nome de index.html, em seguida, vamos criar um button com o nome de “Enviar”.
Feito isso, dentro da tag de abertura de button, vamos declarar disabled, dessa forma:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributos</title>
</head>
<body>
<button disabled>Enviar</button>
</body>
</html>
Ao abrirmos o nosso navegador, teremos o seguinte resultado:
É possível observar que quando utilizamos o atributo disabled, ele muda o visual da tag, deixando com uma tonalidade acinzentada, dando a ideia de desabilitado, não permitindo interação entre o usuário e a página.
Conclusão
Com esse artigo conseguimos adquirir o conhecimento dos atributos mais utilizados pelos desenvolvedores Front-End, vimos também a importância de cada um. Agora será possível aplicar durante o desenvolvimento dos nossos projetos, para que no fim, tenhamos um documento mais completo.
É de suma importância entendermos a função de cada atributo apresentado no decorrer deste artigo, para utilizar cada um deles com mais autoridade.
