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.