Справочник HTML | Теги на букву S

Тег <s>

Тег <s> — это содержимое в тексте, которое больше не является точным или актуальным. Браузеры отмечают такой текст как перечёркнутый.

Тег <s> нужно использовать только для незначительных правок, таких как обновление цены. Он не должен применяться для удалённого текста, для этого нужно использовать элемент <del>.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Умный самовар с функцией кофемашины по акции всего за <s>7500 ₽</s> 4990 ₽.</p>

Результат

Умный самовар с функцией кофемашины по акции всего за ~~7500 ₽~~ 4990 ₽.

Тег <samp>

Тег <samp> используется для отображения вывода данных, которые видит пользователь в результате выполнения программы. Браузеры обычно выделяют содержимое элемента <samp> моноширинным шрифтом.

Это может быть сообщение о ходе выполнения программы (вроде: «Закрыть окно программы!»), предупреждения операционной системы или вывод результата вычислений в консоли.

Для отображения программного кода используют тег <code>.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Извлекаем третье по величине число.</p>
<code>
arr = [12, 13, 1, 10, 34, 16]
arr.sort(reverse=True)
print(arr[2])
</code>

<p>Ответ программы: <samp>13</samp></p>

Результат

Извлекаем третье по величине число.

arr = [12, 13, 1, 10, 34, 16]

arr.sort(reverse=True)

print(arr[2])

Ответ программы: 13

Тег <script>

Тег <script> используется для вставки на страницу кода JavaScript или для подключения внешних файлов со скриптами.

Тег <script> можно располагать в «служебном отсеке» <head> или в самом «теле» документа <body>. Лучше всего — в конце страницы, перед закрывающим тегом <body>, что меньше всего тормозит загрузку страницы.

А ещё лучше — подключать скрипты из внешних файлов:

<script src="external.js"></script>

Это добавит одинаковые функции на все страницы сайта и позволит редактировать код из одного места. И это ускорит загрузку страниц всего сайта, потому что все подключённые ресурсы сохраняются на компьютере пользователя при первом посещении.

Атрибуты

Атрибут	Функция	Значение
async	Загружает скрипт асинхронно, не мешая загрузке страницы.	Атрибут без значения. Если задан атрибут defer, то атрибут async игнорируется.
blocking	Является ли элемент потенциально блокирующим.
crossorigin	Как элемент обрабатывает запросы кросс-источника.	anonymous — запрос к серверу отправляется без учётной записи пользователя. use-credentials — запрос включает все учётные данные пользователя (куки браузера, сертификат X.509, логин, пароль и запрос на авторизацию).
defer	Откладывает выполнение скрипта до полной загрузки страницы.	Атрибут без значения. Работает только вместе с атрибутом src.
fetchpriority	Устанавливает приоритет для первоначальной выборки внешнего скрипта.	auto — Автоматическая выборка (по умолчанию). high — Высокий. low — Низкий.
integrity	Содержит хэш файла для проверки подлинности.	Хэш файла (Используют генератор хешей, например: srihash.org).
nomodule	Предотвращает выполнение в старых браузерах без поддержки модульных скриптов.	Атрибут без значения.
referrerpolicy	Какие данные отправлять в заголовке Referer при загрузке сторонних скриптов.	no-referrer — заголовок Referer не отправляется. Открыть все значения… no-referrer-when-downgrade — заголовок Referer не отправляется при переходе с HTTPS на HTTP. same-origin — данные отправляются в пределах одного сайта, а при переходе на другой сайт не передаются. origin — данные ограничены и включают только протокол, адрес сайта и порт, если он указан. strict-origin — данные включают протокол, адрес сайта и порт, и передаются только в рамках одного и того же протокола. origin-when-cross-origin — передаёт полный путь в рамках одного сайта, а при переходе на другой сайт включают только протокол, адрес сайта и порт. strict-origin-when-cross-origin — передаёт полный путь в рамках одного сайта, при переходе на другой сайт передаётся протокол, адрес сайта и порт, но только когда протокол остаётся прежним (по умолчанию). unsafe-url — данные включают полный адрес документа, что считается небезопасным.
src	Адрес внешнего файла скрипта.	URL
type	Тип сценария.	importmap — Элемент содержит карту импорта. module — Сообщает, что код является модулем JavaScript (атрибут defer игнорируется). text/javascript — Классический JavaScript (по умолчанию).

