Iframes In HTML | HTML Iframes Tutorial

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:4 mins read
You are currently viewing Iframes In HTML | HTML Iframes Tutorial

Iframes In HTML

Iframes in HTML represents a separate content or a webpage on your document from another source. It helps you show another website document directly on your webpage.

<iframe src="https://www.wikipedia.org">
</iframe>

Here we embed Wikipedia

Results

Iframes in HTML – With Attributes

In HTML <iframe> tag contain many attributes like an image attribute.

  • The width and height attribute set the width and height of iframes.
  • The src attribute defines the source of the document address.
  • The title attribute sets the title of the iframes.
  • The name attribute sets the name of the iframe. It helps you to set the iframes document source from another clickable element.
  • The scrolling attribute sets the iframes overflow content scroll or not.

The width and height attribute

The width and height attribute is used to set the width and height of the iframes. Also, you can use to set width and height the width and height property in CSS, under the style element or the external stylesheet file.

<iframe src="url" width="500" height="500">
</iframe>

OR

<style>
iframe{
 width:500px;
 height:500px;
}
</style>

The src Attribute

The src attribute defines the source of the content displayed in iframes.

<iframe src="url_of_the_file_path">
</iframe>

The title attribute

The title attribute set the title of the iframe, it also improves the SEO of your webpage. So it is necessary to give a title attribute for not only users it also a important part of SEO.

<iframe src="url" title="set the title">
</iframe>

The name attribute

The name attribute set the name of the iframe, it can help you in later in change the content of the iframe through a clickable element.

<iframe src="url" name="wiki_frame">
</iframe>

The scroll attribute

The scrolling attribute give the instruction to a browser for overflow content add the scrollbars or not. This attribute values can be yes, no or auto. By default it’s value are set to auto.

<iframe src="url..." scrolling="no">
</iframe>

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply