HTML Iframe

    Using the <iframe> element we can add a new HTML document in the existing one.  The <iframe> element create a rectangular region with its own borders and scrollbar that can show a separate web page.

    <iframe> syntax 

    <iframe src="URL"> </iframe>

    Example 

    <!DOCTYPE html>
<html>

   <head>
      <title>HTML Iframes</title>
   </head>
	
   <body>      
   <iframe src ="https://www.techgeekbuzz.com/">         
  
    <!-- this message will be shown if the browser does not support iframe -->    
     Browser does not support <iframe>
  </iframe>
   </body>
	
</html>

    Output

    <iframe> has its own attribute for setting height and width, unlike most of the other elements we do not need to use the styling on <iframe> tag for setting its resolution.

    Example 

    <iframe src ="https://www.techgeekbuzz.com/" height="200" width="300">

Does not support

</iframe>

    Output

    By default height and width attribute accept values in pixels (px). <Note> CSS style attribute can also be used to set the width and height of the iframe.

    <iframe> Target a Link

    Using a target attribute of <a> tag we can set a src URL value for a <iframe> element. The target value of <a> tag must be corelate with the name attribute of <iframe>

    Example: 

    <!DOCTYPE html>
<html>
<head>

</head>
<body>
<iframe src="https://www.techgeekbuzz.com/" name="techgeekbuzz">
</iframe>

<p> <a href="https://www.techgeekbuzz.com/html-cheat-sheet/" target="techgeekbuzz">
HTML Cheat Sheet </a>
</p>
</body>
</html>

    Output

    HTML Cheat Sheet

    Attributes of <iframe>

    <iframe> attributes Description
    src It specifies the document or URL that need to be loaded in the frame.
    name This attribute set a name to the frame.
    frameborder This attribute decides whether the border of the frame should be displayed or not. It accepts two values 1 and 0. 1 means yes, and 0 means no.
    marginwidth It specifies the space between the frame border and frame content from left to right.
    marginheight It specifies the space between the frame border and frame content from top to bottom.
    height It specifies the height of the frame.
    Width It specifies the width of frame
    scrolling It specifies whether a scrollbar should be present on the frame or not. It accepts 3 values "yes", "no" and "auto"

    <iframe> Quick Summary

    • <iframe> represent inline frame.

    • It is used to put a completely separate HTML document on a webpage.
    • The src attribute specifies the HTML document that needs to be embedded on the webpage.
    • Width and height of the frame can be set through width and height attributes.
    Previous Tutorial Next Tutorial