Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify the HTML content of the page to show in the
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 its 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 all modern browsers including Google Chrome, Microsoft Edge, Firefox, Safari, and Opera.
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 takes HTML code as a value and specifies the HTML content of the page to show in the iframe.
Syntax
Following is the syntax for using the srcdoc attribute with iframe −
<iframe srcdoc="HTML_content">
<p>Fallback content for browsers that don't support iframes</p>
</iframe>
The HTML_content is the HTML code that will be displayed inside the iframe. The fallback content inside the iframe tags is shown only if the browser doesn't support iframes.
Using srcdoc with Simple HTML Content
Example 1
Following example uses the srcdoc attribute with <iframe> tag to specify HTML content (an h2 element) to show in the iframe −
<!DOCTYPE html>
<html>
<head>
<title>HTML Content in Iframe using srcdoc</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>How to specify HTML content in iframe using srcdoc</h3>
<p>We can do it by using <b>srcdoc</b> attribute of iframe in HTML.</p>
<iframe srcdoc="<h2 style='color: blue; text-align: center;'>You can find any tutorial on TutorialsPoint</h2>">
<p>Browser does not support iframes.</p>
</iframe>
</body>
</html>
The output shows the HTML content (h2 element) displayed inside the iframe −
How to specify HTML content in iframe using srcdoc
We can do it by using srcdoc attribute of iframe in HTML.
[Iframe content: You can find any tutorial on TutorialsPoint (blue, centered)]
Creating Tables Inside Iframe
Example 2
Following example creates a table with data inside the iframe using the srcdoc attribute −
<!DOCTYPE html>
<html>
<head>
<title>Table in Iframe using srcdoc</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>HTML Table in Iframe</h3>
<p>We can display complex HTML content like tables using <b>srcdoc</b> attribute.</p>
<iframe srcdoc="<table border='2' style='width: 100%; border-collapse: collapse;'>
<caption style='font-weight: bold; margin-bottom: 10px;'>Web Technology Abbreviations</caption>
<tr style='background-color: #f0f0f0;'>
<th style='padding: 8px;'>Acronym</th>
<th style='padding: 8px;'>Full Form</th>
</tr>
<tr>
<td style='padding: 8px;'>HTML</td>
<td style='padding: 8px;'>Hypertext Markup Language</td>
</tr>
<tr>
<td style='padding: 8px;'>CSS</td>
<td style='padding: 8px;'>Cascading Style Sheets</td>
</tr>
</table>" width="400" height="150">
<p>Browser does not support iframes.</p>
</iframe>
</body>
</html>
The output displays a formatted table with web technology abbreviations inside the iframe −
HTML Table in Iframe
We can display complex HTML content like tables using srcdoc attribute.
[Iframe showing a bordered table:
Web Technology Abbreviations
Acronym | Full Form
HTML | Hypertext Markup Language
CSS | Cascading Style Sheets]
Styling Iframe with CSS
By default, browsers display the iframe with default styling. We can customize the appearance of the iframe using CSS properties like width, height, and border.
Example 3
Following example demonstrates how to style an iframe while using the srcdoc attribute −
<!DOCTYPE html>
<html>
<head>
<title>Styled Iframe with srcdoc</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Styled Iframe with HTML Content</h3>
<p>We can customize the iframe appearance using CSS properties.</p>
<iframe
srcdoc="<div style='background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; padding: 20px; text-align: center; font-family: Arial;'>
<h2>Welcome to TutorialsPoint!</h2>
<p>Learn web development with us</p>
</div>"
width="60%"
height="120"
style="border: 4px solid #2c3e50; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
<p>Browser does not support iframes.</p>
</iframe>
</body>
</html>
The output shows a styled iframe with a gradient background and custom border styling −
Styled Iframe with HTML Content
We can customize the iframe appearance using CSS properties.
[Rounded iframe with shadow border containing:
Welcome to TutorialsPoint! (white text on gradient background)
Learn web development with us]
srcdoc vs src Attribute
The iframe tag supports both srcdoc and src attributes with different purposes −
srcdoc Attribute
src Attribute
Contains HTML content directly in the attribute
References an external HTML file or URL
Content is embedded inline
Content is loaded from another source
Takes precedence over src if both are present
Ignored if srcdoc is also specified
Ideal for small, static HTML content
Better for loading complete web pages
Browser Compatibility and Fallback
The srcdoc attribute is supported in all modern browsers. However, it's good practice to provide fallback content between the opening and closing iframe tags. This content is displayed only if the browser doesn't support iframes or if the iframe fails to load.
Example − Proper Fallback Content
<!DOCTYPE html>
<html>
<head>
<title>Iframe with Fallback</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Iframe with Fallback Content</h3>
<iframe srcdoc="<h2 style='color: green;'>This content loads in modern browsers</h2>"
width="400" height="100">
<p style="color: red; font-weight: bold;">
Your browser does not support iframes.
<a href="https://www.tutorialspoint.com">Visit TutorialsPoint directly</a>
</p>
</iframe>
</body>
</html>
Modern browsers show the green heading, while older browsers display the fallback message with a link.
Conclusion
The srcdoc attribute of the <iframe> tag allows you to embed HTML content directly within an inline frame without requiring external files. It takes precedence over the src attribute and is ideal for displaying small, static HTML content with full styling control within your web pages.
Updated on: 2026-03-16T21:38:53+05:30
4K+ Views
Advertisements
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 its 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 all modern browsers including Google Chrome, Microsoft Edge, Firefox, Safari, and Opera.
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 takes HTML code as a value and specifies the HTML content of the page to show in the iframe.
Syntax
Following is the syntax for using the srcdoc attribute with iframe −
<iframe srcdoc="HTML_content"> <p>Fallback content for browsers that don't support iframes</p> </iframe>
The HTML_content is the HTML code that will be displayed inside the iframe. The fallback content inside the iframe tags is shown only if the browser doesn't support iframes.
Using srcdoc with Simple HTML Content
Example 1
Following example uses the srcdoc attribute with <iframe> tag to specify HTML content (an h2 element) to show in the iframe −
<!DOCTYPE html>
<html>
<head>
<title>HTML Content in Iframe using srcdoc</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>How to specify HTML content in iframe using srcdoc</h3>
<p>We can do it by using <b>srcdoc</b> attribute of iframe in HTML.</p>
<iframe srcdoc="<h2 style='color: blue; text-align: center;'>You can find any tutorial on TutorialsPoint</h2>">
<p>Browser does not support iframes.</p>
</iframe>
</body>
</html>
The output shows the HTML content (h2 element) displayed inside the iframe −
How to specify HTML content in iframe using srcdoc We can do it by using srcdoc attribute of iframe in HTML. [Iframe content: You can find any tutorial on TutorialsPoint (blue, centered)]
Creating Tables Inside Iframe
Example 2
Following example creates a table with data inside the iframe using the srcdoc attribute −
<!DOCTYPE html>
<html>
<head>
<title>Table in Iframe using srcdoc</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>HTML Table in Iframe</h3>
<p>We can display complex HTML content like tables using <b>srcdoc</b> attribute.</p>
<iframe srcdoc="<table border='2' style='width: 100%; border-collapse: collapse;'>
<caption style='font-weight: bold; margin-bottom: 10px;'>Web Technology Abbreviations</caption>
<tr style='background-color: #f0f0f0;'>
<th style='padding: 8px;'>Acronym</th>
<th style='padding: 8px;'>Full Form</th>
</tr>
<tr>
<td style='padding: 8px;'>HTML</td>
<td style='padding: 8px;'>Hypertext Markup Language</td>
</tr>
<tr>
<td style='padding: 8px;'>CSS</td>
<td style='padding: 8px;'>Cascading Style Sheets</td>
</tr>
</table>" width="400" height="150">
<p>Browser does not support iframes.</p>
</iframe>
</body>
</html>
The output displays a formatted table with web technology abbreviations inside the iframe −
HTML Table in Iframe We can display complex HTML content like tables using srcdoc attribute. [Iframe showing a bordered table: Web Technology Abbreviations Acronym | Full Form HTML | Hypertext Markup Language CSS | Cascading Style Sheets]
Styling Iframe with CSS
By default, browsers display the iframe with default styling. We can customize the appearance of the iframe using CSS properties like width, height, and border.
Example 3
Following example demonstrates how to style an iframe while using the srcdoc attribute −
<!DOCTYPE html>
<html>
<head>
<title>Styled Iframe with srcdoc</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Styled Iframe with HTML Content</h3>
<p>We can customize the iframe appearance using CSS properties.</p>
<iframe
srcdoc="<div style='background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; padding: 20px; text-align: center; font-family: Arial;'>
<h2>Welcome to TutorialsPoint!</h2>
<p>Learn web development with us</p>
</div>"
width="60%"
height="120"
style="border: 4px solid #2c3e50; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
<p>Browser does not support iframes.</p>
</iframe>
</body>
</html>
The output shows a styled iframe with a gradient background and custom border styling −
Styled Iframe with HTML Content We can customize the iframe appearance using CSS properties. [Rounded iframe with shadow border containing: Welcome to TutorialsPoint! (white text on gradient background) Learn web development with us]
srcdoc vs src Attribute
The iframe tag supports both srcdoc and src attributes with different purposes −
| srcdoc Attribute | src Attribute |
|---|---|
| Contains HTML content directly in the attribute | References an external HTML file or URL |
| Content is embedded inline | Content is loaded from another source |
| Takes precedence over src if both are present | Ignored if srcdoc is also specified |
| Ideal for small, static HTML content | Better for loading complete web pages |
Browser Compatibility and Fallback
The srcdoc attribute is supported in all modern browsers. However, it's good practice to provide fallback content between the opening and closing iframe tags. This content is displayed only if the browser doesn't support iframes or if the iframe fails to load.
Example − Proper Fallback Content
<!DOCTYPE html>
<html>
<head>
<title>Iframe with Fallback</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h3>Iframe with Fallback Content</h3>
<iframe srcdoc="<h2 style='color: green;'>This content loads in modern browsers</h2>"
width="400" height="100">
<p style="color: red; font-weight: bold;">
Your browser does not support iframes.
<a href="https://www.tutorialspoint.com">Visit TutorialsPoint directly</a>
</p>
</iframe>
</body>
</html>
Modern browsers show the green heading, while older browsers display the fallback message with a link.
Conclusion
The srcdoc attribute of the <iframe> tag allows you to embed HTML content directly within an inline frame without requiring external files. It takes precedence over the src attribute and is ideal for displaying small, static HTML content with full styling control within your web pages.
4K+ Views