Субтитры в HTML и JavaScript

В HTML и JavaScript существует несколько способов добавления субтитров на вашу веб-страницу. Субтитры полезны для предоставления дополнительной информации или пояснения содержания раздела. В этой статье блога мы рассмотрим различные методы добавления субтитров с помощью HTML и JavaScript, а также приведем примеры кода.

Метод 1: использование тега HTML
Тег

<h1>Main Title</h1>
<sub>Subtitle goes here</sub>

Метод 2: использование HTML-тега
Тег  — это универсальный встроенный контейнер, который можно использовать для группировки элементов и применения стилей.. Вы можете использовать его для создания субтитров, присвоив класс или идентификатор элементу . Вот пример:

<h1>Main Title</h1>
<span class="subtitle">Subtitle goes here</span>

CSS:

.subtitle {
  font-size: 14px;
  color: #999;
}

Метод 3. Использование JavaScript для вставки субтитров.
Если вы хотите динамически добавлять субтитры с помощью JavaScript, вы можете использовать методы createElementи appendChild. Вот пример:

<h1 id="mainTitle">Main Title</h1>
<script>
  var subtitle = document.createElement("sub");
  subtitle.textContent = "Subtitle goes here";
  document.getElementById("mainTitle").appendChild(subtitle);
</script>

<h1 id="mainTitle">Main Title</h1>
<script>
  var subtitle = document.createElement("span");
  subtitle.textContent = "Subtitle goes here";
  subtitle.classList.add("subtitle");
  document.getElementById("mainTitle").appendChild(subtitle);
</script>

CSS:

.subtitle {
  font-size: 14px;
  color: #999;
}

Вот некоторые методы, которые можно использовать для добавления субтитров на HTML-страницу с помощью HTML-тегов или JavaScript. Не забудьте настроить стили и имена классов в соответствии с дизайном вашей веб-страницы.