Un iframe es usado para mostrar una página web dentro de una página web.

Sintaxis de iframe

La etiqueta <iframe> especifica un marco en línea. Un marco en línea se utiliza para incrustar otro documento dentro del documento HTML actual.

Ejm

<iframe src="url" title="description"></iframe>

Sugerencia: es una buena práctica incluir siempre un atributo title para el <iframe>. Los lectores de pantalla lo utilizan para leer cuál es el contenido del iframe.

Iframe - Establecer alto y ancho

Utiliza los atributos height y width para especificar el tamaño del iframe. height y width se especifican en píxeles de forma predeterminada.

Ejm

<iframe src="demo_iframe.htm" height="200" width="300" 
title="Iframe Example"></iframe>

También puedes utilizar el atributo style y usar las propiedades width y height dentro del mismo.

Ejm

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" 
title="Iframe Example"></iframe>

Iframe - Eliminar el borde

Por defecto, un iframe tiene un borde alrededor. Para quitar el borde, añadir el atributo style y utilizar la propiedad CSS border.

Ejm

<iframe src="demo_iframe.htm" style="border:none;" 
title="Iframe Example"></iframe>

Con CSS, también puedes cambiar el tamaño, el estilo y el color del borde del iframe.

Ejm

<iframe src="demo_iframe.htm" style="border:2px solid red;" 
title="Iframe Example"></iframe>

Iframe: destino de un enlace

Un iframe se puede utilizar como marco de destino para un enlace. El atributo target debe hacer referencia al atributo de nombre del iframe.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>
<h2>Iframe</h2>
<iframe src="https://sutilweb.com" name="mys" height="80%" 
width="80%" title="iframe"></iframe>
<p><a href="https:/musicaysonido.es" target="mys">Música y Sonido</a></p>
<p>Un iframe</p>
</body>
</html>