IFrames
An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The <iframe>
element provides a smaller version of a browser window that contains various media, such as an advertisement, a YouTube video, etc. Some sites such as Youtube will provide IFrame markup for the user to embed instead of making one on their own.
These smaller windows are known as “browsing contexts”, because the URL passed to the <iframe>
tag is still functional as a web page. This makes their usage somewhat controversial as many commercial websites have safeguards against their URL being passed to this particular element.
Example
The example features an <iframe>
tag with the URL from the National Park Service passed to the src
attribute. Additionally, it is advisable and accessibility-friendly to include alternative text inside the element in the event a problem occurs.
<iframeclass="i-frame-element"src="https://www.nps.gov/caco/index.html"width="100vw"height="1000">Alt-text for IFrame</iframe>
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn HTML on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner Friendly7 hours