Какой тег предназначен для выделения длинных цитат которые могут состоять из нескольких абзацев

Обновлено: 13.05.2024

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

Если создать подряд 2 абзаца с текстом, то мы увидим, что между ними расстояние больше, чем между строк внутри абзацев.

Кроме того, обратите внимание, что, помимо отступов сверху и снизу между абзацами, мы также нигде не указывали ни размер шрифта, ни его цвет.

Соответственно, возникает 2 логических вопроса: какие характеристики у нашего текста на текущий момент и как их можно изменить?

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

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

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

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

В правой части нижнего окна выберите закладку «Скомпилированный стиль». Здесь Вы увидите все свойства выбранного элемента и их значения, заданные браузером по умолчанию. Свойства указаны в алфавитном порядке.

Если пролистать немного вниз, то для свойства color мы увидим значение rgb(0, 0, 0) , что означает черный цвет в формате rgb , а для свойства font-size - 16px , что означает 16 пикселей. Это и есть те самые значения свойств по умолчанию для тега p .

Ответ на вопрос как эти свойства изменять и в каких форматах можно устанавливать значения мы рассмотрим немного позже.

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

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

Для этого в языке html предусмотрен одинарный тег br . Давайте вставим его где-нибудь в первой строке второго абзаца.

Как видите, последующий текст перешел на новую строку, при этом отступ между строками остался прежним.

3. Теги strong, b.

Если есть необходимость выделить одно или несколько слов или даже предложений жирным начертанием, то для этих целей мы можем использовать парные теги strong или b .

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

4. Теги i, em.

Следующие два тега i и em предназначены для акцентирования внимания на слово или фразу путем изменения начертания на курсивное.

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

Курсивом обычно выделяют названия, термины, иностранные слова и т.д.

5. Тег mark.

Еще один способ визуально выделить часть текста – это использовать тег mark . Его действие аналогично цветному маркеру для выделения текста на бумаге – в браузерах текст внутри mark подсвечивается жёлтым фоном.

6. Теги del и ins.

Если на странице своего сайта Вы делаете правки по тексту, например, обновляете цены на продукцию в сторону уменьшения, и при этом хотите указать пользователям на эти изменения, то можно использовать теги del и ins :

- del выделяет текст, который был удалён в новой версии документа;

- ins выделяет текст, который был добавлен в новой версии документа.

Еще одним примером применения этих тегов может служить список ошибок. Когда ошибка исправлена, её помечают тегом del , если найдена новая ошибка, то её добавляют в список и помечают тегом ins .

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

7. Теги sup и sub.

Следующие два тега обычно используются не для выделения слов, а для выделения отдельных символов. Например, для указания единиц измерения или для написания простых формул: 20м2, H2O, X3+X2=1.

Тег sup отображает текст в виде верхнего индекса.

Тег sub отображает текст в виде нижнего индекса.

8. Теги h1 - h6.

Для логического структурирования больших текстов в книгах, газетах и другой литературе обычно используются заголовки. В языке html тоже есть возможность выделить текст заголовком. Причем предусмотрено целое семейство тегов: от h1 до h6 .

Тег h1 обозначает самый важный заголовок - заголовок первого уровня , а тег h6 обозначает подзаголовок самого нижнего уровня.

На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: h1 , h2 и h3 .

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

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

Символы-мнемоники

Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Например, знак меньше на страницу можно вставить мнемоникой < (less than), а знак больше мнемоникой > (greater than):

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

Небольшие цитаты

Тег <q> (сокращение от «quote»). Предназначен для выделения цитат внутри предложения. Текст внутри тега браузер автоматически обрамляет кавычками, поэтому добавлять кавычки вручную не нужно.

Следующая цитата

Мы дополнили запись и процитировали целое стихотворение. И это не какая-то короткая цитата внутри абзаца, поэтому тег <q> не поможет.

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

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

В браузере тегу <blockquote> обычно добавляются горизонтальные отступы.

Мы добавили немного стилей (отступы, рамку и цвет текста), чтобы содержимое <blockquote> смотрелось красивее. Вы можете изучить стили во вкладке style.css .

Перейти к заданию

index.html Сплит-режим
style.css Сплит-режим

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Сайт начинающего верстальщика</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Блог</p> <nav> На главную </nav> </header> <main> <article> <h1>Всё ещё день седьмой. Кекс выдал мне задание</h1> <p>Сегодня пришёл Кекс и дал мне немного необычное задание. По соседству с ним поселилась одна кошечка, а Кекс совсем не умеет сочинять песни. Поэтому он попросил меня найти какое-нибудь великое произведение, чтобы он смог исполнить его ей.</p> <p>Как говорится, <q>для хорошего кота и в феврале март</q> (<cite>народная мудрость</cite>).</p> <p>Нашёл лирическое произведение для Кекса:</p>  Мяу мяу мяу мррр мяу мяяяу мяу мяу мяу Собрание произведений М. Котидзе. </article> <aside> Тут могла быть ваша реклама </aside> </main> <footer> Подвал сайта </footer> </body> </html> Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ Поплакать

Спасибо! Мы скоро всё исправим)

Автозапуск

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить Закрыть Задачи Выполнено

Оберните текст на строках 24-29 в тег <blockquote> .
Затем внутри цитаты оберните текст стихотворения в тег <p> ,
а источник цитаты — в тег <cite> .

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

Источник цитат

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

По словам Чарльза Буковски — Интеллектуал о простой вещи говорит сложно — художник сложную вещь описывает простыми словами.

Тег <cite> может быть самостоятельным и не привязываться к цитате:

Список описаний

<dl> обозначает сам список описаний;
<dt> (сокращение от «description term») обозначает термин;
<dd> (сокращение от «description definition») обозначает описание или определение.

Теги <dt> и <dd> пишутся внутри <dl> . Каждый список <dl> может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:

По умолчанию браузер добавляет небольшой отступ слева от определений.

HTML Язык гипертекстовой разметки CSS Каскадные таблицы стилей Язык для оформления HTML-документов

Следующая цитата

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальный тренажёр.

В HTML существует несколько тегов для обозначения цитат:

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

Перейти к заданию

index.html Сплит-режим

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цитаты</title> </head> <body> <h1>Цитаты великих</h1> <p>В книге Мастер и Маргарита есть такая цитата:</p> Никогда ничего не просите! Никогда и ничего, и в особенности у тех, кто сильнее вас. Сами предложат и сами всё дадут! <p>Известное выражение Hasta la vista, baby принадлежит Терминатору.</p> <p>Кекс предпочитает поговорку Без труда не выловишь и рыбку из пруда! и повторяет её постоянно.</p> </body> </html> Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ Поплакать

Спасибо! Мы скоро всё исправим)

Автозапуск

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить Закрыть Задачи Выполнено

Используйте подходящие теги цитат для:

фразы «Мастер и Маргарита»,
фразы «Никогда ничего не просите … Сами предложат и сами всё дадут!»,
и фразы «Hasta la vista, baby».

Самостоятельно найдите и разметьте четвёртую цитату.

Верхний и нижний индексы

Теги <sup> и <sub> . Названия образованы от слов «superscript» и «subscript».

Тег <sup> отображает текст в виде верхнего индекса, а <sub> отображает текст в виде нижнего индекса.

Их используют для указания единиц измерения или для написания простых формул:

20м 2
H₂O
X 3 +X 2 =1

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

Акцентирование внимания

Теги <em> и <i> . Названия образованы от слов «emphasis» и «italic». Предназначены для акцентирования внимания на слово или фразу. Визуально оба тега одинаковы, они выделяют текст курсивом.

Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения.

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

Профессии

Следующая цитата

Тег <ul> (сокращение от «unordered list»). Используется, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.

Непосредственно в теге <ul> могут находиться только теги <li> (сокращение от «list item»), которые обозначают элементы или пункты списка:

По умолчанию элементы <ul> отмечаются маркерами такого же цвета, как цвет текста.

Я пункт списка, могу быть на любом месте
И я пункт списка, и мне тоже не важен порядок

Описание изменений

Теги <del> и <ins> . Названия тегов образованы от слов «delete» и «insert». Предназначены для описания изменений в документе.

Тег <del> выделяет текст, который был удалён в новой версии документа. В браузере этот текст перечёркивается.

Тег <ins> выделяет текст, который был добавлен в новой версии документа. В браузере этот текст подчёркивается.

Почистить посудомоечную машину
Погулять
Поспать

Длинные цитаты

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

В браузере контенту тега <blockquote> обычно добавляется дополнительный отступ слева и справа.

Обычный текст.

Ум ценится дорого, когда дешевеет сила.
Джейсон Стэтхэм

Преформатированный текст и код

Тег <pre> (сокращение от «preformatted text»). Используется для отображения примеров кода, также применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега <pre> .

Тег <code> . Используется для обозначения фрагментов кода.

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

Тег ul — это неупорядоченный список.

Тег <code> можно вкладывать внутрь тега <pre> .

Информация

Цитаты

Перенос строк

Тег <br> (сокращение от «line break»). Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.

Остальное

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.

Услуги

Выделение и придание важности

Теги <strong> и <b> . Название <b> образовано от слова «bold». Отображаются оба тега одинаково, они выделяют текст жирным.

Тег <strong> указывает на важность отмеченного текста. Он может использоваться для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального. При этом обозначение части текста тегом <strong> не должно изменять смысла предложения.

Тег <b> предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят. Типичный пример — выделение вводного предложения статьи.

Разметка фрагментов текста

Практикум

Разделение контента

Теги <div> и <span> . Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.

Тег <div> используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.

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

Дата и время

Тег <time> . С помощью него можно описывать даты одновременно и для человека, и для машины. Для указания даты в машиночитаемом формате ISO 8601 существует атрибут datetime и выглядит так:

Браузер отображает только содержимое тега, а содержимое datetime не отображается.

Упорядоченный список

Тег <ol> (сокращение от «ordered list»). В этом списке действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.

Пункты упорядоченного списка тоже размечаются с помощью тега <li> . Пример кода:

По умолчанию перед элементами <ol> ставится их порядковый номер.

Я первый и только первый пункт
Я не я, если я не второй пункт
Третий после стольких лет? Всегда!

У <ol> может быть несколько атрибутов: start , reversed и type .

Атрибут start меняет стартовое число нумерации пунктов. Может быть отрицательным.

Атрибут reversed меняет направление нумерации на противоположный. Этот атрибут не требует значения.

С помощью атрибута type можно задавать различные типы маркеров: строчные и заглавные латинские буквы или римские цифры.

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