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
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