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!