Блог

SPAN (тег в HTML)

Что такое span в html:

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

Как прописать span в html:

<p><span class='warning'>Предупреждение:</span> не пытайтесь сделать это дома.</p>

SPACER (тег в HTML)

Что такое spacer в html:

Создает пустое пространство по вертикали или горизонтали.

Атрибуты:

1. align - Определяет выравнивание элемента относительно содержимого.
2. height - Устанавливает высоту пустого пространства в пикселах.
3. size - Число пикселов пустого пространства вставляемых горизонтально или вертикально, в зависимости от значения атрибута type — horizontal или vertical.
4. type - Указывает тип элемента. Возможные значения block | horizontal | vertical.
5. width - Устанавливает ширину пустого пространства в пикселах.

Как прописать spacer в html:

<spacer height="<число>" width="<число>"></spacer>

SOURCE (тег в HTML)

Что такое source в html:

Нужен для указания адреса картинок в теге <picture>, аудио в теге <audio> или видео в теге <video>. Он не используется как отдельный тег.

Атрибуты:

1. media - Определяет устройство, для которого будет воспроизводиться файл.
2. src - Адрес файла.
3. type - MIME-тип медийного источника.

Как прописать source в html:

<audio>
 <source src="URL">
</audio>
<video>
 <source src="URL">
</video>

SMALL (тег в HTML)

Что такое small в html:

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

Как прописать small в html:

<p>Это <small>мелкий</small> текст внутри большого предложения.</p>

SELECT (тег в HTML)

Что такое select в html:

Используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег <option>.

Атрибуты:

1. autocomplete - подсказка для функции автозаполнения формы;
2. disabled - делает элемент неактивным;
3. form - связывает список с формой;
4. multiple - позволяет выбрать несколько опций;
5. name - задает имя элемента, которое будет отправляться на сервер;
6. required - делает элемент обязательным для заполнения;
7. size - задает количество строк в списке.

Как прописать select в html:

<select multiple>
  <option value='apple'>Яблоко</option>
  <option value='banana'>Банан</option>
  <option value='orange'>Апельсин</option>
</select>

SECTION (тег в HTML)

Что такое section в html:

Создаёт независимый блок — например, блок новостей, блок с контактами или просто абзац с заголовком.

Как прописать section в html:

<section>
  <h1>Заголовок первого блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей чаю.</p>
</section>

<section>
  <h1>Заголовок второго блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей же чаю.</p>
</section>

SCRIPT (тег в HTML)

Что такое script в html:

Используется для встраивания скриптов на страницу, которые могут изменять её содержимое и поведение. Этот тег позволяет загружать скрипты из внешних файлов или встраивать их прямо в HTML-код страницы.

Атрибуты:

1. async - указывает, что скрипт асинхронный, выполнение скрипта не останавливает загрузку страницы.
2. defer - указывает, что скрипт отложенный, выполнение скрипта происходит после загрузки страницы.
3. src - путь к файлу скрипта, который нужно загрузить.
4. type - тип скрипта.
5. nomodule - предотвращает выполнение скрипта в браузерах, поддерживающих модульные скрипты.
6. crossorigin - способ обработки сквозных запросов.
7. integrity - метаданные для проверки целостности субресурсов [SRI].
8. referrerpolicy - правила использования ссылок для поиска.
9. blocking - позволяет потенциально блокировать рендеринг.
10. fetchpriority - приоритет для запущенных элементом запросов.

Как прописать script в html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Пример использования тега script</title>
  </head>
  <body>
    <h1>Мой первый скрипт</h1>
    <p>Привет! Посмотрите, какой скрипт я написал</p>
    <script src="path/to/script.js"></script>
  </body>
</html>

SAMP (тег в HTML)

Что такое samp в html:

Выделяет текст, который должен отображаться как код. Обычно этот элемент используется для отображения данных от программ или скриптов.

Как прописать samp в html:

<p>Выполните следующие команды:</p>
<samp>
$ cd my_project
$ npm install
$ npm start
</samp>

S (тег в HTML)

Что такое s в html:

Использовался для отображения текста, который должен быть перечёркнут — например, текста, который был исправлен, но всё ещё должен быть виден.

Как прописать s в html:

<p>Данный товар стоил <s>2000</s> 1500 рублей.</p>
<p>Предыдущее название компании было <s>ООО 'Стройстрой'</s>.</p>