Для элемента доступны глобальные атрибуты.

Пример

<p id="winking">Скрипты лучше подключать из внешнего файла.</p>
<script>
const p = document.getElementById("winking")
setInterval(function () {
if (p.style.fontSize !== "10px") {
  p.style.fontSize = "10px"
} else {
  p.style.fontSize = "20px"
}
}, 3000)
</script>

Результат

Скрипты лучше подключать из внешнего файла.

Тег <search>

Тег <search> — это контейнер для хранения полей формы (<input> с типом search) и других элементов, связанных с поиском.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<search>
  <form>
      <input type="search" placeholder="Найти">
      <button>Поиск</button>
  </form>
</search>

Результат

Тег <section>

Тег <section> выделяет в документе смысловые тематические блоки: новости, услуги, контакты, отзывы. Допускается вкладывать один элемент <section> внутрь другого.

Иногда его путают с другими семантическими элементами HTML5 и не знают, какой тег использовать: <section>, <div>, <article> или <main>.

<div> — просто контейнер без смысла, он не сообщает браузеру, что внутри.
<article> — самодостаточный блок. Если его вставить в другую страницу, он всё равно будет понятен. Подходит для статей, новостей, постов, рецептов, карточек товаров.
<main> — основное содержимое страницы. На странице он должен быть только один, а уже внутри него обычно размещают <section>, <article> и другие блоки.
<section> — смысловой тематический блок. Он объединяет контент по теме. У каждой секции обязательно должен быть заголовок, чтобы было понятно, о чём она.

Атрибуты

Для элемента доступны глобальные атрибуты.

Синтаксис

<section>
  <h2>Заголовок</h2>
  <p>Текст секции</p>
</section>

Тег <select>

Тег <select> используют для создания раскрывающихся списков, и списков с одним или множественным выбором. Каждый пункт списка задают тегом <option>.

Для отправки данных списка на сервер, нужно размещать <select> внутри элемента <form>, и у него должно быть имя (атрибут name).

Внутри тега <select> могут находиться только теги <option> и <optgroup>.

Атрибуты

Атрибут	Функция	Значение
autocomplete	Включает или отключает в браузере автозаполнение данных, которые пользователь вводил ранее: пароль, почта и т.д.	on — Включает автозаполнение текста. off — Отключает автозаполнение.
disabled	Отключает доступ управления формой.	Атрибут без значения.
form	Связывает список с формой.	Идентично значению атрибута id элемента <formt>.
multiple	Разрешает выбирать сразу несколько элементов списка.	Атрибут без значения.
name	Имя элемента для отправки на сервер или обращения к скрипту.	Имя.
required	Делает выбор элемента обязательным для отправки формы.	Атрибут без значения.
size	Количество отображаемых строк списка.	Целое положительное число.

Для элемента доступны глобальные атрибуты.

Пример 1

<form>
  <label for="city">Где вы живёте?</label>
  <select name="city">
      <option>-- Выберите город --</option>
      <option value="moscow">Москва</option>
      <option value="petersburg">Санкт-Петербург</option>
      <option value="yekaterinburg">Екатеринбург</option>
      <option value="uryupinsk">Урюпинск</option>
  </select>
</form>

Результат

Пример 2

<form>
  <select size="4">
      <option disabled>-- Выберите город --</option>
      <option value="moscow">Москва</option>
      <option value="petersburg">Санкт-Петербург</option>
      <option value="yekaterinburg">Екатеринбург</option>
      <option value="chelyabinsk">Челябинск</option>
      <option value="perm">Пермь</option>
      <option value="uryupinsk">Урюпинск</option>
  </select>
</form>

Результат

