A maneira mais simples e eficiente de aprender HTML 5 – Aula 3 - Atributos

Talvez você não tenha notado ainda o quanto o HTML é poderoso, a partir do estudo dos atributos HTML essa afirmação vai ficar cada vez mais clara para você.

Vamos começar respondendo para que serve os atributos. Os atributos fornecem informações a mais sobre os elementos HTML, ou seja, além da função principal do elemento, os atributos dizem, por exemplo, o tamanho, no caso de imagens e contêineres, o destino de um link, a cor de um texto, a quantidade de caracteres que podem ser escrito em uma caixa de texto num formulário, enfim, os atributos deixam os elementos mais dinâmicos e com características além de simplesmente organizar o conteúdo.

Veja as principais características dos atributos.

Todo elemento HTML pode ter atributos;

Atributos fornecem informações adicionais aos elementos;

Atributos são sempre escritos na tag de início;

A grande maioria dos atributos vêm em pares (nome/valor), nome do atributo e valor do atributo.

Talvez você gostaria de conhecer agora os principais atributos e quais tags eles acompanham.

ATRIBUTO HREF

Como vimos no capítulo anterior, a tag <a> é o elemento que determina um link em HTML, mas para onde esse link direciona o usuário quando clicado? É aí que entra o atributo href. O endereço do link é especificado em href. Vamos ao exemplo:

<a href="home.html">Link</a>

<a href="https://cliackartweb.com.br">Link</a>

Esse é um dos atributos da tag <a>, mais para frente nós vamos falar sobre essa tag e todas as suas façanhas bem detalhadamente.

ATRIBUTOS DA TAG <IMG>

Nós também estudamos a tag <img>, que determina a visualizações de uma imagem no HTML. O caminho/nome da imagem que irá ser mostrada é definida no atributo src.

<img src="logo.png">

<img src="images/nome-da-imagem.jpg">

<img src=http://algum_dominio.com.br/nome-da-imagem.jpg>

Na tag <img> nós ainda podemos atribuir a largura e altura da imagem, quem faz isso são respectivamente os atributos width e height (apesar de uma prática melhor é usa CSS para controlar largura e altura de imagens).

<img src="sua-imagem.jpg" width="100" height="100">

Atenção: Os valores de width e height são dados em pixels (px). Logo width=”100″ é igual a 100px de largura.

O atributo alt também é muito útil para esse elemento <img>. Ele específica um texto alternativo caso a imagem não possa ser exibida. Ele também pode ser lido pelos leitores de tela. Imagine que alguém esteja escutando o site, quando chegar nas imagens, o leitor vai procurar esse atributo para ler.

<img src="imagem.jpg" alt="Logotipo da empresa">

Veja o que acontece se tentarmos inserir uma imagem que não existe ou que esteja com problemas de visualização e usarmos o alt nesse elemento:

Nós teremos um capítulo inteiro dedicado ao tratamento de imagens pelo HTML.

ATRIBUTO STYLE

Esse atributo é muito útil para especificar um estilo para o elemento, ele pode ser usado em todos os elementos e tudo que você escreve em CSS pode ser escrito dentro desse atributo. É o que chamamos de CSS inline ou style inline. Esse atributo tem prioridade no estilo, ou seja, se você escreve um arquivo CSS para estilizar um link, mas no link você insere o atributo style e digita valores diferentes da folha de estilo CSS inserida no arquivo HTML, o navegador vai priorizar o CSS inline, ou seja, o que está diretamente escrito na tag.

<p style="color:#FF0000;">Aqui esta um parágrafo.</p>

ATRIBUTO LANG

No HTML podemos declarar a linguagem do documento, isso é muito importante para leitores de tela, buscadores e outros aplicativos de acessibilidade. Essa linguagem é declarada com o atributo lang.

<!DOCTYPE html>
<html lang="pt-BR">
<body>
...
</body>
</html>

As duas primeiras letras (pt) indicam o idioma, se houver um dialeto, variações da linguagem, usamos as outras duas (BR). Como o português é falado em vários outros países, nós especificamos que a linguagem usada é o português do Brasil, se escrevêssemos pt-PT então seria português de Portugal.

ATRIBUTO TITLE

O title pode ser usado em diversos elementos HTML. Ele funciona como uma dica para o elemento quando um usuário passar o mouse por cima dele.

<p title="Isso é o primeiro parágrafo">Aqui está o parágrafo</p>

<a href="home.html" title="Página inicial do site">Home</a>

Você provavelmente já entendeu a função dos atributos. Eu poderia dizer o quão importante é o uso correto dos atributos, mas sei que você já deve ter percebido isso. Então vamos partir para as boas práticas recomendadas pela W3C para o uso dos atributos.

BOAS PRÁTICAS – USO DE ASPAS

O HTML não exige o uso de aspas nos atributos, mas é uma recomendação de boas práticas da W3C que nós façamos uso delas.

Jeito ruim

Jeito bom

As vezes o uso das aspas é necessário. O exemplo abaixo não exibirá o atributo title corretamente porque tem um espaço entre as palavras, se fosse uma única palavra não haveria problema, mas quando são duas ou mais, as aspas são obrigatórias para o funcionamento do atributo.

<p title=Curso de HTML>

Para deixar claro, sempre use aspas, mesmo que o atributo tenha um valor sem espaços em branco porque assim você evita possíveis erros.

Eu sempre uso aspas e a maioria (99,9%) dos programadores também usam.

Você pode usar aspas simples ou aspas duplas, tanto faz. Se pegarmos os códigos escritos pela W3C vamos encontrar sempre aspas duplas, mas isso não quer dizer que aspas simples terá um efeito diferente.

As vezes pode ser que seja o caso de usar as duas juntas, quando o próprio valor do atributo contém aspas.

<p title="Esse curso de 'HTML' está muito bom">
ou
<p title='Esse curso de "HTML" está muito bom'>

Quem sabe você gostaria de ter uma lista completa dos atributos para cada elemento da HTML: Em breve esterá disponível no site uma Referência de atributos HTML e você poderá consultar a sintaxe e explicação de cada um deles.

Eu poderia dizer para você estudar bem os atributos HTML e que eles são muito importantes, mas eu prefiro deixar você descobrir isso sozinho. Como disse Lao Tsé