The HTML <iframe> tag defines an inline frame. The inline frame is used to embed another document within the HTML document.
Syntax:
<iframe src="url" title="description"></iframe> Example:
An <iframe> in its simplest use. Embedding another document within the current HTML document:
<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.lenastanley.com/" title="lena design">
</iframe>
</body>
</html>Output:
Attributes:
allowfullscreen (value- true/ false) – the <iframe> element can activate fullscreen mode by calling the requestFullscreen() method (true).
allowpaymentrequest (value- true/false) – can be allowed to invoke the Payment Request API (true).
height (value- px) – defines the height of an (default height is 150 px).
Syntax:
<iframe height="pixels"> Example:
<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.lenastanley.com/" height="300" title="lena design">
</iframe>
</body>
</html>Output:
An with a specified height of 300 px:
loading (value- eager, lazy) – defines whether a browser should load an iframe immediately or defer the loading of iframes until some conditions are met.
name (value- text) – defines the name of an <iframe>.
referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send when fetching the iframe.
sandbox (value- allow-forms/ allow-pointer-lock/ allow-popups/ allow-same-origin/ allow-scripts/ allow-top-navigation) – Enables an extra set of restrictions for the content in an <iframe>.
src (value- URL) – defines the address of the document to embed in the <iframe>.
srcdoc (value- HTML_code) – defines the HTML content of the page to show in the <iframe>.
width (value- px) – defines the width of an (default width is 300 px).
Syntax:
<iframe width="px"> Example:
<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.lenastanley.com/" width="640" title="lena design">
</iframe>
</body>
</html>
Output:
An <iframe> with a specified width of 640 px:
You can add the style attribute and use the CSS height and width properties, and remove/add the <iframe> border:
<!DOCTYPE html>
<html>
<body>
<p>An iframe with a thick black borde</p>
<iframe src="https://www.lenastanley.com/" width="100%" height="300" style="border:5px solid black;">
</iframe>
<p>An iframe with no borders:</p>
<iframe src="https://www.lenastanley.com/" width="100%" height="300" style="border:none;">
</iframe>
</body>
</html>Output:
An iframe with a thick black border:
An iframe with no borders:
Enjoy coding!