Перейти к основному содержимому

Спец-тэги

<iframe>​

Фрейм это как бы часть стороннего сайт внутри текущего сайта, который находится в отдельном блоке.

<!-- Фрейм с YouTube -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/WUxrxSv3sjQ"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

<!-- Фрейм с ВК -->
<iframe
  src="https://vk.com/video_ext.php?oid=-106986602&id=456239036&hash=50d82228e8f2e97c&hd=2"
  width="853"
  height="480"
  allow="autoplay; encrypted-media; fullscreen; picture-in-picture;"
  frameborder="0"
  allowfullscreen
></iframe>

<!-- Фрейм с Яндекс-музыки -->
<iframe
  frameborder="0"
  style="border:none;width:100%;height:180px;"
  width="100%"
  height="180"
  src="https://music.yandex.ru/iframe/#track/25786/2484799"
  >Слушайте
  <a href="https://music.yandex.ru/album/2484799/track/25786"
    >Gimme! Gimme! Gimme! (A Man After Midnight)</a
  >
  — <a href="https://music.yandex.ru/artist/9367">ABBA</a> на Яндекс
  Музыке</iframe
>

Фрейм с YouTube​

Фрейм с ВК​

Фрейм с Яндекс-музыки​

<canvas>​

<canvas id="myCanvas" width="160" height="90">Текст при незагрузке</canvas>

Контейнер для векторной графики, реализованной через JS.

<audio>​

<audio controls>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

<video>​

<video
  width="480"
  controls
  poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif"
>
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
    type="video/mp4"
  />
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
    type="video/ogg"
  />
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
    type="video/webm"
  />

  <!-- Субтитры -->
  <track
    kind="subtitles"
    src="video/jane.en.vtt"
    srclang="en"
    label="English"
  />
  <track
    kind="subtitles"
    src="video/jane.ua.vtt"
    srclang="uk"
    label="Українська"
  />
  <track
    kind="subtitles"
    src="video/jane.ru.vtt"
    srclang="ru"
    label="Русский"
    default
  />
  Your browser doesn't support HTML5 video tag.
</video>

<noscript>​

Показывается при откюченном JS в браузере.

<noscript> Этот текст будет показал, если у браузера отключен JS </noscript>

<data>​

Специальный тэг, чтобы связать какой-ниб элемент в каким-ниб id.

<ul>
   
  <li><data value="21053">Cherry Tomato</data></li>
   
  <li><data value="21054">Beef Tomato</data></li>
   
  <li><data value="21055">Snack Tomato</data></li>
</ul>

<template>​

Элемент <template> представляет собой механизм для хранения содержимого на стороне клиента, которое не отображается в процессе загрузки страницы, но впоследствии может быть заполнено с помощью JavaScript.

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

<embed>​

Флеш-анимации. Больше не используются.

<embed
  src="../pict/masianya_dj.swf"
  width="700"
  height="800"
  type="application/x-shockwave-flash"
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  border="1"
/>

<dialog>​

Контейнер для модального окна.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>dialog</title>

    <style>
      body {
        background: url(/example/image/shark.jpg) no-repeat;
        background-size: cover;
      }

      dialog {
        background: rgba(255, 255, 255, 0.7);
        width: 300px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
      }
    </style>
  </head>

  <body>
    <button id="openDialog">Открыть окно</button>
    <dialog>
      <p>
        Полинезийцы называют Млечный путь Манго-Роа-И-Ата, что в переводе с
        маори означает «Длинная акула на рассвете».
      </p>
      <p><button id="closeDialog">Закрыть окно</button></p>
    </dialog>

    <script>
      var dialog = document.querySelector('dialog');

      document.querySelector('#openDialog').onclick = function () {
        dialog.show(); // Показываем диалоговое окно
      };

      document.querySelector('#closeDialog').onclick = function () {
        dialog.close(); // Прячем диалоговое окно
      };
    </script>
  </body>
</html>