<source>: O Elemento SOURCE
Última atualização: 2026-10-13
<source>O Elemento SOURCE
Fornece recursos de mídia para audio, video ou picture, permitindo várias variantes para compatibilidade ou responsividade.
| Categoria | Links e Mídia |
|---|---|
| Modelo de Conteúdo | Elemento vazio |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Auto-fechante — nenhuma tag de fechamento necessária |
| Status | Padrão |
📝 Sintaxe
<source src="..." type="...">⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
src | Media resource URL. | |
type | MIME type of the resource, e.g. audio/mpeg. | |
media | Media query condition (used by picture for responsiveness). |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <source> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： source é um elemento vazio (sem tag de fechamento); o navegador escolhe o primeiro source suportado.
❓ Perguntas Frequentes
Qsource pode ser usada sozinha?
ANão;
<source> é elemento vazio e só existe como filho de <picture>, <video> ou <audio>, oferecendo recursos candidatos ao pai — não renderiza nada por si.QQual é a diferença entre src e srcset de source?
APara video/audio use
src (endereço único); para o source de picture use srcset (aceita vários pares «endereço + descrição de largura/densidade de pixels», combinado com sizes para seleção responsiva). A combinação errada de atributos é ignorada pelo navegador.QA ordem dos vários sources importa?
AO navegador percorre de cima para baixo e pega «o primeiro suportado» — então formatos novos e tamanhos menores vêm primeiro, e o recurso de fallback por último (no picture, o fallback é a própria img). Ordem invertida faz o formato antigo casar primeiro e o novo nunca ser usado.
🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
