Imagens e Mídia no HTML5

O HTML5 trouxe avanços significativos na incorporação de mídias nas páginas web. Além de imagens, agora é possível incluir áudio e vídeo de forma nativa, sem a necessidade de plugins externos, como acontecia no passado.

Trabalhando com Imagens

O Elemento <img>

O elemento <img> permite inserir imagens na página.

Sintaxe Básica

<img src="caminho-da-imagem.jpg" alt="Descrição da imagem">

Atributos Comuns

Atributo

Descrição

src

Caminho ou URL da imagem.

alt

Texto alternativo, fundamental para acessibilidade e SEO.

title

Texto que aparece ao passar o mouse (opcional).

width

Largura da imagem em pixels ou porcentagem.

height

Altura da imagem em pixels ou porcentagem.

Exemplo Completo

<img src="logo.png" alt="Logotipo da empresa" width="200">

Boas Práticas

  • Sempre use o atributo alt para melhorar a acessibilidade e SEO.

  • Utilize imagens otimizadas para web (.webp, .jpg, .png).

  • Controle dimensões via CSS sempre que possível, mantendo o HTML limpo.

Imagens Responsivas com <picture>

O elemento <picture> permite definir diferentes imagens para diferentes tamanhos de tela, otimizando o carregamento e responsividade.

Exemplo

<picture>
  <source media="(max-width: 600px)" srcset="imagem-pequena.jpg">
  <source media="(max-width: 1200px)" srcset="imagem-media.jpg">
  <img src="imagem-grande.jpg" alt="Descrição da imagem">
</picture>
  • O navegador escolhe a melhor imagem de acordo com a resolução do dispositivo.

Trabalhando com Áudio

O Elemento <audio>

Permite incorporar áudio diretamente na página.

Sintaxe Básica

<audio controls>
  <source src="musica.mp3" type="audio/mpeg">
  <source src="musica.ogg" type="audio/ogg">
  Seu navegador não suporta áudio HTML5.
</audio>

Atributos Comuns

Atributo

Descrição

controls

Exibe os controles de reprodução.

autoplay

Inicia automaticamente (não recomendado na maioria dos casos).

loop

Reproduz em loop.

muted

Começa sem som.

Boas Práticas

  • Sempre ofereça pelo menos dois formatos de áudio para compatibilidade (.mp3 e .ogg).

  • Inclua um texto alternativo dentro da tag <audio> para navegadores que não suportam áudio.

Trabalhando com Vídeo

O Elemento <video>

Permite inserir vídeos diretamente na página, sem plugins externos.

Sintaxe Básica

<video controls width="640">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Seu navegador não suporta vídeo HTML5.
</video>

Atributos Comuns

Atributo

Descrição

controls

Exibe controles de reprodução.

autoplay

Inicia automaticamente.

loop

Repete o vídeo.

muted

Começa sem som.

poster

Imagem exibida antes da reprodução começar.

width / height

Define dimensões do player.

Exemplo com Poster

<video controls width="640" poster="capa-do-video.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Seu navegador não suporta vídeo HTML5.
</video>

Comparação: Incorporar Vídeo HTML5 vs. YouTube

Incorporando via YouTube

<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_DO_VIDEO" 
frameborder="0" allowfullscreen></iframe>

  • Vantagem: Economia de banda, YouTube lida com a entrega.

  • Desvantagem: Dependência de terceiros, exibição de sugestões, anúncios.

Incorporando via <video>

  • Controle total sobre o player, aparência, privacidade e hospedagem.

  • Responsável por fornecer e otimizar os arquivos.

Melhores Práticas com Mídia

  • Otimize imagens, áudios e vídeos para a web (compressão sem perder qualidade).

  • Utilize o atributo alt em imagens sempre.

  • Use <picture> e formatos modernos como .webp para imagens responsivas.

  • Prefira <audio> e <video> quando quiser controle total, ou use YouTube/Vimeo para economizar banda.

  • Ofereça múltiplos formatos de áudio e vídeo para garantir compatibilidade entre navegadores.

Exemplo Prático Completo

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagens e Mídia no HTML5</title>
</head>
<body>

  <h1>Imagens e Mídia no HTML5</h1>

  <h2>Imagem Responsiva</h2>
  <picture>
    <source media="(max-width: 600px)" srcset="imagem-pequena.jpg">
    <source media="(max-width: 1200px)" srcset="imagem-media.jpg">
    <img src="imagem-grande.jpg" alt="Paisagem da montanha">
  </picture>

  <h2>Áudio</h2>
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Seu navegador não suporta áudio HTML5.
  </audio>

  <h2>Vídeo</h2>
  <video controls width="640" poster="poster-video.jpg">
    <source src="video.mp4" type="video/mp4">
    Seu navegador não suporta vídeo HTML5.
  </video>

</body>
</html>

Conclusão

O HTML5 tornou extremamente simples e poderoso trabalhar com mídias na web. Usar imagens, áudios e vídeos de forma correta melhora a acessibilidade, a experiência do usuário e a performance do site.

Próximo Passo

O próximo módulo aborda Formulários no HTML5, onde você aprenderá a criar campos de entrada, botões, seletores e aproveitar as validações nativas e novos tipos de input que o HTML5 oferece.

Updated on
Links e Navegação
Formulários