RUBY (тег в HTML)

Что такое ruby в html:

Используется для создания руби-аннотаций — специального вида аннотаций или пометок над текстом. Элемент часто применяется в японской и китайской письменности для помощи в произношении или чтении иероглифов.

Вот как это работает: основной текст заключается в тег <ruby>, а дочернем элементе <rt> содержится фонетическое написание или произношение этого текста.

Как прописать ruby в html:

<p>Этот текст содержит <ruby>猫<rp>(</rp><rt>Māo</rt><rp>)</rp></ruby>, что означает «кошка» на китайском языке.</p>

Этот текст содержит 猫 Māo, что означает «кошка» на китайском языке.

RT (тег в HTML)

Что такое rt в html:

Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>. Сама аннотация выводится уменьшенным шрифтом.

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

Как прописать rt в html:

<ruby>
 текст
 <rt>аннотация</rt>
</ruby>

RP (тег в HTML)

Что такое rp в html:

Содержит текст, который будет отображаться в случае, если браузер не поддерживает теги <ruby>. Элемент должен быть вложен в тег <ruby> и использоваться только с ним.

Как прописать rp в html:

<ruby>
  愛<rp>(</rp><rt>Ài</rt><rp>)</rp>
  貓<rp>(</rp><rt>Māo</rt><rp>)</rp>
</ruby>

Q (тег в HTML)

Что такое q в html:

Используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

Атрибуты:

1. cite - Адрес, который указывает на источник цитаты.

Как прописать q в html:

<q>Текст</q>

PROGRESS (тег в HTML)

Что такое progress в html:

Показывает прогресс завершения задачи, заполнения формы, загрузки и других длительных процессов.

Атрибуты:

1. value - текущее значение индикатора прогресса.
2. max - максимальное значение. Этот атрибут нужно указывать всегда, иначе браузер не сможет правильно отобразить индикатор прогресса.

Как прописать progress в html:

<p>Страница загружается:</p>
<progress value='50' max='100'></progress>

PRE (тег в HTML)

Что такое pre в html:

Определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику. В отличие от тега <plaintext>, использование которого осуждается в HTML 4, внутри контейнера <pre> допустимо применять любые теги кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>.

Как прописать pre в html:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег PRE</title>
 </head>
 <body>
  <pre>
   ---              ---    
  ||----|          ----||  
  ||-----         -----||  
  ||-----|       |-----||
  || -----       ------||
  ||- ----|     |------||
  ||---||--     -------||
  ||--|| --|   |-------||
  || -|| |--   --- - --||
  || -||  --|-|--| - ---|
  |---||  |-----| |-----|
  |---||   |----  |-----|
  |----|    ---   |-----|
  |-----          ------|
 </pre>
</body>
</html>

PLAINTEXT (тег в HTML)

Что такое plaintext в html:

Отображает содержимое контейнера «как есть». Пока тег <plaintext> не закрыт, все теги внутри него отображаются как обычный текст. Несмотря на то, что все браузеры поддерживают этот тег, он не входит в спецификацию HTML и его использование осуждается.

Как прописать plaintext в html:

<plaintext>Текст</plaintext>

PARAM (тег в HTML)

Что такое param в html:

Использовался для определения параметров плагинов или апплетов, которые представляет собой небольшие программы, запускаемые внутри веб-страницы.

Атрибуты:

1. name - имя параметра.
2. value - значение параметра.

Как прописать param в html:

<param name="parameter_name" value="parameter_value">

P (тег в HTML)

Что такое p в html:

Является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Как прописать p в html:

<p>Текст</p>

OUTPUT (тег в HTML)

Что такое output в html:

Для отображения результатов вычислений или действий пользователя на веб-странице. Обычно он используется в сочетании с формой и JavaScript для выполнения вычислений и отображения результатов на странице.

Атрибуты:

1. for - идентификаторы одного или нескольких элементов, с которыми связан элемент <output>.
2. form - идентификатор формы, к которой принадлежит элемент <output>.
3. name - имя элемента <output>.

Как прописать output в html:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b"></output>
</form>

OPTION (тег в HTML)

Что такое option в html:

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

Атрибуты:

1. disabled - Заблокировать для доступа элемент списка.
2. label - Указание метки пункта списка.
3. selected - Заранее устанавливает определенный пункт списка выделенным.
4. value - Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Как прописать option в html:

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>