w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



iframe src vs iframe srcdoc

src attribute versus srcdoc attribute

The difference between: src attribute and srcdoc attribute
<iframe src><iframe srcdoc>
1. Utility:
gives the content of the iframegives the content of the iframe
2. Value:
a URLa whole HTML document, where: doctype, title, meta are optional elements and the start tag of the next elements can be omitted: html, head, body
3. Observations:
the URL must be valid the syntax of the HTML document must be valid;
the quotes must be escaped and the ampersand must be doubly escaped both in prose as in URLs (as attribute values)
4. When both used:
src's role is to provide the fallback content (alternative content that will be loaded inside the iframe in case the srcdoc attribute is not supported) srcdoc ensures the content of the iframe

Video demonstration iframe: src versus srcdoc attribute

HTML5 iframe: src versus srcdoc Tutorial

min video details
00:05 video tutorial: the difference between src and srcdoc attributes
00:09 src attribute
00:10 src holds the url of the document to embed in page through iframe element
00:16 srcdoc attribute
00:16 srcdoc attribute holds the content of the document to embed in page through iframe element
00:25 in this case: doctype, meta, title elements are optional and the start ⁄end tag of the html, head and body elements can be omitted
00:36 the URL must be valid
00:39 the content of the document must be HTML5 valid
00:42 the quotes must be escaped;
the ampersands must be doubly escaped
01:04 both src and srcdoc attributes give the content of the iframe
01:06 when both attributes(src and srcdoc) are added on iframe element, srcdoc provides the content of the iframe while src provides the fallback content (when srcdoc is not supported in browser)
01:36 both attributes are supported in Google Chrome → srcdoc gives the content of the iframe
01:44 src gives the content of the iframe when srcdoc is not supported in browser
e.g. currently Firefox does not support the srcdoc attribute
iframe intro iframe browser display iframe parents - children iframe syntax iframe width, height attributesiframe name attributeiframe sandbox attributeiframe seamless attributeiframe src attributeiframe srcdoc attribute