Как сделать цитату в html

Добавил пользователь Евгений Кузнецов
Обновлено: 16.09.2024

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

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

Результат в браузере

Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:

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

Тег или выделяем небольшие цитаты

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

Пример выделения цитат

Результат в браузере

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

Чему бы ты ни учился, ты учишься для себя . Петроний.

Тег
или принудительный обрыв строки

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

Тег
тоже является встроенным (inline) элементом и пусть вас не запутает то, что он осуществляет перенос строки после себя, просто у него функция такая. Кроме этого, у элемента
нет закрывающего тега, то есть он является пустым, потому что не может иметь содержимого.

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

Результат в браузере

Цель творчества — самоотдача,
А не шумиха, не успех.
Позорно, ничего не знача,
Выть притчей на устах у всех.
Б. Пастернак.

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

Кстати, довольно часто на сайтах можно увидеть, что
используют лишь для того, чтобы создать несколько пустых строк. Да, если его указать подряд несколько раз (


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

Данная цитата с сайта фонда:

Втечении 50 лет, Всемирный фонд дикой природы защищает будущее природы. Ведущая мировая организация по сохранению природы, WWF работает в 100 странах и поддерживается 1,2 миллионом членов в США и около 5 миллионов членов во всем мире.

Цитирование

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

Браузеры, как правило, обычно делают отступ строк с помощью элемента .

Пример

Цитата с сайта фонда:



За 50 лет, Всемирный фонд дикой природы защищает будущее природы.
Это ведущая мировая организация по сохранению природы,
WWF работает в 100 странах и поддерживается
,2 миллионами членов в США и
около 5 миллионов во всем мире.

Короткое цитирование

HTML элемент , определяет короткую цитату.

Браузеры, как правило, вставляет кавычки с помощью элемента .

Пример

Цель WWF: Построить будущее, где люди будут жить в гармонии с природой.

Аббревиатура

Маркировка аббревиатур может дать полезную информацию браузерам, системам перевода и поисковым системам.

Совет: Используйте атрибут global title для отображения описания аббревиатуры/акронима при наведении курсора мыши на элемент.

Пример

Контактная информация

Контактная информация может быть адресом электронной почты, URL адресом, физическим адресом, номером телефона, ручкой социальных сетей и т.д.

Пример

Ул Томская 44 -39, г.Пермь

Название работы

HTML элемент определяет название творческого произведения (например, книги, стихотворения, песни, фильма, картины, скульптуры и т. д.).

Примечание: Имя человека - это не название произведения.

Текст в книге элемент обычно визуализируется как italic.

Пример

Картина Крик Эдварда Мунка, написана в 1893.

Двунаправленное переопределение

BDO расшифровывается как двунаправленное переопределение.

HTML элемент используется для переопределения текущего направления текста:

Пример

HTML Упражнения

HTML Цитаты и элементы цитирования

Тег Описание
Определяет аббревиатура или акроним
Определяет контактную информацию документа автора/владельца
Определяет направление текста
Определяет раздел, который процитирован из другого источника
Определяет название работы
Определяет короткие цитаты

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

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

Пример

Как пишется

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

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

не стоит забывать. Цитата может быть длинной, состоять из нескольких абзацев.

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

Атрибут cite

Атрибут cite указывается после имени тега в открывающей части. Пример:

Отдельный тег

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

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

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

Атрибуты

К тегу можно применить любые глобальные атрибуты и атрибут источника цитаты cite .

Подсказки

💡 Сам по себе тег не размечает текст. Только показывает поисковым роботам и скринридерам, где на странице находится блок цитаты. Не забывайте про семантические теги для разметки текста внутри.

💡 При добавлении этого тега в разметку визуально ничего не изменится. Кавычки придётся добавлять самостоятельно 🙄

💡 В теге или атрибуте cite указывается ссылка на источник, а не автор.

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

На практике

Алёна Батицкая

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

HTML-элемент (от англ. Block Quotation) указывает на то, что заключённый в нем текст является развёрнутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом .

Исходный код этого интерактивного примера находится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос.

Категории контента Основной контент, секционный корень, явный контент.
Разрешённый контент Основной контент.
Опускание тегов Нет, открывающий и закрывающий теги обязательны.
Разрешённые родительские элементы Любой элемент, который принимает основной контент.
Разрешённые ARIA роли Любые
DOM интерфейс HTMLQuoteElement (en-US)

Атрибуты

Пример

Результат:

This is a quotation taken from the Mozilla Developer Center.

Цитата бывшего чемпиона мира по боксу и мэра Киева Виталия Кличко:

А сегодня в завтрашний день не все могут смотреть. Вернее смотреть могут не только лишь все, мало кто может это делать.

HTML элемент для коротких цитат

HTML элемент определяет короткие цитаты.

Браузеры обычно вставляют кавычки вокруг элемента .

Пример

Цель WWF состоит в том, чтобы: Построить будущее, где люди живут в гармонии с природой.

HTML элемент

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

Браузеры обычно отображают элементы с отступом.

Пример

Вот цитата с сайта WWF:



В течение 50 лет WWF защищает будущее природы.
Всемирная организация WWF, ведущая природоохранная организация, работает в 100 странах мира, её поддерживают 1,2 миллиона человек в Соединенных Штатах и близки к ней 5 миллионов по всему миру.

HTML элемент для аббревиатур

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

Пример

HTML элемент для контактной информации

Пример

Посетите нас на:

Box 564, Lalaland

HTML элемент для названия работы

HTML элемент определяет название работы.

Браузеры обычно отображают элемент курсивом.

Пример

The Scream by Edvard Munch. Нарисовано в 1893.

HTML элемент для двунаправленного переопределения

HTML элемент определяет двунаправленное переопределение.

Элемент используется для переопределения текущего направления текста:

Пример

HTML Упражнения

HTML элементы цитаты и цитирования

Тег Описание
Определяет аббревиатуру или акроним
Определяет контактную информацию для автора/владельца документа
Определяет направление текста
Определяет раздел, который цитируется из другого источника
Определяет название произведения
Определяет короткую встроенную цитату

Для получения полного списка всех доступных тегов HTML, посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

  • Какой HTML-элемент определяет короткую цитату?
  • Какой HTML-элемент определяет раздел, который цитируется с другого источника?
  • Какой HTML-элемент определяет аббревиатуру или акроним?
  • Какой HTML-элемент определяет контактную информацию (кто автор/владелец) документа или статьи?
  • Какой HTML-элемент определяет название рыботы?
  • Какой HTML-элемент определяет двунаправленное переопределение текущего направления текста?

ПАЛИТРА ЦВЕТОВ

Получите ваш
Сертификат сегодня!

Связь с админом

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Читайте также: