<blockquote>

Любой текст сильнее с цитатой! Как её правильно вставить в HTML?

Время чтения: меньше 5 мин

Кратко

Скопировано

Для вставки большой цитаты на страницу есть специальный семантический тег <blockquote>. Слово большой выделено, потому что для цитаты, которая скрывается в дебрях текста (внутристрочная) есть свой отдельный тег — <q>. Но сейчас не об этом 😉

У <blockquote> есть роль blockquote.

Пример

Скопировано
        
          
          <blockquote>  <p>    Ваша работа заполнит большую часть жизни и единственный способ быть    полностью довольным — делать то, что по-вашему является великим делом.    И единственный способ делать великие дела — любить то, что вы делаете.  </p></blockquote>
          <blockquote>
  <p>
    Ваша работа заполнит большую часть жизни и единственный способ быть
    полностью довольным — делать то, что по-вашему является великим делом.
    И единственный способ делать великие дела — любить то, что вы делаете.
  </p>
</blockquote>

        
        
          
        
      

Как пишется

Скопировано

Перед цитатой открываем тег <blockquote>, а после цитаты его закрываем. Изи!

Важно помнить, что сам этот тег только показывает, где цитата находится. Внутри неё нужно разметить текст подходящими по смыслу тегами. Например, о теге абзаца <p> не стоит забывать. Цитата может быть длинной, состоять из нескольких абзацев.

Правило хорошего тона — указывать источник, откуда цитата была взята. Для этого есть два способа на выбор:

Атрибут cite

Скопировано

Атрибут cite указывается после имени тега в открывающей части. Пример:

        
          
          <blockquote cite="http://www.vothouse.ru/points/citaty-steve-jobs/">  <p>    Ваша работа заполнит большую часть жизни и единственный способ быть    полностью довольным — делать то, что по-вашему является великим делом.    И единственный способ делать великие дела — любить то, что вы делаете.  </p></blockquote>
          <blockquote cite="http://www.vothouse.ru/points/citaty-steve-jobs/">
  <p>
    Ваша работа заполнит большую часть жизни и единственный способ быть
    полностью довольным — делать то, что по-вашему является великим делом.
    И единственный способ делать великие дела — любить то, что вы делаете.
  </p>
</blockquote>

        
        
          
        
      

Отдельный тег <cite>

Скопировано

В тег <cite> помещается либо название источника цитаты, либо ссылка на него, как в предыдущем примере. Визуально делает шрифт курсивным. Источник цитаты должен указываться за пределами тега <blockquote>.

        
          
          <blockquote>  <p>    Ваша работа заполнит большую часть жизни и единственный способ быть    полностью довольным — делать то, что по-вашему является великим делом.    И единственный способ делать великие дела — любить то, что вы делаете.  </p></blockquote><p>— Стив Джобс, <cite>Речь в Стенфорде</cite></p>
          <blockquote>
  <p>
    Ваша работа заполнит большую часть жизни и единственный способ быть
    полностью довольным — делать то, что по-вашему является великим делом.
    И единственный способ делать великие дела — любить то, что вы делаете.
  </p>
</blockquote>
<p>— Стив Джобс, <cite>Речь в Стенфорде</cite></p>

        
        
          
        
      

В теге <cite> или в атрибуте cite указывается именно источник цитаты, а не её автор!

Доступность

Скопировано

<blockquote> имеет смысл для скринридеров. Они рассказывают пользователям, что это не просто текст, а цитата.

Единственное предостережение — старайтесь не вкладывать <blockquote> внутрь <figure>. Скринридеры зачитают всё правильно, но с большим количеством деталей. Это утомительно слушать.

        
          
          <figure>  <blockquote>    <p>      Ваша работа заполнит большую часть жизни и единственный способ быть      полностью довольным — делать то, что по-вашему является великим делом.      И единственный способ делать великие дела — любить то, что вы делаете.    </p>  </blockquote>  <figcaption>    — Стив Джобс, <cite>Речь в Стенфорде</cite>  </figcaption></figure>
          <figure>
  <blockquote>
    <p>
      Ваша работа заполнит большую часть жизни и единственный способ быть
      полностью довольным — делать то, что по-вашему является великим делом.
      И единственный способ делать великие дела — любить то, что вы делаете.
    </p>
  </blockquote>
  <figcaption>
    — Стив Джобс, <cite>Речь в Стенфорде</cite>
  </figcaption>
</figure>

        
        
          
        
      

Атрибуты

Скопировано

К тегу <blockquote> можно применить любые глобальные атрибуты и атрибут источника цитаты cite.

Подсказки

Скопировано

💡 Сам по себе тег не размечает текст. Только показывает поисковым роботам и скринридерам, где на странице находится блок цитаты. Не забывайте про семантические теги для разметки текста внутри.

💡 При добавлении этого тега в разметку визуально ничего не изменится. Кавычки придётся добавлять самостоятельно 🙄

💡 В теге или атрибуте cite указывается ссылка на источник, а не автор.

💡 Это блочный элемент, обёрнутая в него цитата будет начинаться с новой строки.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Дизайнеры любят оформлять цитаты красивыми большими кавычками. Стоит помнить, что от одного лишь применения тега <blockquote> эти самые кавычки не появятся. Нужно будет добавить их. Я обычно делаю это при помощи псевдоэлементов. Так разметка не засоряется лишними тегами, а внешний вид кавычек можно будет гибко менять через стили.

        
          
          .quote {  position: relative;}.quote::before {  content: "“";  position: absolute;  left: 5rem;  top: 5rem;  font-family: sans-serif;}
          .quote {
  position: relative;
}

.quote::before {
  content: "“";
  position: absolute;
  left: 5rem;
  top: 5rem;
  font-family: sans-serif;
}

        
        
          
        
      
Открыть демо в новой вкладке