How to specify the HTML content of the page to show in the

HTML Web Development Front End Technology

In this article, we need to display the HTML content of the page in an iframe; A browser window divided as a separate page. We can achieve this task using the <iframe> tag and it’s srcdoc attribute.

HTML <iframe> tag

The <iframe> tag in HTML specifies an inline frame. This inline frame is used to embed another document within the current HTML document. This tag is supported by every browser such as Google Chrome, Microsoft edge/ internet explorer, Firefox, safari, and opera, etc.

The “srcdoc” attribute of the <iframe> tag is used to specify the HTML content of the page to be displayed in the <iframe>. This attribute will take HTML_code as a value and specifies the HTML content of the page to show in the <iframe>.

Example 1

In the following example, we have used "srcdoc" attribute with <iframe> tag to specify the HTML content of the page(<h2> element) to show in the <iframe> in HTML.


<!DOCTYPE html>
<html>
<head>
   <title>
      How to specify the HTML content of the page to show in the "iframe" in HTML?
   </title>
</head>
<body>
   <h3>How to specify the HTML content of the page to show in the "iframe" in HTML?</h3>
   <p>We can do it by using <b>srcdoc</b> attribute of iframe in HTML.</p>
   <iframe srcdoc="<h2>You can find any tutorial on tutorialspoint</h2>">
      <p>Browser does not support iframes.</p>
   </iframe>
</body>
</html>

As we can see in the output, the HTML content in the document (<h2> element) is displayed in the <iframe>.

Example 2

Following is another example for HTML Iframes, in this, we have created a table with in the iframe.


<!DOCTYPE html>
<html>
<head>
   <title>
      How to specify the HTML content of the page to show in the "iframe" in HTML?
   </title>
</head>
<body>
   <h3>How to specify the HTML content of the page to show in the "iframe" in HTML?</h3>
   <p>We can do it by using <b>srcdoc</b> attribute of iframe in HTML.</p>
   <iframe srcdoc="<table border = 3>
         <caption> Abbreviations </caption>
         <tr>
            <th> HTML </th>
            <th> CSS </th>
         </tr>
         <tr>
            <td> Hypertext markup language</td>
            <td> Cascading style sheet </td>
         </tr>
      </table>">
      <p>Browser does not support iframes.</p>
   </iframe>
</body>
</html>

As we can see in the output, the HTML content in the document (HTML table) is displayed in the <iframe>.

Example 3

By default, all the browsers will be displaying the <iframe> as default values. We can change the style of <iframe> by using CSS.

In the example below,

We have changed the style of <iframe> by changing its width, height, and border with CSS.
We have used "srcdoc" attribute with <iframe> tag to specify the HTML content of the page (<div> element) to show in the <iframe> in HTML.


<!DOCTYPE html>
<html>
<head>
   <title>
      How to specify the HTML content of the page to show in the "iframe" in HTML?
   </title>
</head>
<body>
   <h3>How to specify the HTML content of the page to show in the "iframe" in HTML?</h3>
   <p>We can do it by using <b>srcdoc</b> attribute of iframe in HTML.</p>
   <iframe srcdoc="<div> Hello Disha</div>" width="50%" height="100" style="border:3px solid green;">
     <p>Browser does not support iframes.</p>
   </iframe>
</body>
</html>

As we can see in the output, the HTML content in the document (<div> element) is displayed in the <iframe> and also we have changed the style of the <iframe> with CSS.

Nikhilesh Aleti

Updated on: 08-Nov-2022

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started