Элементы цитирования и направление текста

Чтение — около 6 минут· без учёта практики

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

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

Короткие цитаты

Элемент <q> (англ. quote) выделяет короткую цитату внутри строки. Браузер автоматически добавляет открывающие и закрывающие кавычки, поэтому вручную их не ставят. Вид кавычек зависит от языка, указанного атрибутом lang: для русского текста браузер выводит «ёлочки», для английского — “лапки”.

Короткая цитата q

Браузер сам добавляет кавычки вокруг элементов q: в русских абзацах — «ёлочки», в абзаце с lang="en" — английские кавычки. Допишите кавычки вручную внутри q и посмотрите, что получится.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Короткие цитаты</title>
  </head>
  <body>
    <p><q cite="https://ru.wikisource.org/wiki/Каштанка_(Чехов)">Надо жить мирно и дружно</q> — говорит новый хозяин Каштанки в рассказе Антона Чехова «Каштанка».</p>
    <p>Хозяин любит повторять: <q>Тони — лучший сторож в доме</q>.</p>
    <p lang="en">Tony's owner says: <q>Tony is the best guard in the house</q>.</p>
  </body>
</html>

Атрибут cite хранит адрес источника цитаты в HTML-коде. На странице этот адрес не отображается, и сама цитата не становится ссылкой. Его может прочитать программа или скрипт — например, чтобы собрать список источников всех цитат на странице. Если вы хотите, чтобы посетитель мог перейти к источнику, добавьте обычную ссылку <a> рядом с цитатой.

В атрибуте cite допускаются как абсолютные адреса (например, <q cite="https://basicweb.ru/html/tag_q.php">), так и относительные (например, <q cite="tag_q.php">).

Длинные цитаты

Элемент <blockquote> (англ. block quotation) обозначает длинную цитату, вынесенную отдельным блоком. Браузер по умолчанию выводит её с отступами слева и справа (40 пикселей). Внутри <blockquote> размещают абзацы, списки и другие блочные элементы цитируемого текста. Кавычки браузер не добавляет.

Атрибут cite работает так же, как у <q>: указывает адрес источника и не отображается для посетителя.

Имя автора и название источника — не часть цитаты, поэтому их не помещают внутрь <blockquote>. Удобно объединить цитату и подпись элементом <figure>, который мы разобрали в уроке «Теги разметки страницы»: цитата — содержимое иллюстрации, а автор — подпись <figcaption>.

Длинная цитата с подписью

Начало рассказа «Каштанка» показано дважды: сначала в blockquote с атрибутом cite, затем — вместе с подписью автора и ссылкой на источник внутри figure. Подпись оформлена элементом figcaption. Сравните примеры: атрибут cite не виден, а по ссылке в подписи можно перейти к рассказу. Отступы слева и справа добавляет браузер.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Длинные цитаты из «Каштанки»</title>
  </head>
  <body>
    <p>Тони слушает рассказ Антона Чехова «Каштанка». Вот его начало:</p>
    <blockquote cite="https://ru.wikisource.org/wiki/Каштанка_(Чехов)">
      <p>Молодая рыжая собака — помесь такса с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
    </blockquote>
    <p>Та же цитата с подписью и ссылкой на источник:</p>
    <figure>
      <blockquote cite="https://ru.wikisource.org/wiki/Каштанка_(Чехов)">
        <p>Молодая рыжая собака — помесь такса с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
      </blockquote>
      <figcaption>— Антон Чехов, <cite><a href="https://ru.wikisource.org/wiki/Каштанка_(Чехов)">«Каштанка»</a></cite></figcaption>
    </figure>
  </body>
</html>

Название произведения

Элемент <cite> (англ. citation) выделяет название произведения: книги, статьи, фильма, песни, картины, игры, сайта. По умолчанию браузеры отображают его курсивом.

Название произведения cite

Хозяин выбирает рассказы о собаках для чтения с Тони. Элемент cite выделяет названия «Белый пудель» и «Каштанка», а имена авторов остаются за его пределами. Добавьте абзац о своей любимой книге и разметьте её название элементом cite.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Названия произведений</title>
  </head>
  <body>
    <p>В списке рассказов для чтения с Тони есть <cite>«Белый пудель»</cite> Александра Куприна.</p>
    <p>Хозяин читал Тони вслух рассказ <cite>«Каштанка»</cite> Антона Чехова.</p>
  </body>
