{"id":78660,"date":"2020-07-03T09:00:48","date_gmt":"2020-07-03T03:30:48","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=78660"},"modified":"2024-07-24T17:11:59","modified_gmt":"2024-07-24T11:41:59","slug":"html-iframes","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-iframes\/","title":{"rendered":"HTML Iframes – HTML Inline Frame Element"},"content":{"rendered":"

HTML iframes or inline frames are used to display different web-pages within the current web-page. It consists of a rectangular region where different web-pages can be displayed or separated into sections. An iframe is defined by the <iframe> element in HTML5.<\/p>\n

\"html<\/a><\/p>\n

When using iframes, it’s important to consider their impact on website performance and accessibility. While iframes offer flexibility in embedding content, excessive use can lead to slower page load times and may pose challenges for users with disabilities or on certain devices. Therefore, it’s recommended to use iframes judiciously and ensure they enhance rather than detract from the user experience.<\/p>\n

Moreover, ensuring that the content within iframes is responsive and adapts well to different screen sizes can improve overall usability across devices, contributing to a seamless browsing experience for all users.<\/p>\n

HTML IFrame Syntax-<\/strong><\/p>\n

<iframe src=\u201d\u201d><\/iframe><\/pre>\n
HTML Iframes Attributes<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n
Name<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
src<\/span><\/td>\nThis attribute is for specifying the name of the file that should be loaded in the frame.<\/span><\/td>\n<\/tr>\n
srcdoc<\/span><\/td>\n\u00a0It is useful to specify the content that should be displayed within an iframe.<\/span><\/td>\n<\/tr>\n
name<\/span><\/td>\nThis attribute is useful to specify a name to the iframe. This could be necessary while linking multiple frames.<\/span><\/td>\n<\/tr>\n
marginwidth<\/span><\/td>\nIt is to specify the spacing between the left and right frame borders and the frame content. It is defined in pixels..However, this is not supported in HTML5, the CSS padding property can be used instead.<\/span><\/td>\n<\/tr>\n
marginheight<\/span><\/td>\nThis attribute is used to specify the spacing between the top and bottom frame borders and the frame content. It is defined in pixels.However, this is not supported in HTML5, the CSS padding property can be used instead.<\/span><\/td>\n<\/tr>\n
height<\/span><\/td>\nIt specifies the height of the frame.<\/span><\/td>\n<\/tr>\n
width<\/span><\/td>\nThis attribute is useful to specify the width of the frame.<\/span><\/td>\n<\/tr>\n
scrolling<\/span><\/td>\nIt controls the scrollbars of the frame. It takes the values, \u2018yes\u2019, \u2018no\u2019, or \u2018auto\u2019.<\/span><\/td>\n<\/tr>\n
sandbox<\/span><\/td>\nIt defines the constraints regarding the content of iframe.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
For Example-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>MyFrame<\/title>\r\n  <style>\r\n    #one{\r\n      position: absolute;\r\n      top: 50px;\r\n      left: 1190px\r\n    }\r\n    #two{\r\n      position: absolute;\r\n      bottom: -150px;\r\n      top: 50px;\r\n    }\r\n    #three{\r\n      position: absolute;\r\n      bottom: -150px;\r\n      left: 316px;\r\n      top: 50px;\r\n    }\r\n\r\nbody {\r\n  margin: 0px;\r\n  font-family: 'segoe ui';\r\n}\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n<h2><center>My Frames<\/center><\/h2>\r\n<iframe id=\"one\" srcdoc=\"<center><h1><b> Section3<\/center<\/h1><\/b>\" name=\"header\" height=\"700px\" width=\"320px\"style=\"border:4px solid orange;\"><\/iframe>\r\n<iframe id=\"two\" srcdoc=\"<center><h1><b> Section1<\/center<\/h1><\/b>\" name=\"navigate\" height=\"700px\" width=\"310px\" style=\"border:4px solid orange;\"><\/iframe>\r\n<iframe id=\"three\" srcdoc=\"<center><h1><b>Section2<\/center<\/h1><\/b>\" name=\"okay\" height=\"700px\" width=\"870px\" style=\"border:4px solid orange;\"><\/iframe>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"HTML<\/a><\/p>\n
Setting Height and Width in HTML Inline Frames<\/h2>\n
The size of HTML iframe is specified using the height and width attributes. The values of these attributes could be either in pixels or percentages. For example,<\/p>\n
<!DOCTYPE html> \r\n<html>   \r\n<body>   \r\n    <p>Content here<\/p>  \r\n    <iframe src=\"https:\/\/data-flair.training\/blogs\/\" height=\"400px\" width=\"400px\"><\/iframe>   \r\n<\/body>   \r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"setting<\/a><\/p>\n
Removing Border in HTML Inline Frames<\/h2>\n
The CSS border property is to remove the border of an iframe. By default, an iframe has a border.<\/p>\n
<!DOCTYPE html> \r\n<html>   \r\n<body>   \r\n    <p>Content here<\/p>  \r\n    <iframe src=\"https:\/\/data-flair.training\/blogs\/\" height=\"400\" width=\"400\" style=\"border:none;\"><\/iframe>   \r\n<\/body>   \r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"removing<\/a><\/p>\n
Styling Border in HTML Iframe<\/h2>\n
We can style the border of the iframe using CSS.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html>   \r\n<body>   \r\n    <p>Content here<\/p>  \r\n    <iframe src=\"https:\/\/data-flair.training\/blogs\/\" height=\"400\" width=\"400\" style=\"border:4px solid red\"><\/iframe>   \r\n<\/body>   \r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"styling<\/a><\/p>\n
Target for a link<\/h2>\n
An iframe can be the target of a specific link. The name of the iframe must be specified as the target of the link.<\/p>\n
<!DOCTYPE html> \r\n<html>   \r\n<body> \r\n     <p>Click the link in the text<\/p> \r\n    <iframe height=\"300\" width=\"350\" src=\"https:\/\/data-flair.training\/blogs\/\"name=\"frame_a\"><\/iframe> \r\n    <p><a href= \"https:\/\/data-flair.training\/hadoop-spark-developer-course\/\" target=\"frame_a\">DataFlair<\/a><\/p> \r\n<\/body> \r\n  \r\n<\/html>\r\n<\/pre>\n
Output-<\/strong>
\nBefore clicking the link-<\/p>\n
\"html<\/a><\/p>\n
After clicking the link-<\/p>\n
\"html<\/a><\/p>\n
Embed Youtube Videos on Iframes in HTML<\/h2>\n
We can embed Youtube Video on iframes by following these steps-<\/p>\n