Справочник HTML на P, Q, R

Тег <p>

Тег <p> — это абзац и основной «кирпичик» текстового содержимого на странице. Он начинается с новой строки, а между элементами <p> добавляется небольшой отступ.

Атрибуты

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

Синтаксис

<p>Это полный абзац!</p>

Тег <picture>

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

Внутри тега могут находиться один или несколько тегов <source>, и обязательно должен быть тег <img>.

Атрибуты

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

Пример 1

Четыре варианта изображений под разные экраны:

<picture>
 <source srcset="
      pic-small.webp 320w,
      pic-medium.webp 480w,
      pic-large.webp 768w">
  <img src="image/pic.jpg" alt="Картинка">
</picture>

Пример 2

Запасной вариант (PNG) для старых браузеров, которые не поддерживают формат SVG:

<picture>
     <source srcset="logo.svg">
     <img src="logo.png" alt="Логотип">
</picture>

Тег <pre>

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

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

При комбинации обоих элементов соблюдайте порядок вложенности: тег <code> можно размещать внутри тега <pre>, а не наоборот.

Атрибуты

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

Пример

Рисунок из специальных символов внутри тега <pre>:

┈┈┈☆☆☆☆☆☆┈┈┈
┈┈╭┻┻┻┻┻┻┻┻┻╮┈┈
┈┈┃╱╲╱╲╱╲╱╲╱┃┈┈
┈╭┻━━━━━━━━━┻╮┈
┈┃╱╲╱╲╱╲╱╲╱╲╱┃┈
┈┗━━━━━━━━━━━┛┈ 

Тег <progress>

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

Для индикатора числового значения в заданном диапазоне нужно использовать элемент <meter>.

Атрибуты

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

Пример

Загрузка файла:
<progress max="100"></progress>

Результат

Тег <q>

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

Для вставки большой цитаты в виде отдельного блока с отступами используют элемент <blockquote>.

Атрибуты

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

Пример

<p>Тут уместно вспомнить фразу из фильма: <q cite="Иван Васильевич меняет профессию">Меня терзают смутные сомнения…</q>.</p>

Результат

Тег <rp>

Тег <rp> используется для вывода текста в браузерах, которые не поддерживают элемент <ruby>. В остальных браузерах текст внутри <rp> игнорируется. Элемент <rp> должен идти до или после <rt>.

Атрибуты

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

Пример

<ruby>漢<rp>（</rp><rt>кан</rt><rp>）</rp>字<rp>（</rp><rt>дзи</rt><rp>）</rp></ruby>

Результат 1

Если браузер поддерживает элемент <ruby>:

Результат 2

Если браузер не поддерживает <ruby>:

Тег <rt>

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

Закрывающий тег элемента <rt> может быть опущен, если за элементом <rt> непосредственно следует другой <rt> или <rp>, или если в родительском элементе <ruby> больше нет содержимого.

Атрибуты

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

Пример

<ruby lang="ja">編集者<rt lang="en">editor</ruby>

Результат

Тег <ruby>

Тег <ruby> используется для добавления коротких аннотаций сверху или снизу от текста. Аннотации Ruby — это короткие текстовые подсказки, которые используются в восточноазиатской типографике в качестве ориентира для произношения или перевода (китайский, японский и т.п.).

Элемент <ruby> выступает контейнером для <rt>, который и формирует аннотацию к тексту. А <rp> используют для браузеров, которые не поддерживают <ruby>.

Атрибуты

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

Пример

<ruby lang="ja">編集者<rt lang="ru">редактор</ruby>

Результат