In this section, we will see what srcdoc attribute is and how to use it.
What is srcdoc Attribute in HTML <iframe> Tag?
The srcdoc attribute is used to set the HTML content that we want to see in the body of the target <iframe> element.
Note that we said the HTML content and not the URL address of that content!
This means if the content of the target document is, for example: <p> Hello Word!</p>
Then the value of the `srcdoc` should be: “<p> Hello World! </p>”
As you can see, this is the content itself and not its URL address.
Browsers then read this content and render the result in the body of the target <iframe> element.
Note: if both src and srcdoc attributes are presented in an <iframe> element, browsers will ignore the value of the src attribute and only load the content of the srcdoc attribute instead.
HTML srcdoc Attribute in <iframe> Tag Syntax:
<iframe srcdoc = “HTML content”> </iframe>
Example: using srcdoc attribute in HTML <iframe> tag
See the Pen using srcdoc attribute in HTML <iframe> tag by Omid Dehghan (@odehghan) on CodePen.
As you can see in this example, the value of the src attribute is ignored and instead only the value of the srcdoc attribute is rendered on the body of the <iframe> element.