Domine o uso de imagens responsivas, vídeos, áudio e outros elementos de mídia com foco em performance e acessibilidade.
Use <img> quando a imagem faz parte do conteúdo: Fotos de produtos, gráficos informativos, retratos de pessoas, ilustrações que complementam o texto. Estas imagens têm significado semântico.
Use CSS background-image para decoração: Padrões, texturas, elementos visuais que são apenas estéticos. Se a imagem desaparecesse, o conteúdo ainda faria sentido completo.
Todo elemento img precisa de dois atributos essenciais: O `src` que diz onde está a imagem e o `alt` que descreve o que ela mostra. Estes dois atributos são a diferença entre uma imagem acessível e uma barreira digital.
<!-- 📸 Imagem básica - O mínimo essencial -->
<img src="foto.jpg" alt="Descrição da imagem">
<!-- 📏 Imagem com dimensões - Evita layout shift -->
<img src="logo.png"
alt="Logo da empresa"
width="200" <!-- 📏 Largura em pixels -->
height="100"> <!-- 📏 Altura em pixels -->
<!-- ⚡ Imagem com loading lazy - Performance otimizada -->
<img src="imagem-grande.jpg"
alt="Paisagem montanhosa ao pôr do sol"
loading="lazy"> <!-- 🚀 Carrega quando necessário -->Alt text é crucial para acessibilidade: Leitores de tela dependem dele para descrever imagens a usuários com deficiência visual. Mas não é apenas isso - também aparece quando a imagem não carrega e melhora o SEO.
<!-- ✅ EXCELENTE: Alt descritivo e específico -->
<img src="grafico-vendas.png"
alt="Gráfico de barras mostrando aumento de 30% nas vendas de janeiro a dezembro de 2024">
<!-- ✅ PERFEITO: Imagem decorativa -->
<img src="decoracao.png" alt=""> <!-- 🎨 Alt vazio = decoração -->
<!-- ✅ ÓTIMO: Logo da empresa -->
<img src="logo.png" alt="Empresa ABC - Soluções em Tecnologia">
<!-- ✅ BOM: Produto em e-commerce -->
<img src="smartphone.jpg"
alt="Smartphone Samsung Galaxy A54, cor azul, tela de 6.4 polegadas">
<!-- ❌ RUIM: Alt genérico e inútil -->
<img src="foto.jpg" alt="imagem"> <!-- 😞 Não ajuda ninguém -->
<!-- ❌ RUIM: Alt desnecessário em decoração -->
<img src="decoracao.png" alt="decoração"> <!-- 😞 Polui a experiência -->Figure e figcaption criam relacionamentos semânticos: Quando uma imagem precisa de uma legenda ou crédito, use estes elementos. Eles informam claramente aos navegadores e leitores de tela que o texto está diretamente relacionado à imagem.
<!-- 🎯 FIGURE: Container semântico para mídia com legenda -->
<figure>
<img src="arquitetura-gotica.jpg"
alt="Catedral com arcos ogivais típicos do gótico francês, vitrais coloridos e rosácea central">
<!-- 📝 FIGCAPTION: Legenda que complementa a informação -->
<figcaption>
Catedral de Notre-Dame, exemplo clássico da arquitetura gótica
com seus característicos arcos ogivais e vitrais do século XIII.
<br><small>📍 Paris, França | 📸 Foto: Maria Santos, 2024</small>
</figcaption>
</figure>
<!-- 🎨 MÚLTIPLAS IMAGENS: Antes e depois comparativo -->
<figure>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<img src="jardim-antes.jpg"
alt="Jardim abandonado com grama alta, plantas secas e canteiros desarrumados">
<img src="jardim-depois.jpg"
alt="Jardim renovado com grama aparada, flores coloridas e novo paisagismo">
</div>
<figcaption>
Transformação completa do jardim: antes e depois da reforma paisagística
<br><small>⏱️ Projeto realizado em 3 meses | 🌱 Parceria com Jardinagem Verde</small>
</figcaption>
</figure>
<!-- ✨ GALERIA: Múltiplas imagens relacionadas -->
<figure>
<div class="galeria-produtos">
<img src="produto-frente.jpg" alt="Smartphone visto de frente, tela ligada mostrando interface">
<img src="produto-verso.jpg" alt="Parte traseira do smartphone mostrando câmeras triplas">
<img src="produto-lateral.jpg" alt="Vista lateral destacando a espessura e botões">
</div>
<figcaption>
Samsung Galaxy A54 - Visão completa do produto em diferentes ângulos
</figcaption>
</figure>Crie uma galeria de fotos com:
Imagens responsivas são essenciais no mundo multi-dispositivo: Com telas variando de 320px (smartphones) até 5120px (monitores 5K), servir a mesma imagem para todos é desperdício de dados e performance. HTML oferece ferramentas poderosas para entregar a imagem certa para cada situação.
Diferentes telas, diferentes necessidades:
Telas Retina (iPhone), AMOLED (Samsung) e monitores 4K têm densidade de pixels
muito maior que telas tradicionais. O atributo srcset permite
especificar múltiplas versões da mesma imagem.
<!-- 🎯 SRCSET POR DENSIDADE: Para telas Retina/4K -->
<img src="logo-normal.png" <!-- 📱 Fallback: telas normais -->
srcset="logo-normal.png 1x, <!-- 🖥️ 1x: densidade padrão -->
logo-retina.png 2x, <!-- 📱 2x: iPhone, iPad -->
logo-ultra.png 3x" <!-- 🖥️ 3x: Android flagship -->
alt="Logo da empresa ABC - Tecnologia e Inovação">
<!-- ✨ RESULTADO: Navegador escolhe automaticamente! ✨ -->
<!--
📱 iPhone 13: Carrega logo-retina.png (2x)
🖥️ Monitor 4K: Carrega logo-ultra.png (3x)
💻 Laptop comum: Carrega logo-normal.png (1x)
-->DPR (Device Pixel Ratio) = Pixels físicos ÷ Pixels CSS
Imagens que se adaptam ao espaço disponível: Às vezes não é sobre densidade, mas sobre largura. Uma imagem hero no desktop pode ocupar 1200px, mas no mobile apenas 320px. Por que carregar uma imagem gigante em uma tela pequena?
<!-- 📐 SRCSET POR LARGURA: Diferentes tamanhos para diferentes telas -->
<img src="paisagem-media.jpg" <!-- 📱 Fallback -->
srcset="paisagem-pequena.jpg 400w, <!-- 📱 400px de largura -->
paisagem-media.jpg 800w, <!-- 💻 800px de largura -->
paisagem-grande.jpg 1200w, <!-- 🖥️ 1200px de largura -->
paisagem-ultra.jpg 1600w" <!-- 🖥️ 1600px+ de largura -->
sizes="(max-width: 480px) 100vw, <!-- 📱 Mobile: largura total -->
(max-width: 768px) 80vw, <!-- 📱 Tablet: 80% da tela -->
(max-width: 1200px) 60vw, <!-- 💻 Laptop: 60% da tela -->
50vw" <!-- 🖥️ Desktop: 50% da tela -->
alt="Paisagem montanhosa com lago cristalino ao amanhecer">
<!-- 🎯 COMO FUNCIONA: -->
<!--
1. Navegador calcula: "Preciso de uma imagem de 320px"
2. Olha o srcset: "Qual imagem mais próxima?"
3. Escolhe: paisagem-pequena.jpg (400w)
4. Carrega apenas o necessário!
-->O atributo sizes informa como a imagem será exibida:
Picture é como um "if/else" para imagens: Permite especificar exatamente qual imagem usar em cada situação. É perfeito para formatos modernos, art direction e breakpoints específicos.
<!-- 🚀 FORMATOS MODERNOS: WebP com fallback -->
<picture>
<!-- 1º: Tenta WebP (25-35% menor que JPEG) -->
<source srcset="produto.webp" type="image/webp">
<!-- 2º: Tenta AVIF (50% menor, mas suporte limitado) -->
<source srcset="produto.avif" type="image/avif">
<!-- 3º: Fallback JPEG (compatibilidade garantida) -->
<img src="produto.jpg"
alt="Smartphone Samsung Galaxy A54, vista frontal com tela ligada">
</picture>
<!-- 📱 BREAKPOINTS RESPONSIVOS: Diferentes tamanhos -->
<picture>
<!-- 📱 MOBILE: Imagem otimizada para telas pequenas -->
<source media="(max-width: 480px)"
srcset="banner-mobile-400.webp 400w,
banner-mobile-600.webp 600w"
sizes="100vw">
<!-- 💻 TABLET: Versão intermediária -->
<source media="(max-width: 1024px)"
srcset="banner-tablet-600.webp 600w,
banner-tablet-1000.webp 1000w"
sizes="90vw">
<!-- 🖥️ DESKTOP: Versão completa -->
<source srcset="banner-desktop-1200.webp 1200w,
banner-desktop-1600.webp 1600w"
sizes="80vw">
<!-- 🔄 FALLBACK: Para navegadores que não suportam Picture -->
<img src="banner-desktop-1200.jpg"
alt="Banner promocional: Desconto de 50% em smartphones">
</picture>Diferentes cortes para diferentes contextos: Às vezes não basta redimensionar - precisamos de composições diferentes. Um retrato corporativo no desktop pode mostrar a pessoa inteira, mas no mobile é melhor focar apenas no rosto.
<!-- 🎭 ART DIRECTION: Diferentes cortes estratégicos -->
<picture>
<!-- 📱 MOBILE: Foco no rosto (portrait crop) -->
<source media="(max-width: 600px)"
srcset="ceo-mobile-close.webp">
<!-- 💻 TABLET: Meio corpo (medium crop) -->
<source media="(max-width: 1000px)"
srcset="ceo-tablet-medium.webp">
<!-- 🖥️ DESKTOP: Corpo inteiro com contexto (wide crop) -->
<img src="ceo-desktop-full.webp"
alt="Maria Silva, CEO da TechStart, em seu escritório com vista para São Paulo">
</picture>Vídeo HTML5 revolucionou a web: Antes dependíamos do Flash Player. Hoje, o elemento <video> oferece controle total, acessibilidade nativa e compatibilidade universal. É essencial para sites modernos, marketing digital e experiências imersivas.
Múltiplos formatos garantem compatibilidade: Nem todos os navegadores suportam os mesmos formatos. O elemento <source> permite especificar várias versões, e o navegador escolhe a primeira que conseguir reproduzir.
<!-- 🎥 VÍDEO BÁSICO: Controles essenciais -->
<video controls <!-- 🎛️ Mostra play, pause, volume -->
width="640"
height="360"
poster="video-thumbnail.jpg"> <!-- 🖼️ Imagem antes do play -->
<!-- 📁 MÚLTIPLOS FORMATOS: Compatibilidade garantida -->
<source src="apresentacao.mp4" type="video/mp4"> <!-- 🏆 Mais compatível -->
<source src="apresentacao.webm" type="video/webm"> <!-- 🚀 Menor tamanho -->
<source src="apresentacao.ogv" type="video/ogg"> <!-- 🔧 Fallback adicional -->
<!-- 💬 FALLBACK: Para navegadores muito antigos -->
<p>
Seu navegador não suporta vídeo HTML5.
<a href="apresentacao.mp4">📥 Baixe o vídeo</a> ou
<a href="https://youtube.com/watch?v=xyz">🔗 Assista no YouTube</a>.
</p>
</video>| Formato | Compressão | Suporte | Melhor Para |
|---|---|---|---|
| MP4 (H.264) | Boa | 99% | Uso geral, compatibilidade |
| WebM (VP9) | Excelente | 85% | Web, tamanho menor |
| AV1 | Superior | 70% | Futuro, altíssima qualidade |
<!-- 🎬 VÍDEO HERO: Autoplay silencioso (comum em landing pages) -->
<video autoplay <!-- ▶️ Inicia automaticamente -->
muted <!-- 🔇 Sem som (obrigatório para autoplay) -->
loop <!-- 🔄 Repete infinitamente -->
playsinline <!-- 📱 Não vai fullscreen no mobile -->
poster="hero-poster.jpg" <!-- 🖼️ Carrega antes do vídeo -->
width="1920"
height="1080">
<source src="hero-video.mp4" type="video/mp4">
<source src="hero-video.webm" type="video/webm">
<!-- 🔄 FALLBACK: Imagem estática como alternativa -->
<img src="hero-fallback.jpg"
alt="Demonstração do produto em ação">
</video>
<!-- ⚠️ IMPORTANTE: Autoplay só funciona com muted! ⚠️ -->Acessibilidade em vídeo é obrigação legal: A Lei Brasileira de Inclusão (LBI) exige que conteúdo digital seja acessível. Legendas, descrições de áudio e controles por teclado são essenciais para incluir pessoas com deficiência visual ou auditiva.
<!-- 🎯 VÍDEO TOTALMENTE ACESSÍVEL -->
<video controls <!-- ⌨️ Navegável por teclado -->
tabindex="0" <!-- 🎯 Focável via Tab -->
aria-label="Palestra sobre acessibilidade web">
<source src="palestra-hd.mp4" type="video/mp4">
<source src="palestra-hd.webm" type="video/webm">
<!-- 💬 LEGENDAS: Para pessoas surdas/ensurdecidas -->
<track kind="captions"
src="legendas-pt-br.vtt"
srclang="pt-BR"
label="Português (Brasil)"
default> <!-- 🏆 Idioma padrão -->
<!-- 🌍 LEGENDAS MULTILÍNGUES -->
<track kind="captions"
src="legendas-en.vtt"
srclang="en"
label="English">
<track kind="captions"
src="legendas-es.vtt"
srclang="es"
label="Español">
<!-- 🔊 DESCRIÇÃO DE ÁUDIO: Para pessoas cegas/baixa visão -->
<track kind="descriptions"
src="descricao-audio.vtt"
srclang="pt-BR"
label="Descrição de áudio">
<!-- 📖 CAPÍTULOS: Navegação por seções -->
<track kind="chapters"
src="capitulos.vtt"
srclang="pt-BR"
label="Capítulos">
<!-- 🔄 FALLBACK acessível -->
<div>
<p>Seu navegador não suporta vídeo HTML5.</p>
<ul>
<li><a href="palestra-hd.mp4">📥 Baixar vídeo (MP4)</a></li>
<li><a href="transcript.html">📝 Ler transcrição completa</a></li>
<li><a href="slides.pdf">📊 Baixar slides (PDF)</a></li>
</ul>
</div>
</video>WEBVTT
NOTE
Legendas da palestra "Acessibilidade Web"
Palestrante: Maria Silva
00:00:00.000 --> 00:00:05.000
Olá pessoal! Bem-vindos à palestra sobre acessibilidade web.
00:00:05.000 --> 00:00:12.000
Hoje vamos aprender como tornar nossos sites inclusivos para todos.
00:00:12.000 --> 00:00:18.000
<v Maria Silva>A acessibilidade não é opcional, é um direito humano.
NOTE
<v Nome> indica quem está falandoVídeos também precisam ser responsivos: Uma experiência perfeita exige que vídeos se adaptem a diferentes telas mantendo proporção, qualidade e performance. CSS + HTML5 oferecem soluções elegantes para isso.
<!-- 🎬 VÍDEO RESPONSIVO: Container que mantém proporção -->
<div class="video-container"> <!-- 📦 CSS container responsivo -->
<video controls
width="100%"
height="auto" <!-- 📐 Altura automática -->
poster="video-poster.jpg">
<source src="tutorial-1080p.mp4" type="video/mp4">
<source src="tutorial-720p.webm" type="video/webm">
<p>
<a href="tutorial-1080p.mp4">📥 Baixar vídeo</a> |
<a href="tutorial-transcript.html">📝 Ler transcrição</a>
</p>
</video>
</div>/* 🎯 CONTAINER RESPONSIVO: Mantém proporção 16:9 */
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Mantém proporção, corta se necessário */
}
/* 📱 MOBILE: Ajustes específicos */
@media (max-width: 768px) {
.video-container {
padding-bottom: 75%; /* 4:3 para mobile, se preferir */
}
}<!-- 🎬 SEÇÃO HERO COM VÍDEO DE FUNDO -->
<section class="hero-video">
<div class="video-container">
<video autoplay muted loop playsinline poster="hero-poster.jpg">
<source src="hero-video.mp4" type="video/mp4">
<source src="hero-video.webm" type="video/webm">
<!-- Fallback para navegadores sem suporte -->
<img src="hero-fallback.jpg"
alt="Demonstração do produto em ação"
style="width: 100%; height: 100%; object-fit: cover;">
</video>
<!-- Conteúdo sobreposto ao vídeo -->
<div class="hero-content">
<h1>Inovação em Movimento</h1>
<p>Descubra como nossa tecnologia revoluciona o mercado</p>
<button class="cta-button">Saiba Mais</button>
</div>
</div>
</section>Crie um player de vídeo que contenha:
Áudio HTML5 democratizou o som na web: Podcasts, música, efeitos sonoros, narrações - tudo isso agora funciona nativamente nos navegadores. É essencial para sites de mídia, educação e experiências interativas.
Player HTML5 é leve e acessível: Não precisa de plugins, funciona em todos os dispositivos e já vem com controles acessíveis por teclado. Perfeito para podcasts, música e conteúdo educacional.
<!-- 🎼 ÁUDIO BÁSICO: Player simples e eficiente -->
<audio controls <!-- 🎛️ Mostra controles (play, pause, volume) -->
preload="metadata"> <!-- 📊 Carrega só os metadados inicialmente -->
<!-- 📁 MÚLTIPLOS FORMATOS: Garantia de compatibilidade -->
<source src="podcast-episodio-01.mp3" type="audio/mpeg"> <!-- 🏆 MP3: universal -->
<source src="podcast-episodio-01.ogg" type="audio/ogg"> <!-- 🔧 OGG: alternativa -->
<source src="podcast-episodio-01.wav" type="audio/wav"> <!-- 💎 WAV: alta qualidade -->
<!-- 💬 FALLBACK: Para navegadores sem suporte -->
<p>
Seu navegador não suporta áudio HTML5.
<a href="podcast-episodio-01.mp3">📥 Baixe o áudio</a>
</p>
</audio>
<!-- 🎵 MÚSICA DE FUNDO: Para jogos ou ambientes -->
<audio autoplay <!-- ▶️ Toca automaticamente -->
loop <!-- 🔄 Repete infinitamente -->
volume="0.3" <!-- 🔊 Volume baixo (30%) -->
id="background-music">
<source src="ambient-music.mp3" type="audio/mpeg">
<source src="ambient-music.ogg" type="audio/ogg">
</audio>
<!-- 🎯 CONTROLE VIA JAVASCRIPT -->
<button onclick="document.getElementById('background-music').pause()">
🔇 Pausar Música
</button>| Formato | Qualidade | Tamanho | Suporte | Melhor Para |
|---|---|---|---|---|
| MP3 | Boa | Pequeno | 100% | Música, podcasts, uso geral |
| AAC | Excelente | Pequeno | 95% | Música alta qualidade |
| OGG | Excelente | Médio | 85% | Alternativa livre |
| WAV | Perfeita | Grande | 90% | Efeitos sonoros curtos |
Podcasts exigem UX diferenciada: Diferente de música, podcasts precisam de controles de velocidade, capítulos, transcrições e informações do episódio. Uma boa implementação combina áudio HTML5 com metadados estruturados.
<!-- 🎧 PODCAST PLAYER: Experiência completa -->
<article class="podcast-episode" itemscope itemtype="https://schema.org/PodcastEpisode">
<!-- 📄 METADADOS DO EPISÓDIO -->
<header>
<h3 itemprop="name">🎯 Episódio 42: HTML Semântico - A Base de Tudo</h3>
<div class="episode-meta">
<time itemprop="datePublished" datetime="2024-01-15">
📅 15 de janeiro de 2024
</time>
<span itemprop="duration" content="PT45M">
⏱️ 45 minutos
</span>
<span>
👥 Com Maria Silva e João Santos
</span>
</div>
<p itemprop="description">
Descubra como HTML semântico melhora SEO, acessibilidade e experiência do usuário.
Discutimos elementos estruturais, melhores práticas e casos reais.
</p>
</header>
<!-- 🎵 PLAYER DE ÁUDIO -->
<audio controls
preload="metadata" <!-- 📊 Carrega metadados sem o áudio completo -->
itemid="episodio-42">
<source src="podcast-episodio-42-high.mp3" type="audio/mpeg"> <!-- 🎵 Qualidade alta -->
<source src="podcast-episodio-42-low.mp3" type="audio/mpeg"> <!-- 📱 Mobile/baixa banda -->
<source src="podcast-episodio-42.ogg" type="audio/ogg"> <!-- 🔧 Fallback -->
<!-- 💬 FALLBACK rico em informações -->
<div class="audio-fallback">
<p>❌ Seu navegador não suporta áudio HTML5.</p>
<div class="alternatives">
<a href="podcast-episodio-42-high.mp3" download>
📥 Baixar episódio (MP3 - 42MB)
</a>
<a href="transcricao-episodio-42.html">
📝 Ler transcrição completa
</a>
<a href="https://open.spotify.com/episode/xyz">
🎵 Ouvir no Spotify
</a>
</div>
</div>
</audio>
<!-- 📋 CONTROLES ADICIONAIS -->
<div class="podcast-controls">
<button onclick="changeSpeed(0.75)">🐌 0.75x</button>
<button onclick="changeSpeed(1.0)">▶️ 1x</button>
<button onclick="changeSpeed(1.25)">⚡ 1.25x</button>
<button onclick="changeSpeed(1.5)">🚀 1.5x</button>
</div>
<!-- 📚 CAPÍTULOS (via JavaScript) -->
<details class="chapters">
<summary>📖 Capítulos do Episódio</summary>
<ol>
<li><button onclick="seekTo(0)">🎬 Introdução</button> (0:00)</li>
<li><button onclick="seekTo(300)">📝 O que é HTML Semântico?</button> (5:00)</li>
<li><button onclick="seekTo(900)">🔍 Elementos Estruturais</button> (15:00)</li>
<li><button onclick="seekTo(1800)">💡 Casos Práticos</button> (30:00)</li>
<li><button onclick="seekTo(2400)">🎯 Conclusões</button> (40:00)</li>
</ol>
</details>
</article>Performance de mídia define o sucesso do site: Estudos mostram que 40% dos usuários abandonam sites que demoram mais de 3 segundos para carregar. Imagens e vídeos são os maiores vilões, mas com técnicas corretas, se tornam aliados da velocidade.
Carregue apenas o que está visível: Por que carregar 50 imagens se o usuário vê apenas 3? Lazy loading economiza dados, acelera o carregamento inicial e melhora a experiência, especialmente em mobile.
<!-- 🚀 LAZY LOADING: Nativo do HTML5 -->
<img src="hero-image.jpg"
alt="Imagem principal da página"> <!-- 📸 Carrega imediatamente -->
<img src="galeria-foto-1.jpg"
alt="Primeira foto da galeria"
loading="lazy"> <!-- 🔄 Carrega quando necessário -->
<img src="galeria-foto-2.jpg"
alt="Segunda foto da galeria"
loading="lazy"> <!-- 🔄 Economia de dados -->
<!-- 🎬 LAZY LOADING EM VÍDEOS: Performance máxima -->
<video controls
poster="video-poster.jpg"
preload="none" <!-- 🚫 Não carrega até o usuário querer -->
loading="lazy">
<source src="video-pesado.mp4" type="video/mp4">
</video>
<!-- 📱 IFRAMES: YouTube, mapas, etc -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
loading="lazy" <!-- 🎵 YouTube só carrega quando visível -->
width="560"
height="315"></iframe>Escolha o formato certo para cada situação: WebP reduz 25-35% o tamanho vs JPEG. AVIF reduz 50%. Para vídeos, H.265 é 25% menor que H.264. Pequenas mudanças, grandes resultados.
<!-- 🎨 IMAGENS: Formatos progressivos -->
<picture>
<!-- 🚀 AVIF: 50% menor, mas suporte limitado -->
<source srcset="produto.avif" type="image/avif">
<!-- ⚡ WebP: 30% menor, suporte amplo -->
<source srcset="produto.webp" type="image/webp">
<!-- 🔧 JPEG: Fallback universal -->
<img src="produto.jpg"
alt="Smartphone XYZ em promoção"
width="400"
height="300"> <!-- 📐 Dimensões evitam layout shift -->
</picture>
<!-- 📹 VÍDEOS: Compressão inteligente -->
<video controls poster="thumbnail.jpg">
<!-- 🏆 AV1: Futuro da compressão -->
<source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
<!-- ⚡ H.265/HEVC: 25% menor que H.264 -->
<source src="video.h265.mp4" type="video/mp4; codecs=hevc">
<!-- 🔧 H.264: Compatibilidade universal -->
<source src="video.h264.mp4" type="video/mp4">
</video>A web moderna é colaborativa: Raramente criamos todo conteúdo do zero. YouTube para vídeos, Google Maps para localização, Spotify para música - integrar serviços externos de forma eficiente é uma habilidade essencial.
Por que usar plataformas de vídeo? Hospedagem gratuita, CDN global, múltiplas qualidades automáticas, analytics detalhados e zero custo de banda. Para a maioria dos casos, é a escolha mais inteligente.
<!-- 📺 YOUTUBE: Embed responsivo e otimizado -->
<div class="video-embed">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&modestbranding=1"
title="Apresentação da Empresa - Vídeo Institucional" <!-- ♿ Título descritivo -->
width="560"
height="315"
frameborder="0" <!-- 🎨 Sem bordas -->
allowfullscreen <!-- 🖥️ Permite tela cheia -->
loading="lazy"> <!-- ⚡ Carregamento sob demanda -->
</iframe>
</div>
<!-- 🎨 VIMEO: Qualidade premium -->
<div class="video-embed">
<iframe src="https://player.vimeo.com/video/123456789?title=0&byline=0&portrait=0"
title="Portfolio Criativo - Showreel 2024"
width="640"
height="360"
frameborder="0"
allowfullscreen
loading="lazy">
</iframe>
</div>
<!-- 🎯 PARÂMETROS ÚTEIS DO YOUTUBE -->
<!--
?rel=0 - Não mostra vídeos relacionados
?autoplay=1 - Inicia automaticamente (só com muted)
?start=60 - Começa aos 60 segundos
?end=180 - Para aos 180 segundos
?modestbranding=1 - Remove logo do YouTube
?controls=0 - Esconde controles
-->Mapas aumentam conversão: Estudos mostram que páginas com mapas têm 30% mais engajamento. Para empresas locais, é quase obrigatório mostrar localização de forma interativa.
<!-- 🗺️ GOOGLE MAPS: Localização interativa -->
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.1975!2d-46.6547296!3d-23.5505199!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce59c8da0aa315%3A0xd59f9431f2c9776a!2sAv.%20Paulista%2C%20S%C3%A3o%20Paulo%20-%20SP!5e0!3m2!1spt-BR!2sbr!4v1234567890"
title="Localização da nossa empresa na Avenida Paulista" <!-- ♿ Título descritivo -->
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"> <!-- 🔒 Política de privacidade -->
</iframe>
</div>
<!-- 📍 INFORMAÇÕES COMPLEMENTARES -->
<div class="location-info">
<h4>📍 Como Chegar</h4>
<address>
<strong>TechStart Ltda.</strong><br>
Avenida Paulista, 1000 - Conjunto 42<br>
Bela Vista, São Paulo - SP<br>
CEP: 01310-100
</address>
<div class="transport-options">
<h5>🚇 Transporte Público:</h5>
<ul>
<li>🚇 Metrô Trianon-MASP (Linha 2-Verde) - 200m</li>
<li>🚌 Ônibus: Linha 875M, 2174-10</li>
</ul>
</div>
</div>Plataformas de áudio conectam audiências: Integrar players do Spotify ou SoundCloud permite que usuários descubram seu conteúdo diretamente nas plataformas que já usam, aumentando alcance e engajamento.
<!-- 🎵 SPOTIFY: Player de playlist -->
<div class="spotify-embed">
<iframe src="https://open.spotify.com/embed/playlist/37i9dQZF1DXcBWIGoYBM5M?utm_source=generator"
title="Playlist: Focus e Produtividade - Música para Trabalhar"
width="100%"
height="352"
frameborder="0"
allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy">
</iframe>
</div>
<!-- 🔊 SOUNDCLOUD: Podcast ou áudio independente -->
<div class="soundcloud-embed">
<iframe width="100%"
height="166"
scrolling="no"
frameborder="no"
allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/user/track&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false"
title="Podcast TechStart - Episódio sobre HTML Semântico"
loading="lazy">
</iframe>
</div>Desafio: Crie uma página que demonstre todos os conceitos aprendidos:
Na Aula 05, exploraremos Tabelas e Dados - como estruturar informações complexas de forma semântica e acessível. Aprenderemos sobre thead, tbody, colspan, rowspan e como criar tabelas responsivas que funcionam perfeitamente em qualquer dispositivo.
Desafio: Crie uma página que demonstre todos os conceitos aprendidos:
Na Aula 05, exploraremos Tabelas e Dados - como estruturar informações complexas de forma semântica e acessível. Aprenderemos sobre thead, tbody, colspan, rowspan e como criar tabelas responsivas que funcionam perfeitamente em qualquer dispositivo.