HTML <iframe> stand for HTML inline frame element, it’s one of the most common way for us to embedded others HTML website into our current website.
Create Your First Iframe
To create an inline frame element, we will write it like <iframe src="URL"></iframe>. The URL should be the change to the web URL you would like to embed into your current page. Let me show you an example at below.
<iframe src="https://blog.jorcus.com/shop/"></iframe>At the code above, you might see the shop page display on this page because I change the URL to my shop page. If the iframe is too big and you want to set the iframe width and height, you can specify the width and height of it with the attributes. At here, I will show you my shop page with 300 pixels width and height to this page with the use of inline frame element <iframe>
<iframe width="300" height="300" src="https://blog.jorcus.com/shop/"></iframe>Iframe Title
You can also use title attribute to label the content.
<iframe title="Jorcus Shop" src="https://blog.jorcus.com/shop/"></iframe>Remove The Iframe Border
If you want to remove the iframe border, you can customize it with CSS. At here, we set the border property as none.
<iframe title="Jorcus Shop" src="https://blog.jorcus.com/shop/" style="border:none;"></iframe>When To Use Iframe
If you need to embed an existing HTML page to current page without building all the document from scratch again, then you can use iframe to speed up your time. However, please note that the memory usage might be increased as well.
In theoretical you can use iframe as much as you want on your website, however it might consume a lot of memory and computing resources because the iframe will include all the documents from the URL. The more iframe you used, the higher resources and more documents going to include to your site. Please check the performance and memory before you using it.