<blockquote>

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

Атрибут 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> помещается либо название источника цитаты, либо ссылка на него, как в предыдущем примере. Визуально делает шрифт курсивным. Источник цитаты должен указываться за пределами тега <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 указывается ссылка на источник, а не автор.

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

        
          
          .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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать