HTML barely needs any introduction, given its massive application worldwide. HTML stands for HyperText Markup Language, the most widely used language for developing web applications. HTML provides several tags that are can be used in almost any use case of a web application.
One such tag is the <iframe> tag; this tag is used for embedding a document within a document. For example, embedding maps on a webpage or a youtube video on a web site.
This article aims to focus on the HTML Iframes tag and its implementation. It is an important HTML tag since many web applications need embedded elements like maps, web advertisements, etc.
HTML is critical for web development, and if you’ve ever thought about choosing web development as a career path, you’d unquestionably have come across this language. And that’s probably why you are here in the first place.
Here are the key topics we will be looking into in this article:
- What is an HTML Iframe Tag?
- Implementation of <iframe> on a Web Page
What is an HTML Iframe tag?
HTML is nothing but the tags that it constitutes. HTML has a tag for almost every element that you can think of adding to a web page. <iframe> is one of the important tags often used to embed other documents like web pages, maps, etc.
The iframe in HTML stands for Inline Frame. The <iframe> tag defines a rectangular area within the current document or web page. The web browser can display another document within the current page, including the scrollbars and borders.
Like every other tag, the <iframe> tag also has a few attributes associated with it. Attributes like src, height, width, and others define and edit the region created by <iframe> tag.
Syntax:
<iframe src="URL of document" title="description of document"></iframe>
Implementation of <iframe> on a Web Page - Iframe Example
Having understood what the <iframe> tag exactly is. So, let’s dive into the practical aspect of this HTML tag and code a simple web page that displays some text and another document within that same page. Here is how it goes.
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<h1>HTML Iframe Tag</h1>
<br />
<h2>Simplilearn video embedded using iframe...</h2>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/ukzFI9rgwfU"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</body>
</html>
Let’s have a look at every HTML tag that we have used in creating this web page:
<html>
This tag is kind of a wrapper for the whole web application, everything goes within this tag and finishes before this tag closes.
<head>
This tag is used to hold metadata about a web application. Things including the title of a web application, or importing javascript or CSS into a web application, are done within this tag.
<body>
This tag is used to display the contents on the screen when rendered by a web browser. Therefore, anything that has to be shown to the user on-screen goes within this tag.
<h1>, <h2>
There are several tags provided by HTML for text formatting. <h1> and <h2> are the two of those tags. These tags mean “heading 1” and “heading 2” respectively. There are several other tags like “heading 3” and “paragraph” that are abbreviated as <h3> and <p> respectively.
<br>
This tag is used for giving a line break between HTML elements.
<iframe>
This HTML tag is the main focus of this article. As discussed above, it is used to embed other documents within a web page. The attributes are essential for defining and editing the region created by <iframe> tag. The attributes used here are:
- width: sets the width of the iframe region.
- height: sets the height of the iframe region.
- src: contains the URL of the document that is to be embedded in the web page.
- frameborder: defines the border of the iframe region.
- allow: a set of attributes for setting values for options like auto-rotate, etc.
- allowfullscreen: defines if an iframe can be extended to take up full screen.
Output
This is how the web page should look when you code it exactly as above. So congratulations, you just coded your first web application having an embedded document in it.
HTML Iframe Output
You can further style your web applications using CSS stylesheet and add interactivity using JavaScript.
We hope this article helped you get familiar with the iframe HTML tag. We encourage you to go through further tutorials and learn CSS and JavaScript to become a full-fledged web developer.
Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!
Get Ahead of the Curve and Master HTML Today
Having gone through this tutorial covering the HTML tag, that is, the <iframe> tag. you may be wondering how and where to obtain the skills necessary to take advantage of HTML’s immense popularity.
You can enroll in a comprehensive Java Full Stack Developer Masters’ Program, which will help you become career-ready upon completion. To learn more, check out our Youtube video that provides a quick introduction to HTML and explains how to write a simple ‘Hello World’ program in HTML.
If you’re an aspiring web and mobile developer, HTML training will broaden your skills and career horizons. Do you have any questions for us? Please mention it in the comments section, and we'll have our experts answer it for you at the earliest.