Os atributos HTML fornecem informações adicionais sobre os elementos HTML. Eles têm como função definir as propriedades e funções de um determinado elemento. A tag inicial de um elemento sempre recebe os atributos e ele tem como composição um nome e um valor.
Por exemplo, no snippet de código <a href=”https://www.example.com”>Example Link</a>, “href” é o nome do atributo e “https://www.example.com” é o valor do atributo. O atributo href especifica a URL da página para a qual o link vai.
Pois bem, vamos detalhar mais esse tema.
Características de Atributo HTML
- Todos os elementos HTML podem ter atributos
- Os atributos fornecem informações adicionais sobre os elementos
- A tag inicial sempre recebe o atributo, ou seja, tem que na tag inicial
- Os atributos geralmente vêm em pares de nome/valor como: name=”value”
Agora que você aprendeu o que é atributo vamos falar sobre os atributos básico, ou em outras palavras os mais usados.
Veja também:
Introdução rápida sobre CSS
Introdução rápida sobre Python
Introdução rápida sobre JavaScript
Passo a passo de como funciona a internet
JavaScript: acelere seu site Usando a Tag script
Atributos básicos do HTML
O atributo href
Esse atributo foi citando acima, mas agora vamos detalhá-lo
O atributo href é um atributo HTML usado para especificar a URL ou endereço da web da página ou recurso para o qual o link está direcionando.
É comumente usado dentro do elemento <a> (âncora) para criar um hiperlink, que tem com função navegar para outra página ou recurso quando clicado por um usuário.
Por exemplo, o seguinte código HTML cria um link que direciona o usuário para a página inicial de example.com quando clicado:
<a href="https://www.example.com">Example.com</a>Além disso os elementos <link> e <base> também usam o atributo href.
Também vale a pena observar que o atributo href também tem outras funções como vincular a outros tipos de recursos, como endereços de e-mail e arquivos. Exemplos:
<a href="mailto:example@example.com">Send email</a>Ou
<a href="example.pdf" download>Download PDF</a>Ambos os exemplos acima criam um link para enviar um email e baixar um arquivo, respectivamente.
O Atributo src
O atributo src é um atributo HTML que especifica a URL ou a localização do arquivo de mídia que carrega um elemento. É comumente usado nos seguintes elementos:
- <img>: Para especificar a fonte de uma imagem exibida em uma página da web.
- <audio>: Para especificar a fonte de um arquivo de áudio que reproduz em uma página da web.
- <vídeo>: Para especificar a fonte de um arquivo de vídeo que reproduzi em uma página da web.
- <iframe>: Para especificar a fonte do conteúdo exibido por um iframe.
- <script>: Para especificar a fonte de um arquivo de script executado em uma página da web.
Por exemplo, o código HTML a seguir exibe uma imagem em uma página da Web especificando a origem da imagem usando o atributo src:
<img src="image.jpg" alt="image">O atributo src também vem acompanhado com outros atributos como alt, width, height e style para fornecer informações adicionais sobre o arquivo de mídia ou para controlar a exibição.
Vale ressaltar que o atributo src também tem a função de fazer uma referência aos arquivos no mesmo servidor da página da Web ou em um servidor diferente usando uma URL totalmente qualificada.
Além disso, ao usar o atributo src para scripts, o script executa antes que a página seja totalmente carregada e pode alterar o comportamento da página.
É importante observar que, se o arquivo especificado no atributo src não puder ser encontrado ou não estiver acessível, os navegadores exibirão um ícone de imagem quebrada ou nenhuma imagem.
Ainda mais, se você tiver um arquivo de imagem muito grande, isso pode diminuir o tempo de carregamento da sua página da Web, portanto, você deve usar o formato e o tamanho de imagem apropriados.
Os atributos de largura e altura (width e height)
Os atributos de largura e altura especificam as dimensões de uma imagem, vídeo ou elemento iframe em HTML.
O atributo width define a largura do elemento. O valor pode ser em pixels ou como uma porcentagem da largura do contêiner pai.
Por exemplo, width=”500″ define a largura do elemento como 500 pixels e width=”50%” define a largura do elemento como 50% da largura do contêiner pai.
O atributo height define a altura do elemento. O valor pode ser em pixels ou como uma porcentagem da altura do contêiner pai.
Por exemplo, height=”300″ define a altura do elemento como 300 pixels e height=”75%” define a altura do elemento como 75% da altura do contêiner pai.
Outro exemplo:
<img src="img_girl.jpg" width="500" height="600">Ao especificar as dimensões de uma imagem, é importante observar que, se você definir a largura e a altura para serem maiores que o tamanho real da imagem, portando comprometerá a resolução da imagem.
Por outro lado, se você definir a largura e a altura como menores do que o tamanho real da imagem, a imagem por consequência reduz e poderá perder detalhes.
Ao especificar as dimensões de um vídeo, os atributos de largura e altura definirão a proporção do vídeo, portanto, você deve sempre definir a largura e a altura. Se você não definir largura e altura, o vídeo não exibirá corretamente.
No caso de um iframe, os atributos de largura e altura definirão o tamanho do quadro que exibe o conteúdo do iframe.
Vale ressaltar que os atributos width e height também podem ser configurados usando estilos CSS, mas é útil tê-los no HTML, principalmente se você quiser que a página carregue mais rápido e o navegador possa reservar espaço para o elemento antes do conteúdo está carregado.
Atributo Alt
O atributo alt é um atributo HTML fornece um texto alternativo para uma imagem, quando a imagem não carregar na página ou se o usuário estiver usando um leitor de tela. O texto alternativo destina-se a fornecer uma breve descrição do conteúdo ou finalidade da imagem.
O atributo alt é necessário para o elemento img e seu valor deve ser uma descrição curta e precisa do conteúdo da imagem. Por exemplo:
<img src="image.jpg" alt="Uma foto de um pôr do sol sobre uma praia ">O texto fornecido no atributo alt substituir a imagem se a imagem por qualquer motivo não puder carregar, como uma conexão de internet lenta ou um link quebrado. Isso garante que os usuários ainda possam entender o contexto da imagem, mesmo que não esteja visível.
Vale ressaltar que os mecanismos de busca também utilizam o atributo alt para entender o contexto das imagens e fornecer melhores resultados de busca de imagens. Isso significa que usar um atributo alt adequado também pode ajudar a melhorar a acessibilidade e o SEO do seu site.
Também é importante observar que, se a imagem for um link, o atributo alt deve descrever a finalidade do link, não a imagem. Por exemplo, se a imagem for um botão que leva o usuário à página do carrinho de compras, o atributo alt deve ser algo como “Ir para o carrinho de compras”, não “Um botão”.
Em geral, o atributo alt é um importante recurso de acessibilidade, assim todas as imagens tem que tê-lo. Também é uma boa prática usar o atributo alt mesmo que a imagem não seja crítica para o conteúdo da página, pois melhora a acessibilidade e o SEO do site.
Atributo style
O atributo style é um atributo HTML usado para adicionar estilos CSS embutidos a um elemento HTML. Ele permite que você aplique estilos CSS diretamente a um elemento HTML específico, em vez de criar um arquivo CSS separado ou usar um elemento <style>.
O valor do atributo style é uma string contendo uma ou mais declarações CSS, separadas por ponto e vírgula. Cada declaração consiste em uma propriedade e um valor, separados por dois pontos. Por exemplo, o código a seguir define a cor de fundo de um elemento como azul e a cor do texto como branco:
<div style="background-color: blue; color: white;">...</div>O atributo style tem como característica incorporar qualquer elemento HTML e assim definir qualquer propriedade CSS do elemento. Isso inclui propriedades como cor, fonte, tamanho, posição e muitas outras.
Vale ressaltar que o atributo style é uma prática ruim e tem alguns motivos, por exemplo:
- Isso cria muita redundância no código.
- Isso torna mais difícil manter os estilos de um site.
- Isso torna mais difícil fazer alterações globais nos estilos de um site.
- Pode criar problemas de acessibilidade.
É melhor usar um arquivo CSS ou um elemento <style> para definir estilos para uma página da Web e usar classes e ids para aplicar os estilos a elementos específicos. Dessa forma, você pode usar uma única regra CSS para estilizar vários elementos e fazer alterações nos estilos em um só lugar.
Também vale a pena mencionar que o atributo style tem outra função que em conjunto com classes e ids CSS para aplicar vários estilos a um elemento.
<div class="my-class" style="color:white">...</div>Neste exemplo, o elemento terá os estilos definidos pela classe “my-class” e o estilo inline adicional “color:white”.
Atributo HTML lang
O atributo lang é um atributo HTML usado para especificar o idioma do conteúdo de um elemento HTML. Ele fornece informações sobre o idioma do texto para tecnologias assistivas, como leitores de tela, e para mecanismos de pesquisa para resultados de pesquisa específicos do idioma.
O valor do atributo lang deve ser um código de idioma válido, como “en” para inglês, “fr” para francês ou “zh” para chinês. Por exemplo:
<p lang="en">Hello World!</p>Qualquer elemento HTML pode usar o atributo lang e ele aplica a todo o conteúdo desse elemento. Por exemplo, você pode usar o atributo lang no elemento <html> para especificar o idioma padrão de toda a página da Web ou em um elemento <p> para especificar o idioma de um parágrafo específico.
Vale ressaltar que o atributo lang é um atributo opcional e não é obrigatório, mas é altamente recomendável utilizá-lo. É particularmente útil para páginas da Web multilíngues, em que diferentes partes da página podem ter idiomas diferentes.
Também vale a pena mencionar que existe também um atributo xml:lang que especifica o idioma de um elemento em documentos XML e algumas versões de XHTML o usa.
Outro atributo relacionado é o atributo dir que indica a direção do texto, que pode ser “ltr” (da esquerda para a direita) ou “rtl” (da direita para a esquerda). Esse atributo é útil para idiomas escritos da direita para a esquerda, como árabe, hebraico e persa.
<p lang="ar" dir="rtl">مرحبا بالعالم</p>Neste exemplo, o parágrafo contém texto em árabe e está escrito da direita para a esquerda.
Em resumo, o atributo lang é um importante recurso de acessibilidade que ajuda as tecnologias assistivas a entender o conteúdo da página da Web e a fornecer melhores resultados de pesquisa específicos do idioma. Todas as páginas da web deve usar para especificar o idioma do conteúdo da página.
Atributo HTML title
O atributo title é um atributo HTML usado para fornecer informações adicionais sobre um elemento, geralmente exibido como uma dica de ferramenta quando o usuário passa o mouse sobre o elemento. Assim alguns elementos, como links, imagens e campos de formulário podem usar o atributo title.
O valor do atributo title deve ser um texto breve e descritivo que forneça informações adicionais sobre o elemento. Por exemplo:
<a href="https://www.example.com" title="Visite o site de exemplo">Example.com</a>Neste exemplo, quando o usuário passar o mouse sobre o link, o texto “Visite o site de exemplo” será exibido como uma dica de ferramenta.
Os links para fornecer informações adicionais sobre o destino do link comumente que faz essa função é o atributo ttile, como a finalidade do link ou o tipo de conteúdo da página desse links. Também serva para as imagens para fornecer texto alternativo para a imagem e em campos de formulário para fornecer instruções ou informações adicionais sobre o campo.
Vale a pena mencionar que o atributo title pode combinar com outros atributos como alt, href e src para fornecer informações adicionais sobre o elemento.
Vale ressaltar também que o atributo title não fornece nenhum estilo visual, assim para ativar a exibição o usuário deve passar o mouse sobre o elemento. Alguns navegadores têm maneiras diferentes de exibir o atributo de título, por exemplo, alguns navegadores exibem uma dica de ferramenta, outros o exibem na barra de status e outros o exibem de outras maneiras.
Em resumo, o atributo title é uma ferramenta útil para fornecer informações adicionais sobre um elemento para os usuários e é usado principalmente para fornecer informações adicionais sobre links, imagens e campos de formulário. É uma boa prática usá-lo, mas não é um atributo obrigatório e não afeta a aparência visual do elemento.
Veja o primeiro artigo do Tutorial: Estrutura Básica Do HTML
Mapa mental para fixar o assunto
Conclusão
Em conclusão, os atributos HTML são uma parte fundamental dos elementos HTML e fornecem informações adicionais sobre o elemento. Eles definem as propriedades e funções de um determinado elemento e são especificados na tag inicial do elemento.
Alguns exemplos comuns de atributos HTML incluem href, src, alt, largura, altura, estilo, lang e title com apresentados acima.
Cada atributo atende a um propósito específico, como especificar a fonte de uma imagem ou o idioma do texto. O uso de atributos HTML melhora a acessibilidade e o SEO de um site, mas é importante usá-los corretamente.
Também vale a pena notar que é melhor usar estilos e classes CSS em vez de estilos embutidos com o atributo style. Com uma boa compreensão dos atributos HTML, os desenvolvedores da Web podem criar sites mais eficazes e acessíveis.
Perguntas Frequentes
Um atributo HTML é uma informação adicional sobre um elemento HTML. É usado para definir as propriedades e funções de um determinado elemento e é especificado na tag inicial do elemento.
Um atributo HTML é usado para definir as propriedades de um elemento quando o elemento é criado pela primeira vez, enquanto uma propriedade HTML é usada para acessar e manipular o estado atual de um elemento.
O valor de um atributo HTML é especificado na tag inicial do elemento, após o nome do atributo e um sinal de igual (=). O valor deve ser colocado entre aspas.
Sim, vários atributos podem ser usados no mesmo elemento, separados por espaços.
Alguns elementos requerem atributos específicos, como o atributo src para o elemento img e o atributo href para o elemento a.