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.