Blockquote перевод – blockquote tag — перевод с английского на русский , транскрипция, произношение, примеры, грамматика

<p>Здесь будет уместно изречение Мишеля де Монтеня:</p>   
<blockquote>
"Если я цитирую других, то лишь для того, чтобы лучше выразить свою собственную мысль".
</blockquote> 

Спецификации

Поддержка браузерами

Сite и blockquote: перезагрузка — Веб-стандарты

Недавно в спецификации HTML было изменено определение элементов

Изменения в определении <blockquote>

Элемент <blockquote> представляет контент, являющийся цитатой из другого источника, возможно, включающим упоминание этого источника, которое должно быть размещено внутри элементов <footer> или <cite>, и, возможно, содержащий примечания и сокращения.

Контент внутри элемента <blockquote>, за исключением отсылки к источнику и изменений в тексте, должен быть точной цитатой из другого источника, адрес которого, если таковой имеется, может быть указан в атрибуте cite.

4.51 the Blockquote element, Роберт Бержон и соавторы, 2013

Выделение в цитате авторское, прим. редактора.

Что изменения в <blockquote> значат для разработчиков

Прежде в HTML5 не было принято включать упоминание источника внутрь элемента <blockquote>. Сейчас ситуация изменилась, при условии, что упоминание источника находится внутри элемента <cite> или <footer>. Упоминание источника внутри цитаты — распространенный кейс (данные показывают, что приблизительно в 60% случаев <blockquote> содержит упоминание источника), изменения в спецификации HTML подтверждают это и обеспечивают семантический механизм дифференциации контента цитаты от упоминания ее источника.

Пример использования элементов <footer> и <cite> внутри <blockquote>:

<blockquote>
    <p>
        As my fellow HTML5 Doctor, Oli Studholme has showed,
        people seldom quote exactly – so sacrosanctity of the quoted
        text isn’t a useful ideal – and in print etc, citations almost
        always appear as part of the quotation –
        it’s highly conventional.
    </p>
    <footer>
        — <cite><a href="http://brucelawson.co.uk/2013/on-citing-
        quotations-again/">Bruce Lawson</a></cite>
    </footer>
</blockquote>
 

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

Редкий случай

Один из аргументов против использования cite и footer внутри blockquote для указания источника цитат состоит в том, что цитируемый контент сам по себе может содержать цитаты и ссылки на источники. Мы можем отбросить этот аргумент по той причине, что такие случаи крайне редки. Отказ от использования <cite>

Но если у вас возник такой случай, в настоящее время спецификация HTML предлагает вам просто закомментировать указание источника в коде цитаты. (Вопрос все еще открыт и этот совет может измениться):

(Добавлено 6.11.13, прим. редактора.) В ответ на отзывы, мы решили изменить наше предложение для спецификации так, чтобы использовать атрибут class (который может использоваться для расширения) элемента <cite> для обозначения, что это часть источника цитаты.

<blockquote>
    <p>
        My favorite book is
        <cite>At Swim-Two-Birds</cite>
    </p>
    <footer>
        — <cite>Mike[tm]Smith</cite>
    </footer>
</blockquote>

Изменения в определении <cite>

Элемент

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

4.51 the Cite element, Роберт Бержон и соавторы, 2013

Что изменения в <cite> значат для разработчиков

Ранее в HTML5 не было принято упоминать автора источника по имени или заключать другую информацию об источнике в элемент <cite>. Применение <cite> было зарезервировано (теоретически) для названия источника. Это было попыткой пересмотреть определение элемента, не менявшееся 14 лет.

Разработчики выступали против изменений в определении:

Присоединяйтесь к кампании гражданского неповиновения против излишне ограничительных, обратно-несовместимых изменений элемента <cite>

. Начните использовать HTML5, но начните использовать его разумно. Давайте посмотрим, как плохой совет канет в лету.

Джереми Кит, 2009

Они также приводили абстрактные и реальные примеры указания источника. Сейчас, в результате исследований, анализа данных и дискуссий, разработчики могут вновь использовать <cite> для того, чтобы разными способами сослаться на источник: например, указать название работы, имя автора или ссылку на источник. Мы теряем в теоретической чистоте, но выигрываем в удобстве использования:

Сколько раз в день тег <cite>, содержащий гиперссылку, опубликуется на веб-страницах? По меньшей мере, 70 миллиардов раз, т.е. примерно в 10 ссылках на странице результатов поиска Google.

Одна из причин, почему элемент <cite> теперь можно использовать для гиперссылок (даже не упоминая про идентичную ситуацию с Bing).

Стив Фолкнер, 22 октября 2013

Что вы думаете?

Пожалуйста, прочитайте определения в спецификации HTML 5.1, нам интересно ваше мнение!

Огромное спасибо «доктору» Оли, чье исследование помогло подготовить изменения, произошедшие с элементами <cite> и <blockquote>. И «доктору» Брюсу за то, что настаивал на своем праве цитировать свою маму.

Перевод оригинальной статьи «Cite and blockquote — reloaded» Стива Фолкнера (Steve Faulkner), опубликованной на сайте HTML5Doctor.com.

