HTML

HTML Iframes

The HTML iframe embeds external HTML content within the designated area of the current webpage. These include videos, maps, or a webpage.

HTML Iframe Tag

The <iframe> tag is used to specify the URL of the external content that is embedded inside the HTML document. The tag allows the developers to integrate external resources into the document seamlessly.

Pro Tips:

Always style the <iframe> with CSS. Example
Always add a title attribute for the HTML iframe. It helps the reader know what the content is about.

<iframe
    src="https://learning-axis.com/" 
    width="600" height="400"
    title="HTML Iframe">
</iframe>

HTML Iframe Attributes

Height and Width: Height and width attributes specify the iframe’s size.

<iframe
    src="https://learning-axis.com/" 
    width="300" height="200">
</iframe>

Name:The name attribute is used to specify the name of the iframe.

<iframe
    src="https://learning-axis.com/" 
    name="HTML Iframe Example" 
    width="300" height="200">
</iframe>

Remove the Border: Use the CSS border and style attribute to remove the default border around the iframe. Additionally, with CSS you can customize the iframe border in the desired size, color, and style.

<head>
    <style>
        iframe {
            border: none; 
        }
    </style>
</head>
<body>
    <iframe
        src="https://learning-axis.com/" 
        width="300" height="200">
    </iframe>
</body>

Target for a Link: The target iframe attribute can target a particular frame for a link. Remember, the target attribute of the embedded link must refer iframe’s name attribute.

<body>
    <a href="https://learning-axis.com/contact-us/" 
        target="exampleFrame">
        Go to Learning Axis
    </a>
    <iframe src="https://learning-axis.com/"
        name="exampleFrame" 
        width="300" height="200">
    </iframe>
</body>

Allow Full Screen: Set the ‘allowfullscreen‘ attribute to true to allow the users to activate full-screen mode anytime.

 <iframe 
    src="https://learning-axis.com/html/" 
    width="600" height="400" 
    allowfullscreen>
</iframe>

Loading: This HTML iframe attribute specifies whether the iframe will load immediately in a browser or take some time until the conditions are met.

<iframe
    src="https://learning-axis.com/css/" 
    width="600" height="400" 
    loading="lazy">
</iframe>

HTML iframe offers versatility, allowing the integration of external resources into a webpage. Understanding iframe and its attributes is essential to using them properly and improving the functionality of a web page.