No primeiro artigo dessa série nós falamos sobre o que são tags. Você pode ter acesso a ele clicando no link abaixo:
https://www.hcode.com.br/blog/html5-guia-completo-01-o-que-sao-tags
Neste artigo iremos falar sobre atributos. É muito comum usá-los e eles são muito necessários para o desenvolvimento em HTML5. Mas afinal de contas, o que é um atributo?
O que é um atributo?
Um atributo envolve uma informação adicional que nós comunicamos para a nossa tag, para que ela consiga cumprir seu papel ou função de maneira eficaz. Para entendermos melhor, pense neste exemplo: imagine que você precisa ir ao médico, pois está sentindo uma forte dor. Qual é o objetivo do médico? É te ajudar a se livrar da dor. Mas, para isso, o que você tem que informar pra ele? É necessário dizer onde a dor está ocorrendo, não é mesmo? Apenas com essa informação o médico conseguirá saber o que te receitar ou que tratamento realizar. Em outras palavras, somente com essa informação que ele conseguirá cumprir seu papel.
Da mesma forma são as tags. Por exemplo: qual é a função de uma tag de imagem? É exibir a imagem. Mas, para isso, o que ela precisa saber? O caminho da imagem a ser exibida, e para isso usamos o atributo src.
Como definir um atributo
Os atributos sempre serão informados na tag de abertura dos elementos. Podemos informar um atributo de duas maneiras:
1 - Informando seu nome e um valor. Exemplo:
<h2 class="subtitle">Hcode Treinamentos</h2>No código acima informamos para a tag <h2> um atributo class (responsável por aplicar uma classe CSS ao elemento), depois um sinal de igual e entre aspas o nome da classe. Esse é o padrão seguido em todos os atributos que possuem um valor.
2 - Informando apenas seu nome. Exemplo:
<input type="checkbox" checked>No código acima nós criamos uma tag <input> do tipo checkbox e informamos para ela o atributo checked (responsável por definir se o elemento estará checado ou não). Contudo, perceba que informamos apenas seu nome, sem nenhum valor.
Tipos de Atributos
Podemos dividir os atributos em dois grupos: 1) atributos globais e 2) atributos específicos.
Atributos Globais
São atributos que todas as tags possuem acesso. Assim, eles podem ser definidos em qualquer elemento. Exemplo:
<p title="Essa frase é sensacional">Que a Força esteja com você</p>Atributos Específicos
São atributos que apenas uma ou algumas tags possuem acesso, são atributos próprios delas. Exemplo:
<form action="register.php">
...
</form>No código acima vemos o atributo action, que pode ser definido unicamente pela tag <form>, nenhuma outra tag (até o momento) tem acesso a esse atributo.
Em conclusão, podemos dizer que assim como um piloto de avião necessita das coordenadas GPS para conseguir chegar ao seu destino, as tags precisam dos atributos para conseguir funcionar bem e assim chegar ao “destino” que todos nós queremos: produzir sites e sistemas profissionais e que sejam agradáveis de navegar.
Você pode ter acesso a esse conteúdo também em vídeo:
Além disso, você pode aproveitar e se inscrever ainda hoje em nosso Curso Completo de HTML5, onde ensinamos todas as tags e todos os atributos da linguagem HTML :).
Até o próximo artigo!