Перевод выполнили: Наташа Арефьева и Юлия Бухвалова, редактура Вадима Макеева и Ольги Алексашенко

Теги: html, html5doctor, семантика

Цитирование в HTML: выбираем теги правильно

Перевод статьи «Quoting in HTML: Quotations, Citations, and Blockquotes».

Неправильное использование HTML-тегов для обозначения цитат встречается слишком часто. В этой статье мы углубимся в эту тему, разберем разные ситуации и рассмотрим, какие теги для них подходят.

При оформлении цитат используются три основных элемента:

Давайте по ним пройдемся.

Элемент <blockquote>

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

По умолчанию браузеры выделяют цитату при помощи отступа, добавляя margin с каждой стороны.

See the Pen The Blockquote Tag by Undead Institute (@undeadinstitute) on CodePen.

Как блочный элемент, <blockquote> может содержать внутри себя другие элементы. Например, мы без п

Цитата Blockquote

<blockquote> Текст цитаты </blockquote>

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

или так

В стандартных шаблонах Blogspot обычно отсутствует (все не проверяла) css код blockquote, поэтому если вы будете использовать коды цитат в записях, то у вас ничего не изменится. Вначале нужно провести работу над шаблоном блога. В нестандартных шаблонах Blogger часто уже прописаны цитаты, но вполне возможно, что вы захотите изменить их стиль. Из этой статьи вы также узнаете, как это можно сделать, а также вы найдете примеры кодов css blockquote.

Оформление Blockquote

1. Перейдите в Blogger> Шаблон > Изменить HTML,
2. Сделайте резервное копирование шаблона,
3. Расширьте шаблон виджета и при помощи клавиши Ctrl + F найдите отрезок кода .post blockquote Чаще всего он выглядит следующим образом:

   .post-body blockquote { line-height:1.3em; }
   OR
   .post blockquote{ bla bla bla}

   Удалите этот код с содержимым {…} и замените на любой код, оформления цитаты, который вам понравится (примеры цитат с кодами будут приведены в этой записи ниже) или вы можете сами создать свой стиль.

4. Вы можете не найти код Blockquote. В этом случае вам нужно найти отрезок кода ]]> </b:skin> и вставить перед ним код выбранного стиля цитаты.
   Код цитаты css

   .post blockquote {
   margin : 0 20px;
   padding: 60px 30px 40px 20px;
   background : #F1F8FE url(URL изображения) no-repeat 350px 5px;
   font: normal .9em «comic sans ms», Courier,»Times New Roman», Times, serif;
   color : #000;
   border: 8px dotted #DAB547;
   }
   .post blockquote p {
   margin: 0;
   padding-top:10px;
   }

   Настройка кода

   • padding: Отступы цитаты от границ, которые идут в таком порядке –> сверху, справа, снизу, слева
   • background : – Цвет фона или изображение, используемые в цитате. Шестизначный значение цвета фона  или ссылка на изображение –> замените код, выделенный желтым на прямую ссылку на изображение (URL изображения)
   • font : — Она включает в себя шрифт стиль , размер и тип соответственно.Соответствие цвета с кодом выше ссылке.
   • color : —  цвет текста. Вы можете подобрать различные цвета шрифта, используя нашу таблицу цвета
   • border : – Граница и ее значения — width, style and color – ширина, стиль и цвет соответственно.
   • Все остальные цитаты можно настроить таким же образом.
5. Сохраните шаблон. Вставляйте код <blockquote><div> Текст цитаты </div></blockquote> в режиме HTML при использовании цитаты в сообщении.

Примеры цитат blockquote и коды к ним

Код:

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s1600/owl.png) no-repeat 350px 5px;
font: normal .9em «comic sans ms», Courier,»Times New Roman», Times, serif;
color : #000;
border-left: 8px dotted #DAB547;
}
blockquote p {
margin: 0;
padding-top:10px;
}

Код:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s1600/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, «Times New Roman», Times, serif;
color : #000;
border-bottom : 5px solid #435388;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Код:

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s1600/block22.gif) no-repeat right bottom;
font: bold .9em «comic sans ms», arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Код:

.post blockquote {
background: #F3F3F1 url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, «Times New Roman», Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Код:

blockquote {
background: #484B52 url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, «Times New Roman»;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Код:

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s1600/angular-right.gif) no-repeat bottom right;
font: bold italic 1em  Georgia, verdana, Helvetica,  «Times New Roman», Times, serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Код:

.post blockquote {
  font: italic 1em  «comic sans ms», Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s1600/comma2-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s1600/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Код:

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s1600/comma-left.gif) no-repeat top left;
  text-indent: 65px;
  }
  .post blockquote div {
    display: block;
    background: url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s1600/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Код:

.post blockquote {
  font:bold italic .9em  «comic sans ms», Tahoma, sans-serif;
  padding-top: 25px;
  margin: 5px;
  background: url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb5kCZUGZI/AAAAAAAACP8/UEMNYwjmokk/s1600/left.gif) no-repeat top left;
  text-indent: 65px;
color:#6299E4;
  }
  .post blockquote div {
    display: block;
    background: url(https://4.bp.blogspot.com/_7wsQzULWIwo/Swb52LlPk-I/AAAAAAAACRE/_MC7HQLGIng/s1600/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Код:

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s1600/head2.gif) no-repeat top;
font: normal 1em «comic sans ms», Helvetica, verdana;
color : #666;
}
.post blockquote div{
background : #E6F1FA url(https://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s1600/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}

Коды цитат взяты отсюда

Использование кавычек, цитат и тега q

От автора: при правильном использовании часто игнорируемых, а с другой стороны часто злоупотребляемых тегов <blockquote>, <cite> и <q> можно создавать по-настоящему семантически и типографски богатые страницы.

Главная идея, которую стоит держать в голове, в том, что эти элементы используются для разграничения слов или цитат в общем контенте страницы, но не относящихся к контексту. Вот почему теги <blockquote>, <cite> и <q> почти всегда содержат контент от других людей.

Цитата

Тег <blockquote> это блочный элемент и несет в себе развернутую цитату. К примеру:

<blockquote> Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею </blockquote>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Тут стоит отметить пару вещей:

Тег <blockquote> не создает автоматически кавычки вокруг цитаты: если это необходимо, вам придется добавить их самому или как символы, или как спецсимволы HTML, или как генерируемый контент.

По умолчанию тег цитаты отталкивает слегка текст от левого и правого краев. По этой причине его часто используют для отступов. Говорить о том, что лучше так не делать вовсе излишне: если вам нужно подвинуть элемент просто добавьте к нему margin-left в CSS, а не тег <blockquote>.

Тег цитаты используется для цитирования текста, который уже есть на странице в форме ярко оформленных цитат.

Обычно перед применением <blockquote> текст оборачивается в тег <p>. В HTML5 уже можно цитировать и без тега параграфа, но практика пока что сохраняется (смотрите ниже).

Кроме того

Тег цитаты по умолчанию не ссылается на основной источник. Это можно сделать разными способами: первый это атрибут <cite>.

<blockquote cite=»https://archive.org/stream/westernphilosoph035502mbp/westernphilosoph035502mbp_djvu.txt»> Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею </blockquote>

Но к несчастью, ни один известный мне браузер на сейчас не использует этот атрибут. Как альтернатива атрибуту cite, сослаться на источник можно, добавив тег <footer> и/или тег <cite> внутри цитаты <blockquote>:

<blockquote> <p>Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.</p> <footer> <p>- Бертран Рассел, История западной философии</p> </footer> </blockquote>

Обычно название книги или имя автора помещается в ссылку. Это делается для того, чтобы читатель мог найти больше информации об авторе.

Тег q

Предназначен для коротких цитат внутри предложений. К примеру:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

<p>As Voltaire said: <q>Every man is a creature of the age in which he lives and few are able to raise themselves above the ideas of the time.</q>

Пару замечаний: Тег <q> автоматически создает открывающие и закрывающие одинарные скобки для текста на английском языке. В других языках используются другие знаки, не все из них поддерживаются всеми браузерами. К примеру, цитата на немецком:

<html lang=»de»> <p>Wie Goethe sagte: <q>Man sieht nur das, was man weiß.</q>

Цитата должна отобразиться с немецкими кавычками: «Man sieht nur das, was man weiß». В современных Webkit браузерах проблемы с этим не возникает, а вот в Firefox они есть. В Firefox можно пофиксить с помощью CSS:

:lang(de) > q { quotes: «„» «“» «‚» «‘» }

В википедии можно найти кавычки для других языков. Огромная благодарность Gunnar Bittersmann, что заметили одно исключение. Два замечания:

Важно понять, что тег <q> предназначен для цитирования сторонних источников, а не для выделения части текста или фразы на той же странице.

Как и с тегом <blockquote> к элементу <q> можно добавить атрибут cite, чтобы указать ссылку на источник.

Тег Cite

Крайне смутная информация в HTML об элементе cite, который одновременно является тегом и атрибутом. В качестве тега его используют для ссылки на какую-либо работу: книга, кино, телевизионное шоу, сценическая постановка, музыкальный альбом или программное обеспечение. Чтобы дополнить статью информацией, тег <cite> можно использовать вместе с микроданными.

<p>Like many thick tomes, <cite>Atlas Shrugged</cite> exists on the shelf of most readers as a book to be bragged about, rather than one to be read or analysed.

Визуально тег <cite> делает текст курсивным, хотя и не должен для этого использоваться вовсе (для этого есть <em> или <i>). <cite> содержит название работы, автора, ссылку (ссылка именно видна в отличие от href). В первом нашем примере <cite> можно использовать так:

<blockquote> <p>“ Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.”</p> <footer> <p>― Бертран Рассел, <cite>История западной философии</cite></p> </footer> </blockquote>

Заключение

Теги <blockquote>, <cite> и <q> крайне полезны… особенно если их использовать по назначению. В паре с другими тегами HTML, используемых для редактирования текста, вы получаете в свою копилку полный и очень богатый набор инструментов.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля