HTML moderno: estrutura, semântica e acessibilidade
Um iframe incorpora outro contexto de navegação dentro da página. Ele é útil para vídeos, mapas e documentos de terceiros, mas adiciona custo de rede, código externo e riscos de privacidade. Use apenas quando a incorporação realmente trouxer valor.
Uma incorporação compreensível
O atributo title identifica o conteúdo do quadro para leitores de tela. Defina width e height para reservar proporção e use CSS para adaptar a largura.
<iframen src="https://example.com/player/video"n title="Vídeo: introdução ao curso"n width="560" height="315"n loading="lazy"n allow="fullscreen"n referrerpolicy="strict-origin-when-cross-origin">n</iframe>Sandbox e permissões mínimas
sandbox aplica restrições ao conteúdo incorporado; libere apenas as capacidades indispensáveis. Combinações como allow-scripts e allow-same-origin podem reduzir bastante o isolamento em conteúdo da mesma origem. O atributo allow controla recursos como câmera, microfone e tela cheia.
Desempenho e privacidade
Use loading="lazy" em iframes abaixo da dobra e ofereça um link direto como alternativa. Para embeds pesados, considere uma fachada: mostre uma imagem e carregue o player somente após interação. Avalie cookies, rastreamento e políticas do fornecedor.
Checklist de qualidade
- O iframe tem title específico?
- As permissões são mínimas e revisadas?
- Existe alternativa quando o conteúdo externo não carrega?
Pratique agora
Incorpore um vídeo com title, dimensões, lazy loading e uma política allow restrita. Compare a rede antes e depois de uma fachada.
