HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Iframes

An iframe is used to display a web page within another web page:


HTML <iframe> Tag

The <iframe> creates an inline frame, which embeds an independent HTML document into the current document.

We use the src attribute to specify the source of the other document.

Run code

You can include any number of iframe elements within a document.


HTML iframe Size - Width and Height

You can use the width and height attributes to specify the width and height of your iframe.

Run code

You can also use CSS width and height properties to set the width and height of the iframe.


HTML iframe Border

By default, an iframe has a border around it. To remove the border, use the CSS border property.

Run code

You can also change the size, style and color of the iframe's border using CSS.

Run code

Using an iframe as Link Target

An iframe can be used as a target for the hyperlinks.

An iframe can be named using the name attribute. This implies that when a link with a target attribute with that name as value is followed, the linked resource is opened in the iframe.

Run code

Embedding YouTube Video in HTML

You can add YouTube videos to your web site by using the <iframe>.

To add YouTube video on a web page, do the following:

  1. Use the youtube site to find the video you want
  2. Click the "Share" button below the video
  3. Click the "Embed" button next to the link they show you
  4. Copy the "iframe" code given and paste it into the html of your web page.
Run code