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
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.