Frames

iframe tag

iframe tag is used to embed an html document within another html document. It is used to display some other webpage on your current webpage. Generally, we don't use iframes and try to avoid it.

Syntax for using iframe tag:

<iframe src="page.html" width="300" height="200"></iframe>

Attributes used here are src, width and height.

  • src attribute

    src attribute specifies what html document should be displayed within the frame. Its actually contains the path of the other webpage that you want to show within your current page.

  • width attribute

    width attribute specifies the width of the frame within which other webpage is to be displayed.

  • height attribute

    height attribute specifies the height of the frame within which other webpage is to be displayed.

Why avoid iframes

iframes are not preferred by programmers. There are few reasons for it.

  • iframes add to website's load time. Load time means how long it takes for a website to load and render all its content. Its important from SEO's (Search Engine Optimization) point of view. We will talk more about SEO later.

  • iframes can generate security risks. Websites using iframes can be hacked or compromised using phishing attacks like XSS attacks (Cross Site Attacks) or some other techniques.

So, the conclusion is that there is up and down side of everything. There are scenarios where iframes are easy and good solutions but to be on safer side, avoid iframes if the same task is possible to do with some other technique.

Things to do

  • Open notepad++.
  • Write the following code: 
    <!DOCTYPE html>
<html>
<head>
    <title>Frames</title>
</head>
<body>
<iframe src="http://www.syntaxpage.com" width="700" 
    height="500"></iframe>
<br />
<br />
<br />
Here is my other content.
This content belong's to current page.
Above content within the frame belong's to syntaxpage.com.
</body>
</html>
  • Save the file as frames.htm and open it in a browser.
    Note - Make sure you are connected to the internet because src attribute contains path to the live website. You can assign local file name path to the src attribute.
  • Finally do some experiment with the code.
<< Working with Text Links and Navigation >>