O que são atributos HTML? - Resumo Básico

Imagem de Lawrence Monk por Pixabay

No post anterior vimos um pouco do que é o HTML, um pouco da sintaxe e como funciona, agora veremos um pouco sobre o que são atributos, e como funcionam.

O que são atributos

Atributos são, como o nome diz, informações que atribuímos a tags e/ou elementos no nosso documento HTML para que ele se comporte da maneira esperada.

Atributos servem para indicar ao cliente - navegador - qual linguagem está o conteúdo de nossa página, qual classe CSS queremos usar para estilizar…

Os atributos estão divididos basicamente em atributos globais, isto é, que funcionam em todas as Tags, e atributos específicos, que como se imagina, são atributos específicos de certas tags que só funciona para elas mesmas.

Os atributos possuem nome e valor, porém dependendo do atributo, as vezes usamos apenas o nome - mais pra frente veremos algum exemplo.

A sintaxe de atributo é: <elemento atributo="valor"> ou ainda, apenas <elemento atributo> , sem espaço entre o nome do atributo, o sinal de igualdade e a aspa de abertura.

Existem atributos que você vai usar praticamente sempre, alguns também podem ser mais raros, outros são obrigatório também.

Alguns exemplos de Atributos Globais:

• lang
  • Determina o idioma em que está escrito o conteúdo do nosso elemento.
• style
  • Define propriedades CSS diretamente no elemento.
• id
  • É o identificador único. Somente deve ser declarado um id por elemento, e este id não deve ser repetido na mesma página.
• class
  • Determina uma (ou mais) classe(s) para o elemento que podem ser usadas para estilizar com CSS e/ou dar funcionalidades com JavaScript. Para definir mais de uma classe, basta colocá-las separadas por espaço, ex: class="classe1 classe2 classe3"
• hidden
  • Oculta o elemento onde foi declarado.
• title
  • Determina uma “dica do elemento”, representando

Este foi um pequeno exemplo de atributos que você com certeza mais vai usar na sua carreira de dev, algumas destas são quase que indispensáveis.

Tudo entendido até agora, certo? Ok, ótimo.

Agora continuando, que tal criarmos nossa primeira página?

Certo. Observaremos então o código abaixo.

Ainda na primeira linha temos o atributo lang com o valor pt, isso quer dizer que nosso conteúdo está na lingua - language - portuguesa - pt -, poderíamos ser ainda mais específicos colocando por exemplo pt-BR.

Na terceira linha temos o elemento <meta> com o atributo charset e um valor igual a utf-8. Aqui é onde definimos e mostramos ao nosso cliente - navegador browser - qual tabela de caracteres estaremos usando, nosso caso é o utf-8. Apesar de muitos browsers terem este como um elemento/atributo opcional, é recomendado sempre usar.

Quarta linha temos o título da nossa página, como já sabemos.

Agora na sétima linha vemos um elemento vazio/de auto fechamento <img>, e nele temos três atributos interessantes. Vamos olhar cada um.

• O primeiro atributo, src é obrigatório neste elemento, é ele quem diz onde encontrar a imagem que deverá ser renderizada.
• Agora então, temos o alt, ele é como um helper para quando o caminho da imagem estiver errado, ou ela simplesmente não puder ser renderizada, então o alt aparecerá no seu lugar. Também serve para acessibilidade, ajudando leitores de tela repassarem melhor a deficientes visuais, o que há na imagem.
• Agora por último temos o width, como todos devem saber, aqui pode ser especificado a largura que queremos para a imagem.

E sim, parágrafos podem ser definidos com a tag p purinha mesmo.

Fizemos um ótimo progresso até agora, né? Parabéns por chegar até aqui, e caso não tenha lido a primeira parte, é só clicar aqui que você já cai nela.

Links úteis

• Para ver todas as tags HTML, clique aqui.
• Veja quais são os atributos HTML diponíveis aqui.