Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Referencia HTML > Tags HTML > Tag HTML iframe

Bypass main content

Tag HTML iframe

 Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.

Bypass main content

Descripción

El elemento HTML iframe inserta un marco dentro de un documento. Éste, trabaja casi exactamente como el elemento HTML frame, excepto que el último, sólo puede ser insertado en un conjunto de marcos (elemento HTML frameset). Resulta útil, a la hora de mostrar un documento en una porción de otro.

el documento mostrado dentro de este marco incrustado, se debe especificar en el atributo "src". Para agentes de usuario que no soportan marcos, el contenido del elemento sirve como versión alternativa del documento, razón por la cual, es una buena práctica usarlo para explicar y proveer un vínculo al contenido que se debería haber cargado en este marco.

En XHTML 1.0 el atributo "name" de este elemento ha sido desaprobado en favor del atributo "id". Por otra parte, el atributo "align" ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendable.

Ejemplos

En el siguiente ejemplo, la sección de tutoriales HTMLes mostrada en un marco incrustado. Una versión alternativo es puesta como contenido del elemento, para ser mostrada en caso de que el soporte para marcos esté ausente.

<iframe src="http://www.htmlquick.com/es/tutorials.html" frameborder="0" width="100%" height="200">Si ves este mensaje, significa que tu navegador no tiene soporte para marcos o el mismo está deshabilitado. Puedes acceder a la información mostrada en este marco aquí: <a href="http://www.htmlquick.com/es/tutorials.html">Tutoriales HTML</a>.</iframe>

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").

<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks... y es más importante que el anterior.</p>

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".

<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

Código
<a title="HTMLQuick.com" href="http://www.htmlquick.com/es/">Código HTML</a>
Vista

src (uri)

Este atributo apunta a un documento que será cargado inicialmente en el marco (cuando la página se cargue).

<iframe name="articulos" src="articulos-principal.html"></iframe>

longdesc (uri)

Apunta a un recurso con una descripción extendida para el propósito del marco. Está pensado para suplementar la información provista en el atributo "title".

<iframe name="articulos" src="articulos-principal.html" longdesc="proposito-del-marco-articulos.html"></iframe>

scrolling

Decide como se representarán los controles de desplazamiento en este marco. Los valores posibles (insensibles a mayúsculas/minúsculas) son:

  • auto: los disposibtivos de desplazamiento son mostrados únicamente cuando es necesario.
  • yes: los disposibtivos de desplazamiento son mostrados siempre.
  • no: los disposibtivos de desplazamiento no son provistos nunca.
<iframe scrolling="yes"></iframe>

frameborder

Decide si el borde (separador) será dibujado para este marco. El valor "1" le indica al navegador que deberá dibujar el borde para este marco, mientras que el valor "0" le dirá que no lo haga.

<iframe frameborder="0"></iframe>

marginwidth (pixels)

Establece la distancia entre el contenido del marco y el margen izquiero o derecho.

<iframe marginwidth="50"></iframe>

marginheight (pixels)

Establece la distancia entre el contenido del marco y el margen superior o inferior.

<iframe marginheight="35"></iframe>

width (length)

Establece la distancia entre el márgen izquierdo y el derecho.

<iframe width="50%"></iframe>

height (length)

Establece la distancia entre el márgen superior e inferior.

<iframe height="200"></iframe>

name (cdata)

Este valor actúa como indentificador para el marco, el cual puede utilizarse en vínculos y formularios como valor del atributo "target".

En XHTML 1.0 el atributo "name" de este elemento ha sido desaprobado en favor del atributo "id", y en XHTML 1.1 es simplemente inválido. Por lo tanto, su uso ya no es recomendable.

<frame name="barramenu"></frame>

align

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

define la alineación horizontal de su contenido. Los valores posibles, insensibles a mayúsculas/minúsculas, son:

  • left: el texto es alineado a la margen izquierda.
  • right: el texto es alineado a la margen derecha.
  • center: el texto es centrado.
  • justify: el texto es alineado a ambas márgenes.
<iframe align="right"></iframe>

Eventos

Este elemento no soporta eventos.

Ve a la lista completa de eventos en HTML.

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona