How to embed website in html

HtmlHow-ToBeginner · 3 min read

How to Embed a Website in HTML: Simple iframe Guide

To embed a website in HTML, use the <iframe> tag with the src attribute set to the website URL. This tag creates a window inside your page that shows the other site.

📐

Syntax

The <iframe> tag is used to embed another webpage inside your HTML document. The main attribute is src, which holds the URL of the website you want to show. You can also set width and height to control the size of the embedded window.

html

<iframe src="URL" width="WIDTH" height="HEIGHT" title="Description"></iframe>

💻

Example

This example shows how to embed the Wikipedia homepage inside your webpage using an iframe. It sets the size to 800 pixels wide and 600 pixels tall.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Embed Website Example</title>
</head>
<body>
  <h1>Embedded Wikipedia</h1>
  <iframe src="https://www.wikipedia.org" width="800" height="600" title="Wikipedia Homepage"></iframe>
</body>
</html>

Output

A webpage with a heading 'Embedded Wikipedia' and below it a window showing the Wikipedia homepage inside the page.

⚠️

Common Pitfalls

Some websites block embedding by using security settings called X-Frame-Options, so the iframe may show an error or stay blank.
Always add a title attribute to your iframe for accessibility, so screen readers can describe it.
Setting fixed width and height can cause scrollbars or cut content; consider responsive sizes with CSS if needed.

html

<!-- Wrong: Missing title and fixed small size -->
<iframe src="https://example.com" width="200" height="150"></iframe>

<!-- Right: Added title and larger size -->
<iframe src="https://example.com" width="800" height="600" title="Example Site"></iframe>

📊

Quick Reference

Use the <iframe> tag with these attributes:

src: URL of the website to embed
width: width of the iframe (e.g., 800)
height: height of the iframe (e.g., 600)
title: description for accessibility
loading="lazy": optional to load iframe only when visible

✅

Key Takeaways

Use the