Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Цитата HTML

теги: html, css, типографика

Бывают ситуации, когда необходимо процитировать какую-то выдержку из статьи или книги на своем сайте, и именно в таком случае становится незаменимым тег blockquote HTML, который служит для отображения цитат на веб-странице. Используется blockquote следующим образом:

<!DOCTYPE html>
<html>
 <head>
  <title>Цитата в HMTL - "Нубекс"</title>
  <meta charset="utf-8">
  <style>
   blockquote:before, blockquote:after {
    font-size: 2.5em;
    color: red;
   }
   blockquote:before {
    content: '«';
    float: left;
   }
   blockquote:after {
    content: '»';
    float: right;
   }
   blockquote p {
    margin: 0.8em 2.5em;
   }
  </style>
 </head>
 <body>
  <p>Хочу привести следующую цитату:</p>
    <hr />
  <blockquote>
   <p align="center">Что бы такого ещё съесть, чтобы похудеть?</p>
  </blockquote>
    <hr />
 </body>
</html>

В данном примере цитата обрамляется кавычками (blockquote:before и blockquote:after) и горизонтальными разделителями сверху и снизу.

Помимо приведенного тега, цитату в тексте можно выделить при помощи тега q:

<!DOCTYPE html>
<html>
 <head>
  <title>Цитата в HMTL (тег q) - "Нубекс"</title>
  <meta charset="utf-8">
  <style>
   q {
    font-family: Serif;
    color: blue;
    font-style: italic, bold;
    quotes: "\00AB" "\00BB"; 
   }
  </style>
 </head>
 <body>
  <p>К сожалению, актуальна и по сей день фраза: <q>Он ее одел, а она его обула.</q></p>
  <p><cite>http://nubex.ru</cite></p>
 </body>
</html>

Поскольку в различных языках существуют свои традиции в использовании кавычек, иногда нужно использовать другие, отличные от стандартных. Изменить кавычки для обрамления цитаты можно при помощи свойства quotes. В приведенном примере в качестве обрамления цитаты используются традиционные для русского языка кавычки-ёлочки.

В тегах <cite></cite> можно дополнительно указать источник цитаты, ссылку или сноску на другой документ.

В конструкторе сайтов "Нубекс" есть возможность добавления красивых цитат при помощи визуального редактора.

Комментарии 0