</html>

Дополнительно: направление вывода текста

Этот и следующий разделы — дополнительный материал. Он пригодится вам для общего развития.

Русский и английский читают слева направо, а арабский и иврит — справа налево. Направление текста задаёт глобальный атрибут dir со значениями ltr (англ. left-to-right, слева направо), rtl (англ. right-to-left, справа налево) и auto (браузер определяет направление по тексту). Для страницы на арабском языке его указывают у элемента <html>: <html lang="ar" dir="rtl">.

Элемент <bdo> (англ. bidirectional override) принудительно переопределяет направление вывода текста. Он применяется с атрибутом dir и значением ltr или rtl.

Переопределение направления текста bdo

Во втором абзаце элемент bdo с dir="rtl" выводит буквы русской фразы в обратном порядке. Замените rtl на ltr и сравните.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Элемент bdo</title>
  </head>
  <body>
    <p><bdo dir="ltr">Направление текста слева направо.</bdo></p>
    <p><bdo dir="rtl">Направление текста справа налево.</bdo></p>
  </body>
</html>

Элемент <bdi> (англ. bidirectional isolate) изолирует фрагмент текста, направление которого может отличаться от окружающего, и позволяет браузеру правильно показать двунаправленный текст. Он полезен, когда на страницу подставляется заранее неизвестный текст — например, имена пользователей: браузер сам определит направление имени и не смешает его с соседними числами и знаками препинания.

Изоляция имени с другим направлением письма

В двух списках показаны одинаковые имена посетителей сайта Тони. Без bdi число 99 и двоеточие оказываются перед именем, записанным арабскими буквами, рядом со словом «Посетитель». С bdi имя изолировано, а число остаётся перед словом «комментариев». Замените оба тега bdi вокруг арабского имени на span и сравните результат.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Имена посетителей сайта Тони</title>
  </head>
  <body>
    <h1>Комментарии на сайте Тони</h1>
    <h2>Без изоляции имени</h2>
    <ul>
      <li>Посетитель <span>Alex</span>: 12 комментариев</li>
      <li>Посетитель <span>إيان</span>: 99 комментариев</li>
    </ul>
    <h2>С изоляцией имени через bdi</h2>
    <ul>
      <li>Посетитель <bdi>Alex</bdi>: 12 комментариев</li>
      <li>Посетитель <bdi>إيان</bdi>: 99 комментариев</li>
    </ul>
  </body>
</html>

Дополнительно: подсказки произношения в восточноазиатских языках

В HTML есть элементы <ruby>, <rt> и <rp> для руби-аннотаций — небольших подсказок к основному тексту. В японском языке подсказки чтения иероглифов называют фуриганой или ёмиганой.

Фуригана, как правило, отображается мелким шрифтом над иероглифами (основным текстом) и подсказывает, как их читать. Внутри элемента <ruby> основной текст записывают как есть, а подсказку к нему — в элементе <rt> сразу после него.

Элемент <rp> содержит скобки, которые увидит пользователь браузера без поддержки <ruby>: тогда подсказка выведется в строку, в скобках после иероглифа. Браузер, который поддерживает <ruby>, а сейчас это все распространённые браузеры, содержимое <rp> не показывает.

Подсказка произношения ruby

В первом абзаце слово 漢字 («кандзи», иероглифы) имеет отдельную подсказку для каждого знака: かん и じ. Во втором чтение とうきょう («Токио») относится ко всему слову 東京. Подсказки записаны в rt, а скобки внутри rp скрыты. Удалите элементы rp вместе со скобками: в браузере с поддержкой ruby вид не изменится, но запасного варианта со скобками больше не будет.

index.html

HTML

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Элементы ruby, rt и rp</title>
  </head>
  <body>
    <p>
      <ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
    </p>
    <p>
      <ruby>東京<rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby>
    </p>
  </body>
</html>

Проверьте себя

