How to create an inline frame using the tag inside an HTML page?</h1> <div class="qa_category"> <div id="divCategories"> <a href='https://www.tutorialspoint.com/articles/category/front-end-scripts' target='_blank'><span>Front End Scripts</span></a><a href='https://www.tutorialspoint.com/articles/category/Javascript' target='_blank'><span>Javascript</span></a><a href='https://www.tutorialspoint.com/articles/category/Web-Development' target='_blank'><span>Web Development</span></a></div> <hr/> <div id="adp_top_ads" style="text-align:center !important;overflow: hidden; max-height:99px;min-height:99px"></div> <script> var adPos = document.getElementById('adp_top_ads'); var ad_id_720 = "8014640d-fd34-4b2e-9b1b-cc67234a2325"; var ad_id_650 = "2d1bb2c4-eb72-471d-9c80-1bf5514728c1"; var ad_id_300 = "df94a1a9-ae2f-432d-9a92-d93823ff4503"; var width = window.innerWidth; var ad_id = ad_id_720; if( width <= 768 ){ ad_id = ad_id_300; adPos.style.minHeight = "250px"; adPos.style.maxHeight = "250px"; }else if( width <= 1435 ){ ad_id = ad_id_650; } adPos.innerHTML = '<div id="' + ad_id + '" class="_ap_apex_ad"></div>'; var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd(ad_id); }); </script> </div> <p><p>The <iframe> tag, which is also known as inline frame which helps us load external objects inside another document on a web page. <iframe> is like a mini web browser within a web page, which is allowing us to include content from other sources into our web pages. They are commonly used to embed Google Maps in to the contact page of an website or ad sense or to add a Youtube videos to a webpage, which help us to hold the user to our web page.</p><h3>Syntax</h3> <p>The basic syntax for adding an iframe to a web page can be given with −</p> <pre class="result notranslate"><iframe src="URL"></iframe></pre> <p>The <b>src</b> attribute of <iframe> tag expects a URL that eventually point to the location of external object or the web page we want to embed.</p> <p>This particular code below will embed an Youtube video of tutorialspoint in the current webpage.</p> <h3>Example</h3> <pre class="demo-code notranslate language-html" data-lang="html" data-index="7" id="7" tabindex="0"><div class="execute"></div><div class="code-mirror language-html" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Creating an in line frame in HTML web page <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Welcome to Tutorialspoint <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Creating a simple inline frame (iframe)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Document content goes here...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.youtube.com/embed/y0aCH5pimmg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div></pre> <p>As we have seen above that using the “src” attribute we were able to embed the video into the web page. Apart from the global attributes of HTML there are other attribute that help us in create a seamless iframe.</p> <h2>Adjusting width and height of iframe</h2> <p>The default width of an iframe is 300 CSS pixels and height is 150 pixels. In order change these dimension we make use of “width” and “height” attribute. By default, attribute values are set in CSS pixels (Apart from CSS pixels percentages can also be used to set the dimension of an iframe).</p> <h3>Example</h3><p>To understand this better, let us consider the example below.<br></p> <pre class="demo-code notranslate language-html" data-lang="html" data-index="8" id="8" tabindex="0"><div class="execute"></div><div class="code-mirror language-html" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Creating an in line frame in HTML web page <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Welcome to Tutorialspoint <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Creating a simple inline frame (iframe) <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Document content goes here...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.youtube.com/embed/y0aCH5pimmg<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>300<span class="token punctuation">'</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>600<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div></pre> <h3>Example</h3><p>Following the example, we are using percentages to set the height and width of an iframe.</p> <pre class="demo-code notranslate language-html" data-lang="html" data-index="9" id="9" tabindex="0"><div class="execute"></div><div class="code-mirror language-html" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Creating an in line frame in HTML web page <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Welcome to Tutorialspoint <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Creating a simple inline frame (iframe) <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Document content goes here...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.youtube.com/embed/y0aCH5pimmg<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>50%<span class="token punctuation">'</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>70%<span class="token punctuation">'</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div></pre> <p><span style="color: rgba(0, 0, 0, 0.87); font-family: Heebo, sans-serif; font-size: 20px; text-align: left;">Example</span><br></p><p>CSS styling also be used to set the height and width of an iframe.<br></p> <pre class="demo-code notranslate language-html" data-lang="html" data-index="10" id="10" tabindex="0"><div class="execute"></div><div class="code-mirror language-html" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Creating an in line frame in HTML web page <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Welcome to Tutorialspoint <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Creating a simple inline frame (iframe) <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Document content goes here...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.youtube.com/embed/y0aCH5pimmg<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> height: 300px; width: 600px;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div></pre> <p>Getting Rid of <iframe> border</p><h3>Example</h3><p> </p> <p>An <iframe> come with a default border around it. In order to get rid or remove the border the best practice is to use border property of CSS styling, as shown below −</p> <pre class="demo-code notranslate language-html" data-lang="html" data-index="11" id="11" tabindex="0"><div class="execute"></div><div class="code-mirror language-html" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Creating an in line frame in HTML web page <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Welcome to Tutorialspoint <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Creating a simple inline frame (iframe) <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Document content goes here...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.youtube.com/embed/y0aCH5pimmg<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> height: 300px; width: 600px; border:none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div></pre> <h3>Example</h3><p>In order to understand this better, let’s apply a border of our choice and render the iframe.</p> <pre class="demo-code notranslate language-html" data-lang="html" data-index="12" id="12" tabindex="0"><div class="execute"></div><div class="code-mirror language-html" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Creating an in line frame in HTML web page <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Welcome to Tutorialspoint <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Creating a simple inline frame (iframe) <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Document content goes here...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.youtube.com/embed/y0aCH5pimmg<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> height: 300px; width: 600px; border:5px solid orange <span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div></pre> <p><b>Note −</b> Earlier “frameborder” attribute was used to set the border of an iframe. This attribute has been deprecated and no longer supported by web browsers.</p> <h2><iframe> as Link Target</h2> <p>To set a link to open inside an iframe we use the “target” attribute of <a> or <form> or <base> elements.</p> <p>The link target attribute you specify must refer to the iframe’s name attribute (At any given point both the values of “name” and “target” of both the element should be identical). When a link with a target attribute with that name as value is clicked, the linked resource will open in that iframe.</p><h3>Example</h3><p><span style="font-weight: var(--bs-body-font-weight);">To have better idea of this, let’s try an example −</span><br></p> <pre class="demo-code notranslate language-html" data-lang="html" data-index="13" id="13" tabindex="0"><div class="execute"></div><div class="code-mirror language-html" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Creating an in line frame in HTML web page <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span> iframe { width: 100%; height: 250px; } <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Welcome to Tutorialspoint <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Creating a simple inline frame (iframe) <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.tutorialspoint.com/market/courses<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myFrame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Click here to open courses at Tutorialspoint <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Document content goes here...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.tutorialspoint.com/html/menu.htm<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myFrame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </div><div class="output-wrapper"><div class="console-close"></div><div class="code-output"></div></div></pre> <p>The example above shows an <iframe> with name attribute set to ‘myWebFrame’ and the <a> target attribute set to ‘myWebFrame’. Once we click the link it opens the web URL in href attribute of <a> tag inside the iframe.</p> <h2>Security concerns of an iframe</h2> <p>Though iframe have been around for a long time and widely used, however, there are several security risks that could open doors for an attacker.</p> <p>We will list down few security threats that one need to be aware before using an iframe</p> <ul class="list"> <li>iframe injection</li> <li>cross-frame scripting</li> <li>Clickjacking</li> <li>iframe phishing</li> <li>Dialog box threats</li> </ul> <h3>Browsers that support iframe</h3> <table class="table table-bordered"> <tbody><tr> <td>Web Browsers</td> <td></td> </tr> <tr> <td>Google Chrome</td> <td>Fully Supported</td> </tr> <tr> <td>Edge</td> <td>Fully Supported<br></td> </tr><tr><td>Firefox</td><td>Supported ( but has bug that prevents iframes from loading if the iframe element was hidden when added to the page.)<br></td></tr> <tr> <td>Internet Explorer</td> <td>Fully Supported</td> </tr> <tr> <td>Opera</td> <td>Fully Supported</td> </tr> <tr> <td>Safari</td> <td>Supported ( but has bug that prevents iframes from loading if the iframe element was hidden when added to the page.)</td> </tr> <tr> <td>Mobile Browsers</td> <td></td> </tr> <tr> <td>Chrome Andriod</td> <td>Fully Supported</td> </tr> <tr> <td>Firefox Andriod</td> <td>Supported (The resize CSS property doesn't have any effect on this element due to bug)</td> </tr> <tr> <td>Opera Andriod</td> <td>Fully Supported</td> </tr> <tr> <td>Safari iOS</td> <td>Supported ( but has bug that prevents iframes from loading if the iframe element was hidden when added to the page.)</td> </tr> <tr> <td>Samsung Internet</td> <td>Fully Supported</td> </tr> <tr> <td>Webview Andriod</td> <td>Fully Supported</td> </tr> </tbody></table></p> <div class="clear"></div> <div class="qa_widget mui-panel prof-view-artcle"> <div class=""> <a href='https://www.tutorialspoint.com/authors/shakira-thasleem' target='_blank' title="Shakira Thasleem" class="mui--pull-left"> <img class="profile-img1" src='https://www.tutorialspoint.com/assets/profiles/502799/profile/60_2216785-1660721262.png' alt='Shakira Thasleem'/> </a> <div class="qa_author"> <a href='https://www.tutorialspoint.com/authors/shakira-thasleem' target='_blank'><span>Shakira Thasleem</span></a> <p class="prof-desigtn mb-0"><b></b></p> </div> </div> <div class="clear"></div> <div class="library-page-bottom-nav" id="divStats" data-qid="3202" data-quid = "502799" style="margin-block: 1rem !important;padding-top: 18px;align-items: center; border-top: 1px dashed #ccc;font-size: 14px;"> <div><span class="date">Updated on: </span>18-Aug-2022</div> <div class="flex-group"> <div class="uthor-prof-social-icon mt-2"> <span class="share-options"> <a onclick="copyToClipboard();" title="Copy To Clipboard" class=""><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M301.148 394.702l-79.2 79.19c-50.778 50.799-133.037 50.824-183.84 0-50.799-50.778-50.824-133.037 0-183.84l79.19-79.2a132.833 132.833 0 0 1 3.532-3.403c7.55-7.005 19.795-2.004 20.208 8.286.193 4.807.598 9.607 1.216 14.384.481 3.717-.746 7.447-3.397 10.096-16.48 16.469-75.142 75.128-75.3 75.286-36.738 36.759-36.731 96.188 0 132.94 36.759 36.738 96.188 36.731 132.94 0l79.2-79.2.36-.36c36.301-36.672 36.14-96.07-.37-132.58-8.214-8.214-17.577-14.58-27.585-19.109-4.566-2.066-7.426-6.667-7.134-11.67a62.197 62.197 0 0 1 2.826-15.259c2.103-6.601 9.531-9.961 15.919-7.28 15.073 6.324 29.187 15.62 41.435 27.868 50.688 50.689 50.679 133.17 0 183.851zm-90.296-93.554c12.248 12.248 26.362 21.544 41.435 27.868 6.388 2.68 13.816-.68 15.919-7.28a62.197 62.197 0 0 0 2.826-15.259c.292-5.003-2.569-9.604-7.134-11.67-10.008-4.528-19.371-10.894-27.585-19.109-36.51-36.51-36.671-95.908-.37-132.58l.36-.36 79.2-79.2c36.752-36.731 96.181-36.738 132.94 0 36.731 36.752 36.738 96.181 0 132.94-.157.157-58.819 58.817-75.3 75.286-2.651 2.65-3.878 6.379-3.397 10.096a163.156 163.156 0 0 1 1.216 14.384c.413 10.291 12.659 15.291 20.208 8.286a131.324 131.324 0 0 0 3.532-3.403l79.19-79.2c50.824-50.803 50.799-133.062 0-183.84-50.802-50.824-133.062-50.799-183.84 0l-79.2 79.19c-50.679 50.682-50.688 133.163 0 183.851z"/></svg></a> <a id="ancFBShare" onClick="window.open('http://www.facebook.com/sharer/sharer.php?u=https://www.tutorialspoint.com/How-to-create-an-inline-frame-using-the-iframe-tag-inside-an-HTML-page&t=How to create an inline frame using the tag inside an HTML page?&description=How to create an inline frame using the tag inside an HTML page - The tag, which is also known as inline frame which helps us load external objects inside another document on a web page. is like a mini web browser within a web page, which is allowing us to include content from other sources into our web pages. They are commonly used to embed Goog','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)" title="Share on Facebook"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg></a> <a onClick="window.open('http://www.linkedin.com/shareArticle?url=https://www.tutorialspoint.com/How-to-create-an-inline-frame-using-the-iframe-tag-inside-an-HTML-page&title=How to create an inline frame using the tag inside an HTML page?&summary=How to create an inline frame using the tag inside an HTML page - The tag, which is also known as inline frame which helps us load external objects inside another document on a web page. is like a mini web browser within a web page, which is allowing us to include content from other sources into our web pages. They are commonly used to embed Goog','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)" title="Share on LinkedIn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg></a> <a onClick="window.open('http://www.twitter.com/intent/tweet?url=https://www.tutorialspoint.com/How-to-create-an-inline-frame-using-the-iframe-tag-inside-an-HTML-page&text=How to create an inline frame using the tag inside an HTML page - The tag, which is also known as inline frame which helps us load external objects inside another document on a web page. is like a mini web browser within a web page, which is allowing us to include content from other sources into our web pages. They are commonly used to embed Goog','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)" title="Share on Twitter"><svg fill="black" xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></a> </span> </div> <div> <p class="views-count" title="Article Views"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M288 288a64 64 0 0 0 0-128c-1 0-1.88.24-2.85.29a47.5 47.5 0 0 1-60.86 60.86c0 1-.29 1.88-.29 2.85a64 64 0 0 0 64 64zm284.52-46.6C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 96a128 128 0 1 1-128 128A128.14 128.14 0 0 1 288 96zm0 320c-107.36 0-205.46-61.31-256-160a294.78 294.78 0 0 1 129.78-129.33C140.91 153.69 128 187.17 128 224a160 160 0 0 0 320 0c0-36.83-12.91-70.31-33.78-97.33A294.78 294.78 0 0 1 544 256c-50.53 98.69-148.64 160-256 160z"/></svg> <span id="spanViews">0 Views</span></p> </div> </div> </div> </div> <div class="related-articles"> <ul class="toc chapters"> <li class="heading big-font" <i class="fal fa-money-check-edit me-2"></i> Related Articles</li><li><a href="https://www.tutorialspoint.com/How-to-include-inline-JavaScript-inside-an-HTML-page"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to include inline JavaScript inside an HTML page?</a></li> <li><a href="https://www.tutorialspoint.com/How-to-use-an-HTML-tag-inside-HTML-table"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to use an HTML tag inside HTML table?</a></li> <li><a href="https://www.tutorialspoint.com/How-to-include-an-external-JavaScript-inside-an-HTML-page"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to include an external JavaScript inside an HTML page?</a></li> <li><a href="https://www.tutorialspoint.com/How-to-use-Meta-Tag-to-redirect-an-HTML-page"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to use Meta Tag to redirect an HTML page?</a></li> <li><a href="https://www.tutorialspoint.com/how-to-create-inline-frame-using-html5"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to create inline frame using HTML5</a></li> <li><a href="https://www.tutorialspoint.com/How-to-use-the-style-tag-to-define-style-information-for-an-HTML-page"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to use the tag to define style information for an HTML page?</a></li> <li><a href="https://www.tutorialspoint.com/How-to-use-the-base-tag-to-define-the-base-URL-for-an-HTML-page"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to use the tag to define the base URL for an HTML page?</a></li> <li><a href="https://www.tutorialspoint.com/How-to-add-an-inline-layer-in-HTML"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to add an inline layer in HTML?</a></li> <li><a href="https://www.tutorialspoint.com/How-to-write-inline-JavaScript-code-in-HTML-page"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to write inline JavaScript code in HTML page?</a></li> <li><a href="https://www.tutorialspoint.com/How-to-use-title-tag-in-HTML-Page"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to use title tag in HTML Page?</a></li> <li><a href="https://www.tutorialspoint.com/how-to-divide-html-page-into-four-parts-using-frame"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to divide HTML page into four parts using frame?</a></li> <li><a href="https://www.tutorialspoint.com/how-to-draw-a-circle-using-an-svg-tag-in-html"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to draw a circle using an SVG tag in html?</a></li> <li><a href="https://www.tutorialspoint.com/how-to-find-an-element-using-the-attribute-html-tag-name-in-selenium"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to find an element using the attribute “HTML tag name” in Selenium?</a></li> <li><a href="https://www.tutorialspoint.com/how-to-redirect-from-an-html-page"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to redirect from an HTML page?</a></li> <li><a href="https://www.tutorialspoint.com/How-to-fetch-nth-div-from-an-HTML-page-using-jQuery"><svg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'><path d='M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z'/></svg>How to fetch nth div from an HTML page using jQuery?</a></li> </ul></ul></div> <div class="library-cta"> <div> <h5 class="library-cta__title">Kickstart Your <span class="text-yellow-400">Career</span></h5> <p>Get certified by completing the course</p> <a target="_blank" href="https://www.tutorialspoint.com/latest/certifications" class="library-cta__button button button--yellow">Get Started</a> </div> <img src="/static/images/library-cta.svg" alt=""> </div> <div class="library-page-bottom-nav "> <button class="button button--blue" id="print-page"> <svg fill="white" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M112 160V64c0-8.8 7.2-16 16-16H357.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c3 3 4.7 7.1 4.7 11.3V160h48V90.5c0-17-6.7-33.3-18.7-45.3L402.7 18.7C390.7 6.7 374.5 0 357.5 0H128C92.7 0 64 28.7 64 64v96h48zm16 208H384v96H128V368zm-16-48c-17.7 0-32 14.3-32 32H48V256c0-8.8 7.2-16 16-16H448c8.8 0 16 7.2 16 16v96H432c0-17.7-14.3-32-32-32H112zm320 80h48c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64V368c0 17.7 14.3 32 32 32H80v80c0 17.7 14.3 32 32 32H400c17.7 0 32-14.3 32-32V400z"/></svg> Print Page </button> <div class="flex-group"> <a href="/articles/index.php"> <button class="button button--neutral"> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M1.03117 8.48836C0.64065 8.09783 0.64065 7.46467 1.03117 7.07414L7.39514 0.710183C7.78566 0.319658 8.41883 0.319658 8.80935 0.710183C9.19987 1.10071 9.19987 1.73387 8.80935 2.1244L3.15249 7.78125L8.80935 13.4381C9.19987 13.8286 9.19987 14.4618 8.80935 14.8523C8.41882 15.2428 7.78566 15.2428 7.39513 14.8523L1.03117 8.48836ZM3.12109 8.78125L1.73828 8.78125L1.73828 6.78125L3.12109 6.78125L3.12109 8.78125Z" fill="black" /></svg> Previous </button> </a> <a href="https://www.tutorialspoint.com/How-to-use-the-style-tag-to-define-style-information-for-an-HTML-page"> <button class="button ">Next <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M8.87117 8.48836C9.26169 8.09783 9.26169 7.46467 8.87117 7.07414L2.50721 0.710183C2.11668 0.319658 1.48352 0.319658 1.09299 0.710183C0.70247 1.10071 0.70247 1.73387 1.09299 2.1244L6.74985 7.78125L1.093 13.4381C0.702471 13.8286 0.702471 14.4618 1.093 14.8523C1.48352 15.2428 2.11668 15.2428 2.50721 14.8523L8.87117 8.48836ZM6.78125 8.78125L8.16406 8.78125L8.16406 6.78125L6.78125 6.78125L6.78125 8.78125Z" fill="white" /></svg> </button> </a> </div> </div> <div class="error-success" id="error-success" style="display: none;"></div> <div class="error-warning" id="error-warning"></div> <div class="bottom-library-ads mt"> <div class="google-bottom-ads" id="google-bottom-ads"> <div>Advertisements</div> <div> <div id="adp_bottom_ads"></div> <script> var adPos = document.getElementById('adp_bottom_ads'); var mobile_ad_id = "6d621d7e-9531-4f26-810f-68af67dc6366"; var desktop_ad_id = "4951d1d6-24d4-4a31-afb7-2c22c489eae1"; var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { var ad_id = window.innerWidth <= 768 ? mobile_ad_id : desktop_ad_id; adPos.innerHTML = '<div id="' + ad_id + '" class="_ap_apex_ad"></div>'; adpushup.triggerAd(ad_id); }); </script> </div> </div> </div> </div> <div> <div class="data-sticky" id="google-right-ads"> <div class="google-right-ad" style="margin: 0px auto !important;margin-top:5px;min-height:280px!important"> <div id="2557b9b8-4c1f-4586-a953-f123dbd2ed8e" class="_ap_apex_ad"> <script> if( window.innerWidth > 768 ){ var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd("2557b9b8-4c1f-4586-a953-f123dbd2ed8e"); }); } </script> </div> </div> <div class="google-right-ad" style="margin-top:16px;min-height:280px!important"> <div id="b078e6a3-e1b7-40fe-b690-11ac441ad2d5" class="_ap_apex_ad"> <script> if( window.innerWidth > 768 ){ var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd("b078e6a3-e1b7-40fe-b690-11ac441ad2d5"); }); } </script> </div> </div> <div class="google-right-ad" style="margin-top:16px;margin-bottom:15px;min-height:600px!important"> <div id="8f8814c2-d64c-4d26-9cb9-543653c0b48f" class="_ap_apex_ad"> <script> if( window.innerWidth > 768 ){ var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd("8f8814c2-d64c-4d26-9cb9-543653c0b48f"); }); } </script> </div> </div> </div> </div> </div> </div> </main> <footer class="footer bg-neutral-800"> <div class="footermain container flow"> <div class="flow" style="align-items: flex-start;"> <img class="footerlogo" src="/static/images/logo-footer.svg" alt="tutorials point logo"> <p class="">Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p> <div class="flex-group"> <button class="button-reset"> <a href="https://play.google.com/store/apps/details?id=com.tutorialspoint.onlineviewer" target="_blank" title="Download Android App"><img src="/static/images/googleplay.svg" alt="Download Android App"></a> </button> <button class="button-reset"> <a href="https://itunes.apple.com/us/app/tutorials-point/id914891263?ls=1&mt=8" target="_blank" title="Download IOS App"><img src="/static/images/appstore.svg" alt="Download IOS App"></a> </button> </div> </div> <div class="footer-nav"> <div> <h5 class="fs-600 fw-600">About us</h5> <ul class="footer-navlist"> <li class="footer-navitem"><a href="/about/index.htm" title="Company"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /> </svg>Company</a></li> <li class="footer-nav__item"><a href="/about/about_team.htm" title="Our Team"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Our Team</a></li> <li class="footer-nav__item"><a href="/about/about_careers.htm" title="Careers"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /> </svg>Careers</a></li> <li class="footer-nav__item"><a href="/job_search.php" title="Jobs"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Jobs</a></li> <li class="footer-navitem"><a href="/market/teach-with-us.jsp" title="Become a Teacher"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Become a Teacher</a></li> <li class="footer-navitem"><a href="/market/affiliates.jsp" title="Affiliates"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Affiliates</a></li> <li class="footer-nav__item"><a href="/about/contact_us.htm" title="Contact us"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Contact Us</a></li> </ul> </div> <div> <h5 class="fs-600 fw-600">Terms</h5> <ul class="footer-navlist"> <li class="footer-navitem"><a href="/about/about_terms_of_use.htm" title="Terms of Use"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Terms of use</a></li> <li class="footer-nav__item"><a href="/about/about_privacy.htm" title="Privacy Policy"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Privacy Policy</a></li> <li class="footer-nav__item"><a href="/about/return_refund_policy.htm" title="Refund Policy"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /> </svg>Refund Policy</a></li> <li class="footer-nav__item"><a href="/about/about_cookies.htm" title="Cookies Policy"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /> </svg>Cookies Policy</a></li> <li class="footer-navitem"><a href="/about/faq.htm" title="FAQ's"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>FAQ's</a></li> </ul> </div> <div> <h5 class="fs-600 fw-600">Our Products</h5> <ul class="footer-navlist"> <li class="footer-navitem"><a href="/tutorialslibrary.htm" title="Tutorials Library"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Free Library</a></li> <li class="footer-navitem"><a href="/articles/index.php" title="Articles"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Articles</a></li> <li class="footer-navitem"><a href="/codingground.htm" title="Coding Ground"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>Coding Ground</a></li> <li class="footer-navitem"><a href="/latest/certifications" title="Certifications"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /> </svg>Certifications</a></li> <li class="footer-navitem"><a href="/latest/courses" title="Video Courses"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /> </svg>Courses</a></li> <li class="footer-navitem"><a href="/latest/ebooks" title="e-Books"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg>eBooks</a></li> <li class="footer-navitem"><a href="/business/index.asp" title="Corporate Training"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg> Corporate Training</a></li> <li class="footer-navitem"><a href="/free_web_graphics.htm" title="Corporate Training"><svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.52246 5.06689L6.08496 8.50439L2.64746 5.06689" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" /></svg> Free Web Graphics</a></li> </ul> </div> <div> <h5 class="fs-600 fw-600">Contact Us</h5> <ul class="footer-navlist contact"> <li class="contactitem"> <svg fill="white" xmlns="http://www.w3.org/2000/svg" height="1.25em" viewBox="0 0 384 512"><path d="M336 192c0-79.5-64.5-144-144-144S48 112.5 48 192c0 12.4 4.5 31.6 15.3 57.2c10.5 24.8 25.4 52.2 42.5 79.9c28.5 46.2 61.5 90.8 86.2 122.6c24.8-31.8 57.8-76.4 86.2-122.6c17.1-27.7 32-55.1 42.5-79.9C331.5 223.6 336 204.4 336 192zm48 0c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192zm-160 0a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-112 0a80 80 0 1 1 160 0 80 80 0 1 1 -160 0z"/></svg> Tutorials Point India Private Limited, Incor9 Building, Kavuri Hills, Madhapur, Hyderabad, Telangana - 500081, INDIA </li> </ul> <ul class="sociallist"> <li> <a class="sociallink" target="_blank" href="https://www.facebook.com/tutorialspointindia"> <svg fill="white" xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg> </a> </li> <li> <a class="social__link" target="_blank" href="https://www.instagram.com/tutorialspoint_/"> <svg fill="white" xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg> </a> </li> <li> <a class="social__link" target="_blank" href="https://twitter.com/tutorialspoint"> <svg fill="white" xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg> </a> </a> </li> <li> <a class="social__link" target="_blank" href="https://www.youtube.com/channel/UCVLbzhxVTiTLiVKeGV7WEBg"> <svg fill="white" xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg> </a> </li> <li> <a class="social__link" target="_blank" href="https://www.linkedin.com/company/tutorialspoint/"> <svg fill="white" xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg> </a> </li> </ul> </div> </div> </div> <div class="footerlegal-wrapper "> <div class="footerlegal ff-nunito"> <p class="footer__copyright ">© Copyright 2023. All Rights Reserved.</p> </div> </div> </footer> <script async src="/static/js/lib-script.js?v7.041"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-E4SW76VCNP"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-E4SW76VCNP'); </script> </body> </html>