Problem Statement
What is the primary purpose of the <iframe> tag?
Explanation
The iframe tag, which stands for inline frame, is used to embed another HTML page or external content within the current page. Iframes create a nested browsing context, essentially displaying another webpage inside your page. Common uses include embedding YouTube videos, Google Maps, social media posts, advertisements, or third-party widgets. The iframe tag requires a src attribute that specifies the URL of the page to embed. You can also set width and height attributes to control the iframe size. The title attribute is important for accessibility, describing the iframe content to screen readers. Modern best practices include adding the loading equals lazy attribute for better performance. Security is an important consideration with iframes. You should be careful about which sources you embed, as iframes can potentially contain malicious code. Use the sandbox attribute to restrict what the embedded content can do. For example, sandbox equals allow-scripts allow-same-origin. Always use HTTPS URLs when embedding external content for security.
Code Solution
SolutionRead Only
<!-- Basic iframe --> <iframe src="https://www.example.com" width="600" height="400" title="Example Website"></iframe> <!-- YouTube video embed --> <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video" allowfullscreen></iframe> <!-- Google Maps embed --> <iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> <!-- With sandbox for security --> <iframe src="external-content.html" sandbox="allow-scripts allow-same-origin" title="External Content"></iframe>
