Um elemento substituído é um elemento cujo conteúdo é determinado por um recurso externo em vez do próprio CSS. CSS, ou folhas de estilo em cascata, é usado para adicionar estilos a uma página web. Exemplos comuns de elementos substituídos incluem os elementos image, iframe e video. Com elementos substituídos, você pode controlar a posição ou o layout de um elemento. Mas seu CSS não pode modificar diretamente o conteúdo desse elemento. Isso pode ser mais fácil de explicar com alguns exemplos. Considere o elemento de imagem, que incorpora uma imagem na sua página web:

<img src="example-img-url" alt="Descriptive text goes here">

O próprio elemento é substituído pelo objeto externo: a imagem. Seu CSS pode controlar coisas como o posicionamento da imagem ou aplicar um filtro nela, mas você não pode realmente modificar a própria imagem. A more robust example might be the iframe element, which embeds an external site on your web page. Aqui está um exemplo de uso do elemento iframe para um vídeo popular do YouTube no canal G.E.A.R ACADEMY. Se você quiser ver vídeos diferentes na janela de visualização, altere o valor do atributo src para um vídeo de sua escolha. Para ver as prévias, você precisará ativar o editor interativo. NOTA: Não se preocupe com os atributos extras mencionados no exemplo interativo como referrerpolicy e allowfullscreen. Você aprenderá mais sobre como trabalhar com elementos iframe em um workshop futuro.

<iframe width="400" height="200" src="https://www.youtube.com/embed/u43gJJrVa1I?si=BoDW_puFsy8OEr_Z" title="Professional Cloud Architect Certification Course – Pass the Exam! (YouTube video)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Outros exemplos comuns de uso do elemento iframe seriam incorporar mapas na página. Aqui está um exemplo de um mapa incorporado. Ative o editor interativo e experimente mexer no próprio mapa dando zoom in/out.

<iframe
  title="Map of the Royal Observatory, Greenwich, London"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>

O próprio elemento é substituído pelo objeto externo: o site. Seu CSS pode alterar o posicionamento do site incorporado, mas você não pode modificar o conteúdo do site. Para aprofundar um pouco mais, se o site incorporado tiver um elemento h1, seu CSS não poderá estilizar esse elemento h1. Você não pode alterar o tamanho, a cor da fonte e assim por diante. Existem alguns outros elementos substituídos, como video e embed. E alguns elementos se comportam como elementos substituídos em circunstâncias específicas. Aqui está um exemplo de um elemento input com o atributo type definido como image:

<input type="image" alt="Descriptive text goes here" src="example-img-url">

Este tipo de input é considerado um elemento substituído, mas outros tipos de input como text e email não são elementos substituídos.