Como Inserir Imagens em Páginas HTML
Aprenda a usar a tag <img> para inserir imagens em suas páginas HTML. Descubra a importância dos atributos src, alt, width e height com exemplos práticos.
Como Inserir Imagens em Páginas HTML
Imagens são elementos visuais importantes que ajudam a enriquecer o conteúdo de um site, tornando-o mais atraente e informativo. Em HTML, a tag <img> é usada para inserir imagens. Neste post, vamos explorar como usar essa tag e seus principais atributos: src, alt, width e height.
Atributo src
O atributo src (source) especifica o caminho da imagem que você deseja inserir. Pode ser um caminho relativo ou absoluto. Aqui está um exemplo básico:
<img src="imagens/exemplo.jpg" alt="Descrição da imagem">
Exemplo de Imagem com src
Atributo alt
O atributo alt (alternative text) fornece um texto alternativo para a imagem, que é exibido caso a imagem não possa ser carregada. Também é importante para a acessibilidade e SEO:
<img src="imagens/exemplo.jpg" alt="Descrição detalhada da imagem">
Exemplo de Imagem com alt
<img src="imagens/exemplo.jpg" alt="Paisagem montanhosa ao pôr do sol">
Atributos width e height
Os atributos width e height são usados para definir a largura e altura da imagem, respectivamente. Esses atributos ajudam a controlar o tamanho da imagem na página:
<img src="imagens/exemplo.jpg" alt="Descrição da imagem" width="600" height="400">
Exemplo de Imagem com width e height
<img src="imagens/exemplo.jpg" alt="Descrição da imagem" width="600" height="400">
Exemplo Completo
Aqui está um exemplo completo de como usar a tag <img> com todos os atributos mencionados:
<img src="<https://www.exemplo.com/imagens/exemplo.jpg>" alt="Descrição detalhada da imagem" width="600" height="400">
Visualização do Exemplo Completo
!https://www.exemplo.com/imagens/exemplo.jpg
Dicas de SEO para Imagens em HTML
-
Use descrições detalhadas no
alt: Isso melhora a acessibilidade e ajuda os mecanismos de busca a entenderem o conteúdo da imagem. - Otimize o tamanho da imagem: Imagens menores carregam mais rápido, melhorando o desempenho do site.
- Use formatos adequados: Formatos como JPEG e PNG são comuns, mas considere o uso de formatos modernos como WebP para melhor compressão e qualidade.
Conclusão
Inserir imagens em suas páginas HTML é simples com a tag <img>. Entender e usar corretamente os atributos src, alt, width e height é fundamental para garantir que suas imagens sejam exibidas corretamente e contribuam para a acessibilidade e o SEO do seu site. Experimente adicionar imagens às suas páginas e veja como elas podem melhorar o conteúdo visual.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com o WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
