O que é o texto alt e por que importa em html?

As imagens desempenham um papel significativo em qualquer aplicativo. Eles são usados ​​para melhorar o apelo e a atratividade do site. E se a sua conexão com a Internet diminui e a imagem desejada falhar no upload? Então, o que deve ser exibido na tela em vez da imagem? Nesse cenário, o HTML nos permite usar o atributo “alt”No elemento HTML.

Este estudo irá guiá -lo sobre o que é o texto alt e por que importa em html.

O que é um texto alt em html?

Às vezes, quando percorrermos um site, um pequeno texto aparece quando a imagem falha em baixar. Este componente HTML é conhecido como “alt”Texto, descrição ou texto alternativo. É um atributo associado à etiqueta de html.

Sintaxe

Para utilizar o texto alt no HTML, siga a sintaxe dada:

A descrição da sintaxe acima mencionada está listada abaixo:

• ““src”: Este atributo é usado para especificar o caminho da imagem de origem.
• ““alt”: É o texto alternativo.

Por que o texto alt é importante no HTML?

O texto alt é importante por muitos motivos. Alguns deles estão listados abaixo:

• Para uma melhor acessibilidade da página da web, é melhor usar o texto alt, pois ajuda os usuários que são com deficiência visual a ouvir a descrição da imagem usando aplicativos de terceiros.
• No lugar da imagem, o valor do atributo de texto alt será exibido. Isso é benéfico quando os usuários experimentam conexões de baixa largura de banda.
• O texto alt também contribui para a classificação da página da web aos olhos do Google. Ele não apenas fornece descrição, mas também adiciona significado a ela, o que pode ser útil para o tráfego geral do site.

Quais são as melhores práticas de texto alt em html?

Algumas das melhores práticas para usar o texto alt para o seu site estão listadas abaixo:

• Não comece o texto alt com “foto de" ou "imagem de" palavras.
• Limite o texto alt a 130 caracteres ou menos.
• Lembre -se do SEO.
• Seja preciso.

Exemplo 1: texto alt bom e ruim em html

Vamos dar um exemplo e verificar que tipo de texto alternativo deve ser exibido no lugar da imagem:

Aqui afirmamos o texto alternativo ruim e bom para o HTML:

• Texto alt ruim: Degraus da montanha flores roxas.
• Bom texto alt: Passos cercados por flores roxas em direção à montanha coberta de neve.

Pode -se observar que o texto Alt ruim não é uma descrição; Pelo contrário, é apenas uma lista de palavras. Em comparação, o bom texto alt descreve as informações sobre a imagem.

Exemplo 2: Como adicionar texto alt ao elemento HTML?

Vamos demonstrar o conceito de adicionar texto alt com a ajuda de um exemplo.

Html

No arquivo html, primeiro, adicione um contêiner que mantém o elemento. Este elemento está associado aos atributos SRC e Alt:

Salve o arquivo HTML e a página da web mostrará a imagem da seguinte forma:

Digamos que esta imagem não tenha sido carregado, ou por engano adicionamos o caminho errado da imagem em nosso arquivo html. Em seguida, o texto alt especificado será exibido em vez da imagem:

É assim que você pode adicionar texto alt à nossa imagem usando o “alt”Atributo na tag.

Conclusão

HTML nos permite usar imagens para nosso aplicativo da web. Mas, às vezes, o usuário experimenta uma conexão de baixa largura de banda, e a imagem não pode fazer upload para o aplicativo. Em tal situação, o “alt”Atributo com tag mostra texto alternativo quando a imagem não exibiu. Este artigo explicou o atributo alt do elemento html.