HTML з нуля: Як створити фрейми (iframe) в HTML. Урок №16

Фрейми раніше використовували для поділу сторінки на кілька частин. Але класичні фрейми (<frameset> і <frame>) більше не застосовуються в сучасному HTML. Натомість існує елемент <iframe>, який дозволяє вставити одну вебсторінку в іншу. Це зручно, коли потрібно показати відео, карту, віджет або завантажити частину зовнішнього сайту у вікні на вашій сторінці.

У цьому уроці розглянемо, як працює <iframe>, де він використовується і як застосовувати його на практиці.

Що таке <iframe>

<iframe> — це прямокутне вікно всередині сторінки.
У ньому завантажується інша HTML-сторінка: ваша або зовнішня.

Простий приклад:

<iframe src="page.html" width="600" height="300"></iframe>

Після завантаження користувач побачить вміст page.html, наче він вставлений у цю сторінку.

Де використовується <iframe>

Сьогодні <iframe> застосовують не для створення структури сайту, а для вбудовування окремих елементів:

1. Відео та медіаконтент

Наприклад, відео з YouTube:

<iframe 
    src="https://www.youtube.com/watch?v=iz_k4ZenN6k" 
    width="560" 
    height="315"
    allowfullscreen>
</iframe>

2. Карти та геолокація

Google Maps, OpenStreetMap та інші сервіси дозволяють вставляти карти:

<iframe
    width="600"
    height="450"
    src="https://maps.google.com/maps?q=Kyiv&t=&z=13&ie=UTF8&iwloc=&output=embed">
</iframe>

3. Віджети та міні-сервіси

Наприклад, форма зворотного зв’язку, чат-бот, калькулятор або розклад:

<iframe 
    src="https://example.com/widget" 
    width="100%" 
    height="400">
</iframe>

4. Вбудовування власних сторінок

<iframe src="/docs/manual.html" width="100%" height="500"></iframe>

Основні атрибути <iframe>

1. src — адреса сторінки

<iframe src="page.html"></iframe>

2. width та height — розміри

<iframe src="page.html" width="800" height="400"></iframe>

3. title — опис для доступності

<iframe src="page.html" title="Приклад вбудованої сторінки"></iframe>

4. allowfullscreen — повноекранний режим

<iframe src="video.html" allowfullscreen></iframe>

5. loading=”lazy” — ліниве завантаження

<iframe src="map.html" loading="lazy"></iframe>

Висновок

<iframe> — це зручний спосіб вставити одну вебсторінку в іншу. Він підходить для відео, карт, віджетів, форм і невеликих сервісів. Хоча фрейми як структура сторінки більше не використовуються, iframe залишається актуальним та корисним елементом для сучасних сайтів.