Тег <slot>

Тег <slot> указывает место (слот), куда будет вставлено содержимое компонента, например, содержимое шаблона <template>. Атрибут name позволяет задавать элементам <slot> имена и использовать их на странице в нескольких местах.

Атрибуты

Атрибут	Функция	Значение
name	Имя слота.	Имя.

Для элемента доступны глобальные атрибуты.

Пример

<section>
  <div class="block1">
    <slot name="content1"></slot>
  </div>
  <div class="block2">
    <slot name="content2"></slot>
  </div>
</section>

Тег <small>

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

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Отдых на юге Антарктиды. Радушные пингвины и морские львы!<br>
  <small>При себе иметь валенки, ушанку, два пуховика, ледоруб и паяльную лампу.</small>
</p>

Результат

Отдых на юге Антарктиды. Радушные пингвины и морские львы!
При себе иметь валенки, ушанку, два пуховика, ледоруб и паяльную лампу.

Тег <source>

Тег <source> используют для разных форматов медиафайлов, из которых браузер выбирает оптимальный. Внутри <audio> или <video>, элементы <source> должны быть расположены выше элемента <track>.

Также применяется для добавления изображений разного формата и размера в контейнере <picture>, где <source> должен идти перед элементом <img>.

Атрибуты

Атрибут	Функция	Значение
height	Вертикальный размер изображения.	Целое число.
media	Медиа-запрос для выбора нужного изображения.	Пример: media="(min-width: 600px)".
sizes	Размеры изображений для разных макетов страниц.	Указывают одно или несколько условий через запятую. Каждая строка состоит из медиа-запроса и, через пробел, ширины картинки (в любых единицах измерения px, em и vw, кроме процентов). Например: sizes="(min-width: 320px) 320px, (min-width: 480px) 100vw". Где vw — это ширина в процентах от области просмотра.
src	Адрес ресурса (audio или video).	URL
srcset	Изображения для использования в разных ситуациях (для различных экранов).	Несколько строк, разделённых запятой, где каждая строка должна содержать адрес изображения и, через пробел, может указываться ширина картинки. При этом после ширины ставится единица измерения w, а не px. Например: srcset="pic-small.png 320w, pic-large.png 800w"
type	MIME-тип встроенного ресурса.	MIME-типы
width	Горизонтальный размер изображения.	Целое число.

Для элемента доступны глобальные атрибуты.

Пример 1

Два изображения для разных экранов по ширине — до 600px и от 600px и больше:

<picture>
  <source srcset="pic-large.jpg" media="(min-width: 600px)">
  <img src="pic-small.jpg" alt="..">
</picture>

Пример 2

Видеофайл в двух форматах:

<video width="640" height="360" controls muted>
  <source src="primer/clip.webm" type="video/webm">
  <source src="primer/clip.mp4" type="video/mp4">
</video>

Результат

Тег <span>

Тег <span> — это строчный элемент, который удобно использовать для задания стиля фрагменту текста. Например, внутри абзаца можно изменить цвет или размер первого слова, или даже одной буквы.

Если мы задаём стили для элемента <div>, то меняем оформление всего блока. Если для <p> — всего абзаца, а <span> выделяет строчку или даже одну букву в блоке или абзаце.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p><span class="dropzag">Ж</span>или-были старик со старухой...</p>

Результат

В примере для класса dropzag заданы CSS-свойства: font-size: 50px и font-weight: 800 (см. пример для <style>).

Жили-были старик со старухой...

Тег <strong>

Тег <strong> выделяет важный текст и отображается жирным шрифтом. Такая фраза или слово более значимы по смыслу, чем окружающий их текст.

Элементы <strong> внешне похож на <b>, но это только внешнее сходство, а по смыслу эти теги различны. Элемент <b> только внешне выделяет фрагмент текста, а тег <strong> придаёт ему важное значение.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Высокоскоростные ж/д магистрали имеют <strong>чрезвычайное значение</strong> для всей страны!</p>

Результат

Высокоскоростные ж/д магистрали имеют чрезвычайное значение для всей страны!

