title: What is the difference between srcdoc="..." and src="data:text/html,..." in an <iframe>?
body: <p>For example, which is the difference between these:</p>
  
  <pre><code>&lt;iframe srcdoc="&lt;p&gt;Some HTML&lt;/p&gt;"&gt;&lt;/iframe&gt;
  &lt;iframe src="data:text/html,&lt;p&gt;Some HTML&lt;/p&gt;"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/8Wf8L/" rel="noreferrer"><strong>Demo</strong></a></p>
  
  <p>And, in case they are exactly the same, why did HTML5 add <code>srcdoc</code> attribute?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Maybe I wasn't clear enough. I am not comparing <code>src</code> with <code>srcdoc</code>, but <code>src</code> using text/html data URI with <code>srcdoc</code>.</p>
  
  <p>Then, if the functionality chart is like this</p>
  
  <pre>
                     |  src attribute       |  srcdoc attribute
   --------------------------------------------------------------------
    URL              |  Yes                 |  No without using src (*)
    HTML content     |  Yes, using data URI |  Yes
  </pre>
  
  <p>why is <code>srcdoc</code> needed?</p>
  
  <hr>
  
  <p><strong>(*) Note</strong>:</p>
  
  <p>It seems <code>srcdoc</code> can be used to load a page by URL (<a href="http://jsfiddle.net/8Wf8L/3/" rel="noreferrer">Demo</a>), using a subiframe with <code>src</code>attribute:</p>
  
  <pre><code>&lt;iframe srcdoc="&lt;iframe src='http://microsoft.com'&gt;&lt;/iframe&gt;"&gt;&lt;/iframe&gt;
  </code></pre>