HTML Iframe
Un iframe HTML se utiliza para mostrar una página web dentro de una página web.
HTML Iframe Sintaxis
La etiqueta HTML <iframe>
especifica un marco en línea.
Un marco en línea se utiliza para incrustar otro documento dentro del documento HTML actual.
Sintaxis
<iframe src="url" title="descripción"></iframe>
Consejo: Es una buena práctica incluir siempre un atributo title
para <iframe>
. Los lectores de pantalla lo utilizan para leer cuál es el contenido del iframe.
Iframe - Establecer altura y ancho
Utilice los atributos height
y width
para especificar el tamaño del iframe.
La altura y el ancho se especifican en píxeles de forma predeterminada:
Ejemplo
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Ejemplo"></iframe>
Inténtalo tú mismo »
O puede agregar el atributo style
y usar el CSS propiedades de height
y width
:
Ejemplo
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Ejemplo"></iframe>
Inténtalo tú mismo »
Iframe - Quitar el borde
De forma predeterminada, un iframe tiene un borde alrededor.
Para eliminar el borde, agregue el atributo style
y use la propiedad CSS border
:
Ejemplo
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Ejemplo"></iframe>
Inténtalo tú mismo »
Con CSS, también puedes cambiar el tamaño, estilo y color del borde del iframe:
Ejemplo
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Ejemplo"></iframe>
Inténtalo tú mismo »
Iframe — Destino de un enlace
Se puede utilizar un iframe como marco de destino para un enlace.
El atributo target
del enlace debe hacer referencia al atributo name
del iframe:
Ejemplo
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Ejemplo"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Inténtalo tú mismo »
Resumen del capítulo
- La etiqueta HTML
<iframe>
especifica un marco en línea - El atributo
src
define la URL de la página a insertar - Incluya siempre un atributo
title
(para lectores de pantalla) - Los atributos
height
ywidth
especifican el tamaño del iframe - Utilice
border:none;
para eliminar el borde alrededor del iframe
HTML Ejercicios
HTML iframe Etiqueta
Etiqueta | Descripción |
---|---|
<iframe> | Define un marco en línea |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.