Тег <style>

Тег <style> используют для присвоения элементам страницы стилей CSS. Элемент <style> нужно размещать внутри «служебного отсека» — в контейнере <head>. На странице можно применять несколько элементов <style>.

Тег <style> используют для отдельных страниц в особых случаях, но лучше подключать стили через внешний CSS-файл, используя элемент<link>.

Атрибуты

Атрибут	Функция	Значение
blocking	Является ли элемент потенциально блокирующим отображение.
media	Определяет устройство, для которого следует применять стилевое оформление.	all — Все устройства (по умолчанию). print — Печатающие устройства. screen — Экран монитора. В качестве значений могут быть указаны медиа-запросы. Например: `<style media="screen and (min-width: 300px)">` Можно указать несколько значений, через запятую.
title	Позволяет указать несколько стилей для одной страницы, с присвоением им читаемых имён, чтобы пользователь в браузере мог переключаться между разными стилями: тёмная или светлая тема, версия для печати, для слабовидящих и др.	Понятные по смыслу имена.

Для элемента доступны глобальные атрибуты.

Пример

Результат смотрите в примере для элемента <span>.

<head>
  <title>..</title>
  <style>
    .dropzag {font-size: 50px; font-weight: 800;}
  </style>
</head>

Тег <sub>

Тег <sub> отображает шрифт в виде нижнего (подстрочного) индекса. При этом текст будет уменьшенного размера и расположен ниже базовой линии остальных символов строки. Чаще всего <sub> используют для записи формул в химии, физике и математике.

Для отображения шрифта в верхнем индексе используют тег <sup>.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Наука 2.0 | Найдите сумму:<br>
60 грамм H<sub>2</sub>O + 40 грамм C<sub>2</sub>H<sub>5</sub>OH =</p>

Результат

Наука 2.0 | Найдите сумму:
60 грамм H₂O + 40 грамм C₂H₅OH =

Тег <summary>

Тег <summary> — это заголовок для блока с раскрывающимся контентом <details>. Элемент <summary> должен идти первым внутри <details>, но, как показывает практика, он работает, даже если находится между тегами содержательной части <details>.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<details>
   <summary>Открыть</summary>
     <p>Вот аккордеон и раскрылся!</p>
</details>

Результат

Открыть

Вот аккордеон и раскрылся!

Тег <sup>

Тег <sup> отображает шрифт в виде верхнего (надстрочного) индекса. При этом текст будет уменьшенного размера и расположен выше базовой линии остальных символов строки. Чаще всего <sup> используют для записи формул в математике.

Для отображения шрифта в нижнем индексе используют тег <sub>.

Атрибуты

Для элемента доступны глобальные атрибуты.

Пример

<p>Формула теоремы Пифагора:<br> 
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup><br> 
где a, b — катеты, с — гипотенуза.</p>

Результат

Формула теоремы Пифагора:
a² + b² = c²
где a, b — катеты, с — гипотенуза.

Справочник HTML на S

Тег <s>

Атрибуты

Пример

Результат

Тег <samp>

Атрибуты

Пример

Результат

Тег <script>

Атрибуты

Пример

Результат

Тег <search>

Атрибуты

Пример

Результат

Тег <section>

Атрибуты

Синтаксис

Тег <select>

Атрибуты

Пример 1

Результат

Пример 2

Результат

Тег <slot>

Атрибуты

Пример

Тег <small>

Атрибуты

Пример

Результат

Тег <source>

Атрибуты

Пример 1

Пример 2

Результат

Тег <span>

Атрибуты

Пример

Результат

Тег <strong>

Атрибуты

Пример

Результат

Тег <style>

Атрибуты

Пример

Тег <sub>

Атрибуты

Пример

Результат

Тег <summary>

Атрибуты

Пример

Результат

Тег <sup>

Атрибуты

Пример

Результат

Популярное

Полезное

Получить книгу

Мы здесь

Поделиться материалом с друзьями:

Контакты

Присоединяйтесь