Como colocar uma imagem no HTML

Neste artigo veremos como colocar uma imagem no HTML e também boas práticas que devemos seguir com imagens para termos um código conciso.

Fala programador(a), beleza? Bora aprender coisa nova!

Temos a possibilidade de adicionar imagens no HTML para deixarmos nossas páginas web mais interessantes

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

E há uma forma muito fácil de fazer isso, temos de inserir uma tag própria para imagens: a img

Então veja o código:

<img src="imagem.jpg" alt="Sobre a imagem">

Aqui nesta tag podemos perceber algumas coisas diferentes: src e alt, que chamamos de atributos

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Onde src significa source ou fonte, que é o caminho para a imagem, e é este atributo que permite que ela apareça no HTML

Lembre-se que a imagem pode estar em uma pasta/diretório, então devemos colocar todo o caminho até ela no src

<img src="img/imagem.jpg" alt="Sobre a imagem">

Neste exemplo a imagem.jpg está dentro do diretório img

E o outro atributo alt vem de alternative, ou seja uma alternativa a imagem

Onde devemos resumir o que a imagem contém, e este atributo é uma boa prática e muito importante

Pois ele adiciona acessibilidade, ou seja, pessoas cegas que acessam páginas na web, sabem o conteúdo da imagem por este atributo

Além disso, os leitores de tela (bots do Google), também se guiam por este atributo

Então é de suma importância você descrever a imagem por meio do atributo alt, em todas as imagens do seu site

Conclusão

Vimos neste post colocar uma imagem no HTML, através da tag img

Também nos aprofundamos nos seus dois atributos essenciais: src e alt

Onde src serve para colocarmos o caminho da imagem e alt a descrição da mesma

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube