<blockquote>

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

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

Кратко

Секция статьи "Кратко"

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

Пример

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

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

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

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

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

Атрибут cite

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

        
        
          
        
      

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

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

Атрибуты

Секция статьи "Атрибуты"

К тегу <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;
}

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