How To Display Another HTML Page In Div
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you the solution of how to display another HTML page in div, in html there is a feature with the help of which you are able to display other html page in div. Some know this HTML special feature, but don’t know how to implement this feature.
That’s the reason we are here today to teach you how to display other html page in div. There are many ways to do this, but we are one from you and we understand you.
So, we teach you one of the easiest method without any extra coding.
Step By Step Guide On How To Display Another Html Page In DIV :-
Now, our topic is about to display other html page in div. For this, there is a tag in HTML known as iframe.
This tag usually defines an area in current html page in which you show the required page or other things which you want to display.
This tag embeds other document in the current page. For its working, there are attributes like src, title, width and height which must be filled.
Now, here we give you an example to show you how this code works.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<h2>
this is the first page in which we embed another html page.
</h2>
<h4>
this can be done with the help of iframe tag which we use in next div.
</h4>
<div class="zoom">
<iframe src="demo8.html" ></iframe>
<br>
<iframe src="demo8.html" height="500" width="800" ></iframe>
<br>
<iframe src="demo8.html" style="height: 450px; width: 700px ; border: none;" ></iframe>
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- In the body tag, here we first create headings to show you current code is working and after this we create three different iframes tags. These are:
- The first one is default and we don’t customize anything in this. You will see how it looks.
- In next we specify its height and width directly. These are given to provide dimensions to iframe tag.
- In last we write all tags in CSS, and there are height, width and border in this. You can customize all of them to see how they works.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we can say that we are able to display other html page in div. but in that div there must be a tag named as iframe.
With the help of this tag, you are also able to display html pages in paragraph, headings and sections also. I hope this tutorial on how to display another HTML page in div helps you.
About Dikshita
