Iframes, File Paths & Head

Iframes

An <iframe> embeds another web page inside your current page.

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560" height="315"
  title="Video title"
  allowfullscreen>
</iframe>

• Common uses: embedding YouTube/Vimeo videos, Google Maps, payment/third-party widgets
• Always set a title attribute — screen readers announce it
• Iframes can slow page load — only embed what's needed

File Paths

A file path tells the browser where to find a file. Getting these wrong is a common beginner bug.

<img src="photo.jpg">          <!-- same folder -->
<img src="images/photo.jpg">   <!-- images subfolder -->
<img src="../photo.jpg">       <!-- one folder up -->

<!-- root-relative: always starts from the site root -->
<link rel="stylesheet" href="/assets/css/style.css">

<!-- absolute: a full URL, usually for a different site -->
<a href="https://example.com/page.html">External link</a>

Root-relative paths (starting with /) are the safest choice for shared assets like a stylesheet — they resolve correctly no matter how deeply nested the current page is in your folder structure.

The Head Element

Everything inside <head> is metadata — not shown directly, but tells the browser/search engines about the page.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page Title</title>
  <link rel="stylesheet" href="/assets/css/style.css">
</head>

• meta charset="UTF-8" — which character set to use (supports almost every language/symbol)
• meta name="viewport" — makes the page render correctly on mobile
• <title> — shows in the browser tab and search results