{"id":13828,"date":"2020-11-01T22:08:30","date_gmt":"2020-11-02T06:08:30","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=13828"},"modified":"2023-12-01T04:03:31","modified_gmt":"2023-12-01T12:03:31","slug":"html-iframe","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-iframe\/","title":{"rendered":"HTML Iframe: Step-by-Step Guide"},"content":{"rendered":"\n<p><em>The HTML iframe tag embeds a web document onto a web page. An embedded document could be a PDF, a web page, or another asset. The src attribute defines the location of the embedded resource.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>You can embed the contents of one <a href=\"https:\/\/careerkarma.com\/blog\/hyperlink-in-html\/\">web document<\/a>, such as a PDF or a map from Google Maps, onto another page, using HTML.<\/p>\n\n\n\n<p>That\u2019s where the HTML <em>&lt;iframe&gt;<\/em> comes in. The HTML <em>&lt;iframe&gt;<\/em> tag is used to embed external objects such as other web pages into a single web page. This tutorial will discuss, with examples, how to use the HTML <em>&lt;iframe&gt;<\/em> tag to embed web resources into a web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML iframe<\/h2>\n\n\n\n<p>HTML iframes, or inline frames, display external web documents on a page. You can embed maps, PDFs, videos, or other resources using the &lt;iframe&gt; HTML tag.<\/p>\n\n\n\n<p>The code stored within an inline frame is independent of the rest of a web page. Any styles or JavaScript that applies to your web page will not be applied within the iframe.<\/p>\n\n\n\n<p>Here\u2019s the syntax for the HTML <em>&lt;iframe&gt;<\/em> tag:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;iframe src=&quot;url&quot;&gt;&lt;\/iframe&gt;<\/pre><\/div>\n\n\n\n<p>The <em>&lt;iframe&gt;<\/em> tag is used to create an iframe. We have specified an iframe <em>src<\/em> attribute. The attribute contains the location of the HTML elements we want to embed onto our web page. This should be an <a href=\"https:\/\/careerkarma.com\/blog\/url-vs-uri\/\">HTML URL<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">iframe HTML Code Example<\/h2>\n\n\n\n<p>Let\u2019s walk through an example to explore how the <em>&lt;iframe&gt;<\/em> tag works.<\/p>\n\n\n\n<p>Suppose we are building a website for a local Washington, D.C. historical society. They want us to create a page with an embedded video from Khan Academy on the birth of the U.S. Constitution. This page is recommended material for anyone interested in joining the society. We could use the following code to embed the video into our website:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;iframe src=&quot;https:\/\/www.youtube.com\/embed\/Rk8dCnKIfP4&quot;&gt;&lt;\/iframe&gt;<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf\" alt=\"\"\/><\/figure>\n\n\n\n<p>We used an <em>&lt;iframe&gt;<\/em> element to embed an external web resource onto our web page. The web resource that we have embedded is the link \u201c<a href=\"https:\/\/www.youtube.com\/embed\/Rk8dCnKIfP4\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">https:\/\/www.youtube.com\/embed\/Rk8dCnKIfP4<\/a>\u201d. This points to the video the historical society wants to be shown on their website.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">HTML Iframe Height and Width<\/h4>\n\n\n\n<p>The height attribute and width attribute are used to set the size of an iframe. Suppose the local Washington D.C. historical society wants us to make the video bigger on their site.<\/p>\n\n\n\n<p>We are going to set the width of the YouTube video to be 500 pixels and the height to be 300 pixels:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;iframe height=&quot;300&quot; width=&quot;500&quot; src=&quot;https:\/\/www.youtube.com\/embed\/Rk8dCnKIfP4&quot;&gt;&lt;\/iframe&gt;<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Our embedded video is now 500 pixels wide and 300 pixels tall on our HTML document. This makes it easier for people to see our video on the website.<\/p>\n\n\n\n<p>Alternatively, we could set the <a href=\"https:\/\/careerkarma.com\/blog\/css-height-and-width\/\">width and height of the iframe tag using CSS<\/a>. But, because HTML supports a height and weight attribute, this is not necessary.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Remove HTML iframe Border<\/h2>\n\n\n\n<p>When you\u2019re working with the <em>&lt;iframe&gt;<\/em> tag, you\u2019ll notice that its contents are surrounded by a border. If you want to remove this border, you can use the <a href=\"https:\/\/careerkarma.com\/blog\/css-borders\/\"><em>border:none;<\/em><\/a><a href=\"https:\/\/careerkarma.com\/blog\/css-borders\/\"> CSS attribute<\/a>.<\/p>\n\n\n\n<p>The historical society has asked us to remove the border around the YouTube video from their site. Here\u2019s the code we would use to remove the border:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;iframe height=&quot;300&quot; width=&quot;500&quot; src=&quot;https:\/\/www.youtube.com\/embed\/Rk8dCnKIfP4&quot; style=&quot;border:none;&quot;&gt;&lt;\/iframe&gt;<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF\" alt=\"\"\/><\/figure>\n\n\n\n<p>Our video now no longer has a border.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML iframe Link Targets<\/h2>\n\n\n\n<p>In addition, <em>&lt;iframe&gt;<\/em> tags can be used as the target frame for a link. We can set an iframe to be the target frame for a link using the target attribute in an HTML link. The target HTML attribute must refer to the name attribute of an <em>&lt;iframe&gt;<\/em>.<\/p>\n\n\n\n<p>Suppose the historical society had another video they wanted us to show on their website on Article I of the U.S. Constitution. This video was also published by Khan Academy.<\/p>\n\n\n\n<p>When the text <em>Birth<\/em> is clicked on the web page, the <em>Birth of the U.S. Constitution<\/em> video should be rendered in the iframe. When the text <em>Article I<\/em> is clicked, the video on Article I of the Constitution should be rendered.<\/p>\n\n\n\n<p>We could use the following code to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;iframe src=&quot;https:\/\/www.youtube.com\/embed\/Rk8dCnKIfP4&quot; name=&quot;iframe1&quot;&gt;&lt;\/iframe&gt;&lt;br \/&gt;\n&lt;a href=&quot;https:\/\/www.youtube.com\/embed\/Rk8dCnKIfP&quot; target=&quot;iframe1&quot;&gt;Birth&lt;\/a&gt;&lt;br \/&gt;\n&lt;a href=&quot;https:\/\/www.youtube.com\/embed\/CIFBjZU55so&quot; target=&quot;iframe1&quot;&gt;Article I&lt;\/a&gt;<\/pre><\/div>\n\n\n\n<p>Our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr\" alt=\"\"\/><\/figure>\n\n\n\n<p>By default, the video on the birth of the U.S. Constitution is shown in the iframe. The contents of the iframe change to point to the video from Khan Academy on Article I of the Constitution. This happens when we click on the <em>Article I<\/em> URL.<\/p>\n\n\n\n<p>Our iframe is redirected to the video on the birth of the Constitution if that video is not already featured when we click <em>Birth<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The <em>&lt;iframe&gt;<\/em> HTML tag embeds external web resources such as web pages onto another web page. This is useful if you want to add maps, files, videos, or other web pages onto your site.<\/p>\n\n\n\n<p>This tutorial discussed, with reference to examples, how to use the HTML <em>&lt;iframe&gt;<\/em> tag to render external web resources on a web page. Now you have the knowledge you need to start using the <em>&lt;iframe&gt;<\/em> tag like a pro!<\/p>\n\n\n\n<p>To learn more about coding in HTML, read our <a href=\"https:\/\/careerkarma.com\/blog\/learn-html\/\"><\/a><a href=\"https:\/\/careerkarma.com\/blog\/learn-html\/\">guide to learning HyperText Markup Language<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"The HTML iframe tag embeds a web document onto a web page. An embedded document could be a PDF, a web page, or another asset. The src attribute defines the location of the embedded resource. You can embed the contents of one web document, such as a PDF or a map from Google Maps, onto&hellip;","protected":false},"author":240,"featured_media":13830,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-13828","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML Iframe: Step-by-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The HTML tag is used to embed an external web resource onto a web page. On Career Karma, learn how to use the tag.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/html-iframe\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Iframe: Step-by-Step Guide\" \/>\n<meta property=\"og:description\" content=\"The HTML tag is used to embed an external web resource onto a web page. On Career Karma, learn how to use the tag.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-iframe\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-02T06:08:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:03:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"679\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"HTML Iframe: Step-by-Step Guide\",\"datePublished\":\"2020-11-02T06:08:30+00:00\",\"dateModified\":\"2023-12-01T12:03:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/\"},\"wordCount\":867,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-iframe\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/\",\"name\":\"HTML Iframe: Step-by-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg\",\"datePublished\":\"2020-11-02T06:08:30+00:00\",\"dateModified\":\"2023-12-01T12:03:31+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The HTML tag is used to embed an external web resource onto a web page. On Career Karma, learn how to use the tag.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-iframe\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg\",\"width\":1020,\"height\":679},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-iframe\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/careerkarma.com\/blog\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML Iframe: Step-by-Step Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML Iframe: Step-by-Step Guide | Career Karma","description":"The HTML tag is used to embed an external web resource onto a web page. On Career Karma, learn how to use the tag.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/html-iframe\/","og_locale":"en_US","og_type":"article","og_title":"HTML Iframe: Step-by-Step Guide","og_description":"The HTML tag is used to embed an external web resource onto a web page. On Career Karma, learn how to use the tag.","og_url":"https:\/\/careerkarma.com\/blog\/html-iframe\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-11-02T06:08:30+00:00","article_modified_time":"2023-12-01T12:03:31+00:00","og_image":[{"width":1020,"height":679,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"HTML Iframe: Step-by-Step Guide","datePublished":"2020-11-02T06:08:30+00:00","dateModified":"2023-12-01T12:03:31+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/"},"wordCount":867,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-iframe\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/","url":"https:\/\/careerkarma.com\/blog\/html-iframe\/","name":"HTML Iframe: Step-by-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg","datePublished":"2020-11-02T06:08:30+00:00","dateModified":"2023-12-01T12:03:31+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The HTML tag is used to embed an external web resource onto a web page. On Career Karma, learn how to use the tag.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-iframe\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/business-code-coding-computer-270360.jpg","width":1020,"height":679},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-iframe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"HTML Iframe: Step-by-Step Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/13828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=13828"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/13828\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/13830"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=13828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=13828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=13828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}