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

Содержание

| HTML | WebReference

Элемент <blockquote> (от англ. block quote — блок с цитатой) предназначен для выделения длинных цитат внутри документа. Текст внутри <blockquote> отображается как выровненный блок с отступами слева и справа (по 40 пикселей), а также с отбивкой сверху и снизу.

Синтаксис

<blockquote>Цитата</blockquote>

Закрывающий тег

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>blockquote</title>
 </head>
 <body> 
  <p>Возможно, Ленин использовал фразу А. П. Чехова из произведения 
  «Моя жизнь (рассказ провинциала)» гл. VI, первая публикация которого 
  была в приложении к «Ниве» в 1896 г.</p>
  <blockquote>
   Учиться нам нужно, учиться и учиться, а с глубокими
   общественными течениями погодим: мы ещё не доросли 
   до них и, по совести, ничего в них не понимаем.
  </blockquote>
 </body>
</html>

Результат данного примера показан на рис. 1.

Применение blockquote

Рис. 1. Применение <blockquote>

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Тег | HTML справочник

HTML теги

Значение и применение

HTML тег <blockquote> (HTML Block Quotation Element) используется для определения в документе блочной цитаты (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа (по умолчанию 40 пикселей).

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

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

Атрибуты

АтрибутЗначениеОписание
citeURLУказывает URL адрес ресурса/документа, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера.
Допускается указывать как абсолютные адреса (например: <blockquote cite = "http://basicweb.ru/html/tag_blockquote.php">), так и относительные (например: <blockquote cite = "tag_blockquote.php">.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования блочных цитат</title>
	</head>
	<body>
		<h4>Пример использования коротких цитат:</h4>
		<p><q> Деньги не пахнут </q> - фраза, которую, как считается, произнёс император Веспасиан.</p>
		<hr>
		<h4>Пример использования длинных цитат:</h4>
		<p>Здесь информация с сайта «Википедия»:</p>
		<blockquote cite = https://ru.wikipedia.org/wiki/Pecunia_non_olet> 
		Деньги не пахнут - крылатое латинское выражение. Слова, приписываемые императору Веспасиану,
		якобы произнесенные им после получения денег от налога на общественные уборные Рима
		и обращённые к его сыну Титу, который выразил неудовольствие по этому поводу. </blockquote>
		<hr>
	</body>
</html>

Атрибут cite указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера.

Ниже приведён пример, как это отбражается в браузере (к заголовкам применен тег <h4>, а между примерами использован тег <hr> – горизонтальная черта):

Пример использования коротких и длинных цитат в HTML.

Отличия HTML 4.01 от HTML 5

В HTML 4.01 элемент определял длинную цитату, а в HTML5 определяет раздел, который цитируется из другого источника.

Значение CSS по умолчанию

blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги

| Справочник HTML



Элемент <blockquote> (от англ. "block quote" ‒ «блочная цитата») предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселей), а также с отбивкой сверху и снизу.

Примечание: Для использования коротких (строчных) цитат в документе, существует специальный HTML элемент <q>.

Синтаксис

<blockquote>Цитата</blockquote>

Закрывающий тег

Обязателен.

Атрибуты

cite
Адрес, который указывает на источник цитаты.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <blockquote> со следующими значениями CSS по умолчанию:

blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

Различия между HTML 4.01 и HTML5

В HTML 4.01 элемент определял длинную цитату, а в HTML5 определяет раздел, который цитируется из другого источника.

Пример использования:

Элемент <blockquote>

Пример HTML:

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

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

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

Элемент
<blockquote> 3+ 1+ 3.5+ 1+ 1+ 1+
Элемент
<blockquote> 1+
1+
6+ 1+


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

Недавно в спецификации HTML было изменено определение элементов <blockquote> и <cite>. В статье рассказывается, что это значит для разработчиков.

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

Но если у вас возник такой случай, в настоящее время спецификация 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> Текст цитаты </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

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

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

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

Цитата

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

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

<blockquote>

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

</blockquote>

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

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

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

Узнать подробнее

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

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

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

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

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

Кроме того

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

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

<blockquote cite="https://archive.org/stream/westernphilosoph035502mbp/westernphilosoph035502mbp_djvu.txt">

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

</blockquote>

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

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

<blockquote>

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

<footer>

<p>- Бертран Рассел, История западной философии</p>

</footer>

</blockquote>

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

Тег q

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

Другими словами: Использование кавычек, цитат и тега 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>

<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>

<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: "„" "“" "‚" "‘" }

: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.

<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>

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

    <footer>

        <p>― Бертран Рассел,

        <cite>История западной философии</cite></p>

    </footer>

</blockquote>

Заключение

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

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

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

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

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

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

Узнать подробнее Другими словами: Использование кавычек, цитат и тега q

PSD to HTML

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

Смотреть

Отправить ответ

avatar
  Подписаться  
Уведомление о