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, пока пользователь не доскроллит до него.
Это ускоряет загрузку страницы.

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

Итог

<iframe> — это удобный инструмент, который позволяет встроить одну страницу в другую. Он отлично подходит для видео, карт, виджетов, форм и небольших мини-сервисов. Создавать полноценную структуру сайта через фреймы уже не принято, но как встроенное окно со сторонним контентом iframe остаётся актуальным и полезным.