How to insert an iframe into HTML: an example of using

the Internet

At the dawn of site building, web resources used frames extensively to display individual parts of pages. But with the arrival of the new version of HTML 5, everything has changed. Markup Elements <frame>, <frameset> and <noframes> are considered obsolete. Replacing them was a single tag - <iframe>. How to add to the html <iframe>? The example below will be understandable even for a beginner in programming.

What are frames?

A frame is the basis of most of the first web pages. If you translate literally, this word means "frame", that is, the frame is a small part of the page in the browser. The widespread use of frames in the past can be explained by the low quality and high cost of Internet traffic. As a rule, the site was divided into 3-5 parts, each of which fulfilled a certain purpose:

  • "Cap" (the top frame on the width of the page) - display the name of the resource;
  • left / right "glass" - menu output;
  • the central frame is the display of the site content.

html iframe example

Splitting the page into parts allowed to overload only a certain part when updating it. For example, the user clicked a menu item and new content was downloaded to the central frame.

Modern frames in HTML 5

Why use HTML <iframe>? An example is the insertion of content from a third-party resource. A classic situation is when a web developer wants to show the position of an object on a map. How to be? Draw a terrain plan from scratch? No - there is a simpler solution: to embed an element of Google Map, Yandex Maps or 2GIS on the page. The problem is solved in four actions.

  1. You need to go to the site of any cartographic service.
  2. Find the desired object. Knowing the exact address, you can enter it in the search box.
  3. Use the "Save and receive code" button (for "Yandex.Map") or "Done" (for Google maps) to get the code to insert.
  4. It remains to enter the generated markup tags on the page.

In addition, you can select the map size and configure other display options.

html iframe example

How else can I use HTML <iframe>? An example is the insertion of video material from a Youtube resource. Multimedia technology attracts Internet users, so video content is so popular. With the installation of the video developer will cope quickly.

  1. You should upload your own video on Youtube or find a third-party file for the broadcast.
  2. Get the tag by selecting the "HTML" button
  3. The final action is to insert into the HTML code <iframe>. An example of the content of the tag will be discussed below.

Both examples used automaticcode generation, but professional developers should be able to compose it themselves. First, it will allow them to understand the layout of the page and, if necessary, modify it. Secondly, not always the markup of site elements (even though they belong to an external resource) is formed without the participation of a webmaster. Here is the high qualification of the developer.

iframe html what is this


So, before you start page layout, you need to consider the iframe (html) tag: what it is and how to use it correctly.

First of all, it should be noted that the tag is paired. Between the opening and closing elements specify the content that will be displayed in browsers that do not support this layout element. The main attributes of the tag:

  • width (width);
  • height;
  • src (the address of the loaded resource);
  • align (alignment method);
  • frameborder;
  • allowfullscreen.

Thus, the code for <iframe> is obtained. The HTML example is fully demonstrated below:

<iframe width = "560" height = "315" src = "" frameborder = "0" allowfullscreen> </ iframe>

In the resulted marking it is enough to replace the address of a site with any other and, if necessary, to correct the sizes of a frame.