Задание

Тони хочет рассказать гостям, что о нём говорит хозяин и какую книгу о собаке ему читали вслух. В редакторе ниже — сайт из предыдущего урока; в конце главной страницы уже есть новый раздел «Моя любимая книга» с неразмеченным текстом.

В файле index.html:

в конец первого абзаца о Тони добавьте фразу: Хозяин говорит: Тони — лучший сторож в доме. Слова хозяина оформите короткой цитатой без кавычек в коде;
в разделе «Моя любимая книга» выделите название рассказа «Каштанка» как название произведения;
второй абзац раздела — отрывок из рассказа — оформите длинной цитатой, а строку с автором — подписью к ней; объедините цитату и подпись элементом <figure>.

Ожидаемый результат: слова хозяина выведены в кавычках-«ёлочках», которые добавил браузер. Название «Каштанка» выделено курсивом, отрывок из рассказа сдвинут вправо, а подпись «— Антон Чехов, „Каштанка“» стоит под ним с тем же отступом.

Выполните задание

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body>
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1 id="top">Привет! Меня зовут Тони</h1>
      <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду.</p>
      <p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
      <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      <ul>
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
      </ul>
      <section>
        <h2 id="toy" class="section-title">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption>Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2>Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands" class="section-title">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <section>
        <h2>Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ «Каштанка» Антона Чехова. Он начинается так:</p>
        <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
        <p>— Антон Чехов, «Каштанка»</p>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/toys.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Игрушки Тони</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <section>
        <h2 id="album">Мой фотоальбом</h2>
        <ul>
          <li>
            <figure>
              <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
              <figcaption>Я в детстве</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
              <figcaption>С плюшевой белкой</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
              <figcaption>В худи для холодной погоды</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
              <figcaption>Шлейка надета — идём гулять!</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
              <figcaption>Смеюсь над шуткой хозяина</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
              <figcaption>После прогулки</figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

Продолжите в VS Code

Нажмите «Скачать ZIP» в редакторе выше и распакуйте архив в папку my-site: он содержит все страницы и ресурсы примера с вашими текущими правками. Сохраните структуру папок; перед заменой существующих файлов сохраните копию своей версии сайта.
Откройте index.html в браузере и найдите новый раздел.

Ожидаемый результат: страница в браузере выглядит так же, как в редакторе.

Если результат отличается и найти ошибку не получается, нажмите в редакторе выше «Показать решение» и сравните его со своим кодом. Затем снова скачайте ZIP — теперь уже с решением.

Дополнительное задание: читательский дневник Тони

Оформите отдельную заметку о чтении «Каштанки» с Тони. Текст уже есть в редакторе. Переносить заметку в основной сайт не нужно: здесь мы закрепляем оформление цитат и ссылок на источник.

Первый абзац с описанием собаки оформите элементом <blockquote>. В его атрибуте cite укажите адрес рассказа из последней строки.
Объедините длинную цитату и подпись автора в <figure>, а подпись поместите в <figcaption>. Название «Каштанка» разметьте элементом <cite> и сделайте ссылкой на рассказ. Имя автора оставьте за пределами <cite>.
Слова «Надо жить мирно и дружно» оформите короткой цитатой <q> с тем же адресом в атрибуте cite. Кавычки вручную не добавляйте.
Удалите служебную строку «Источник: …»: адрес уже указан в атрибутах и в видимой ссылке.

Ожидаемый результат: длинная цитата показана с отступами и подписью автора, а короткая — в кавычках, добавленных браузером. Название рассказа в подписи ведёт к источнику. Оба атрибута cite содержат тот же адрес, но сами на странице не отображаются.

Читательский дневник Тони

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Читательский дневник Тони</title>
  </head>
  <body>
    <h1>Читаем «Каштанку» с Тони</h1>
    <p>Молодая рыжая собака — помесь такса с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
    <p>— Антон Чехов, «Каштанка»</p>
    <p>Новый хозяин Каштанки говорит: Надо жить мирно и дружно.</p>
    <p>Источник: https://ru.wikisource.org/wiki/Каштанка_(Чехов)</p>
  </body>
</html>