Выравнивание текста и создание красной строки через CSS.
В этом уроке затронем еще два свойства, которые относятся к оформлению текста. И сегодня поговорим о таких свойствах как выравнивание текста и создание красной строки для текста.
Выравнивание текста
И первое свойство — это выравнивание. Вы уже, наверное, обратили внимание, что браузер по умолчанию выравнивает все текстовые элементы по левому краю это и есть его базовое значение по выравниванию.
Естественно появляются такие ситуации, когда нужно что-то выровнять по центру, по правому краю или по всей ширине страницы. В CSS, естественно, есть такое свойство, отвечающее за выравнивание.
Свойство align мы уже знаем из HTML. Там оно использовалась для выравнивания текста. В CSS наблюдается подобие, только добавляется спереди слово text. А значения свойства остаются те же самые.
- text-align:left
- text-align:center; — Выравнивание по центру.
- text-align:right; — Выравнивание по правому краю.
- text-align:justify; Выравнивание по ширине.
И, для примера, мы будем работать с заголовком <h3> </h3>, который для начала выровняем по центру.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Заголовок Выровнен по центру: text-align: center
</body>
</html>
Для заголовка h3 задаем выравнивание по центру.
CSS
h3{
text-align: center;
}
И если хотите по правому краю, то естественно используется следующий вид.
CSS
h3{
text-align: right;
}
После чего заголовок прижмется к правому краю.
Ну, и последний вариант это выравнивание текста по всей ширине страницы. Что это значит? То что текст будет, выравнивается одновременно и по левому краю и по правому краю за счет увеличения числа пробелов (расстояния) между словами. Для этого используем параграф, которому задаем данное свойство.
CSS
p{
text-align: justify;
}
При форматировании текста с таким условием, текст будет растягивается по обеим сторонам.
А мы переходим ко второму свойству это создание красной строки.
Создание красной строки CSS
Данное свойство достаточно популярно в использовании, так как оно облегчает чтение больших текстов. Для создания красной строки у каждого параграфа используется следующее свойство text-indent: ;. Отступ можно задать в различных единицах, мы же зададим в пикселях px.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML страница</title>
<link href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка.
Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка.
Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка.
Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка.
</body>
</html>
И для всех абзацев зададим отступ в 30px.
CSS
p{
text-indent:30px;
}
Теперь, если сохранить и обновить браузер то увидим, что у всех абзацев появился отступ в 30px.
Вот мы рассмотрели еще два свойства. Они применяются достаточно часто, поэтому стоит их запомнить. Ну а на этом урок закончим, в Демо смотрите пример работы данных свойств.
webteoretik.ru
Как сделать абзац в HTML кодах?
Здравствуйте! Продолжим рассматривать основы программирования сайтов. Трудно представить хоть один из них, в коде которого не встречался бы тег абзаца. Сегодня рассмотрим, как его правильно прописывать и описание нескольких дополнительных действий с текстом.
Пример
Давайте на примере посмотрим, как сделать абзац в HTML коде.
<p>Одно или несколько предложений.</p>
Обязательным условием является наличие открывающего и закрывающего тега. Кстати, всё можно делать непосредственно в блокноте, просто потом нужно будет сохранить файл в соответствующем формате.
Форматирование
Довольно часто подмечаю, что люди интересуются, как можно сделать красную строку. Для конкретного абзаца делается очень просто.
<p style=”text-indent:15px;”>
Включение таких параметров приведет к отступу первой строки на 15 пикселей от левого края. Если такие изменения следует применить для всех тегов P, то в файле CSS, который подключается к страницам сайта, можно прописать код, показанный ниже.
p{text-indent:15px;}
Лично я обычно не делаю красные строки при редактировании кода в блокноте или другом редакторе.
Я просто включаю отступы между текстовыми блоками. Для этого в CSS нужно прописать специальные параметры.
p{margin-bottom:25px;}
Если использовать данную конструкцию, то после каждого абзаца появится отступ в 25 пикселей.
На самом деле параметров для работы с HTML и различными стилями очень много. Я описал лишь некоторые из них, одной статьей все охватить весьма затруднительно.
Хотите узнать больше? Возможно, окажутся полезными мои прошлые публикации на следующие темы:
На этом статью буду завершать и, думаю, теперь сделать абзацы в HTML и красиво их оформить при помощи специальных тегов будет не сложно.
Желаю вам огромных успехов в освоение программирования. Кстати, не задумывались о заработке на информационных некоммерческих сайтах? Просто шикарную информацию предоставил специального для своих читателей в отдельном курсе.
Нормальная работа и финансы в сети являются ключевыми темами этого блога. С отдельными перспективами в сети можете ознакомиться прямо сейчас из опубликованных материалов. Я продолжаю подготовку и публикацию нового, а главное реально полезного контента. Подписывайтесь на обновления Workip на свою электронную почту. До связи.
workip.ru
Как в html сделать отступ текста?
Здравствуйте, дорогие друзья!
Рассмотрим несколько способов как сделать отступ текста в HTML.
Навигация по статье:
Отступ текста в HTML при помощи margin
Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.
Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства
Делается это так:
<div style=”margin-left:20px;”> Текст блока HTML </div>
<div style=”margin-left:20px;”> Текст блока HTML </div> |
Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.
HTML:
<div> Текст блока </div>
<div> Текст блока </div> |
CSS:
.text-block { margin-left:20px; }
.text-block { margin-left:20px; } |
Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:«Как определить ID и класс элемента на странице?»
При помощи этого свойства мы можем задать разные отступы тексту в HTML:
- margin-left — расстояние слева
- margin-right — расстояние справа
- margin-top — расстояние сверху
- margin-bottom — расстояние снизу
Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:
- margin: 10px; — делаем отступ текста 10px со всех сторон
- margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
- margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px
Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.
Обратите внимание, если вы задаёте верхний или нижний отступ для тега <a>, <span>, <b> — то, скорее всего, он не сработает. Это связано с тем что верхний и нижний margin работает только для блочных элементов HTML, а указанные выше теги являются строчными. Для решения проблемы можно дополнительно задать этому тегу CSS свойство display:inline-block; чтобы к нему применялись свойства одновременно блочного и строчного элемента HTML.
Отступ текста в HTML при помощи padding
Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.
<div style=”paddint-top:20px;”> Текст блока </div>
<div style=”paddint-top:20px;”> Текст блока </div> |
Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:
CSS:
.text-block { padding: 20px 10px 15px 20px; }
.text-block { padding: 20px 10px 15px 20px; } |
С его помощью так же можно задать разные отступы текста в HTML:
- padding-left — слева
- padding-right — справа
- padding-top — сверху
- padding-bottom — расстояние снизу
- padding: 25px; — отступ со всех сторон.
Отступ текста html при помощи неразрывного пробела
Сразу скажу что я этот способ не люблю и не рекомендую, но иногда он может понадобится. Суть его заключается в том что в HTML есть специальный тег, который позволяет добавлять неразрывный пробел
- Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько
- Если поставить между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько (каждый с новой строки) можно увеличить это расстояние.
HTML:
<p>Задаём в HTML</p>
<p>Задаём в HTML</p> |
Отступ текста в HTML при помощи text-indent
Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent
HTML:
<div> Здесь текст HTML блока</div>
<div> Здесь текст HTML блока</div> |
Что делать если отступ не появляются?
Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.
Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»
Если вы знаете ещё какие то способы как сделать отступ текста HTML напишите их в комментариях. Если статья была для вас полезной — делитесь ей в социальных сетях. Так вы помогаете мне развивать сайт.
Успехов вам в оформлении ваших сайтов и не только!
С уважением Юлия Гусарь
impuls-web.ru
теги форматирования абзацев и текста в html
Цель урока: изучение основных тегов для форматирования текста html и абзацев.
Элементы форматирования текста
Заголовки
- Для размещения заголовков существует тег
<h>с номером уровня заголовка. - Самый крупный заголовок соответствует тегу
<h2>, соответственно заголовок самого низкого уровня (самый мелкий размер шрифта) —<h6>. - Базовый размер шрифта на странице соответствует заголовку
<h4>:
<h2></h2>
Блочная цитата
<blockquote></blockquote>
Для размещения в тексте цитаты используется тег <blockquote>:
Преформатированный текст
<pre></pre>
Для того, чтобы сохранить в тексте все пробельные символы, необходимо использовать тег <pre>. Но при этом следует учесть, что для содержимого данного тега невозможно задать стиль шрифта:
Курсив, жирность, подчеркивание и другие теги
Горизонтальная линия
<hr></hr>
Данный элемент служит для разделения некоторых структурных элементов текста друг от друга. Либо может быть использован просто как эстетический элемент оформления документа:
Атрибуты тегов
- Для уточнения действия некоторых тегов они дополняются атрибутами.
- Так, у рассмотренного тега горизонтальной линии есть дополнительные свойства, выраженные в атрибутах
- size — ширина линии,
- width — длина линии,
- align — выравнивание линии
и другие.
- Атрибуты указываются в открывающем теге в виде атрибут=значение.
- Атрибутов может быть несколько, тогда они указываются через пробелы, и их порядок следования практически не важен.
Атрибуты тега body
Для начала рассмотрим два основных атрибута тега body:
- bgcolor — задний фон страницы и
- text — цвет текста на всей странице.
Для задания цвета можно использовать названия цветов на английском языке, либо код цвета в шестнадцатеричной системе счисления.
или
Перед указанием цвета в 16-й системе обязательно ставится символ «шарп» — #
Для подбора подходящего цвета перейдите на страницу палитры цветов онлайн.
Теги логического форматирования текста
В html есть теги, которые несут больше не эстетическую нагрузку, а логическую или смысловую нагрузку. Т.е. большинство из них внешне влияет на содержимое, делая его подчеркнутым или выделяя каким-либо другим образом. Но созданы эти теги логического форматирования с целью выделить смысловую характеристику содержимого:
Например, тег del делает содержимое перечеркнутым, при этом указывая прежде всего на смысл удаления текста.
Элементы форматирования абзацев
- Для перехода на другую строку текста служит пустой элемент <br>.
- Тогда как для выделения в тексте абзаца служит элемент <p>, содержимое которого и является сам абзац. Перед абзацем и после него добавляются отступы, но красная строка при этом не предусмотрена.
Пример совместного использования тегов <br> и <p>:
Задание html 1.Скачайте текст по ссылке ниже. При помощи редактора или блокнота выполните должное форматирование документа, добавив необходимые на Ваш взгляд теги (заголовки, теги форматирование шрифта и абзацев).
Текст: Файл задания 1.
Желаемый результат:
Цвет и гарнитура шрифта
Для форматирования шрифта существует тег <font>. Однако, тег уже практически не используется.
<font></font>
Тег используется только со своими атрибутами:
- size — размер шрифта, от 1 до 7 (3 — базовый размер, 6 — размер заголовка h2)
- face — семейство шрифта (serif — с засечками, sans-serif — рубленый или без засечек, monospace — моноширинный)
- color — цвет
Пример:
<font size="4" color="ff0000" face="Arial, Verdana, sans-serif"> Текст красного цвета, шрифт без засечек </font> |
<font size=»4″ color=»ff0000″ face=»Arial, Verdana, sans-serif»> Текст красного цвета, шрифт без засечек </font>
Результат а браузере:
Текст красного цвета, шрифт без засечек
Специальные символы
код html
© &cоpy; Копирайт
® &rеg; Знак зарегистрированной торговой марки
™ &trаde; Знак торговой марки
&shу; Мягкий перенос
× &timеs; Умножить
÷ &dividе; Разделить
± &рlusmn; Плюс/минус
≤ &lе; Меньше или равно
≥ &gе; Больше или равно
Задание html 3:
Скачайте файл с текстом для задания. Откройте файл в редакторе кода (например, notepad++). Выполните подряд все задания, указанные в комментариях html. Протестируйте результат в браузере.
labs-org.ru
Как сделать отступы или табуляцию в HTML?
Есть разные способы установки HTML отступов перед текстом. Но для совместимости с различными браузерами и доступности, мы обсудим самые популярные методы:
Чтобы сделать отступ перед текстом или абзацем, лучше использовать CSS. Ниже приведены примеры того, как смещать надписи с помощью каскадных таблиц стилей. Вставьте каждый из приведенных примеров кода между тегами HTML <head></head>.
Следующий код создает CSS-класс «tab», который отодвигает символы и абзац на 40 пикселей от левого края:
<style type="text/css">
<!--
.tab { margin-left: 40px; }
-->
</style>Вставив приведенный выше код в раздел <head>, можно выполнить его в любом месте, добавляя его в теги абзаца (<p>), как показано ниже:
<p>Образец табуляции</p>
Если вы планируете применять этот стиль на нескольких страницах, лучше создать файл .css и связать его со всеми веб-страницами. Чтобы сделать отступ в HTML, добавьте следующую строчку между тегами <head> и создайте ссылку на файл. Мы назвали его «basic.css«:
<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">
Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега <style> и меток комментирования, как показано ниже:
.tab { margin-left: 40px; }Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый <p>, показанный выше.
Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:
.tab { text-indent:40px }Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.
Бонусная подсказка как сделать отступ в HTML: Чтобы поменять отступ слева на отступ справа, измените свойство margin-left на margin-right.
Можно достичь тех же результатов используя стиль, встроенный в HTML- код. Хотя применение CSS делает управление многочисленными веб-страницами легче, если использовать стиль только один раз:
<p>Это текст с отступом.</p>
Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги <p> не смещены.
<p>Это текст с отступом.</p>
А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.
Подсказка: можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.
Бонусная подсказка: Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.
Другой часто применяемый метод HTML отступа текста — с помощью <blockquote>, как показано ниже.
Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:
<blockquote>Эта строка будет сдвинута.</blockquote>
Данная публикация представляет собой перевод статьи «How do I indent or tab text on my web page or in HTML?» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
Отступ текста в CSS, красная строка. Форматирование текста
Отступ текста
Отступ в первой строке абзаца, имитирующий красную строку, — это один из самых распространенных эффектов для текста. В CSS для указания отступа предназначено свойство text-indent.
В случае применения свойства text-indent первая строка любого элемента может быть смещена на заданную величину, даже если эта величина отрицательная. Чаще всего это свойство применяется для создания эффекта красной строки у абзацев:
p { text-indent: 30px; }Согласно коду нашего примера первая строка любого абзаца будет сдвинута на 30px.
Свойство text-indent работает только с блочными элементами, его нельзя применять к строчным элементам или вставляемому контенту, такому как картинки. Но если в первой строке блочного элемента, например абзаца, есть картинка, то она будет сдвинута вместе со всем остальным текстом строки.
Отрицательные значения свойства, позволяют сделать текст с выступающей первой строкой. Но, задавая отрицательные значения, нужно учитывать, что часть выступающей строки может выйти за границы элемента или даже может быть обрезана левым краем окна браузера, если элемент находится вплотную к краю. Для избежания таких неприятностей, можно применить внутренний отступ с левой стороны элемента равный выступу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p {
text-indent: -40px;
padding-left: 40px;
}
</style>
</head>
<body>
<p>У этого абзаца первая строка будет выступать над остальными на 40px, для просмотра
выхода строки за границу элемента и ее усечение вследствии этого, просто удалите строку
CSS-кода добавляющую внутренний отступ к абзацу (padding-left: 40px;).</p>
</body>
</html>Попробовать »Примечание: свойство padding-left было приведено только для примера, как можно выйти из неприятной ситуации. На данный момент на нем можно не заострять внимание. Внутренние отступы и свойство padding-left подробно разбираются в главе — Блочная модель.
С text-indent могут применяться любые единицы измерения длины, в том числе и процентные значения. Размер отступа, установленный в процентах, связан с шириной родительского элемента. Например, если установлен отступ равный 50% и абзац занимает всю ширину окна браузера, то первая строка будет начинаться посередине экрана.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
.test1 { text-indent: 25px; }
.test2 { text-indent: 50%; }
</style>
</head>
<body>
<p>Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом
в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px.</p>
<p>Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом
в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%.</p>
</body>
</html>Попробовать »Примечание: стоит обратить внимание, что свойство text-indent наследуется, что может приводить к непредвиденным результатам:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
.test1 { text-indent: 15%; }
</style>
</head>
<body>
<div>
Первая строка текста элемента div будет иметь отступ равный 15% ширины его
родительского элемента или ширины окна браузера.
<p>Первая строка текста элемента p будет иметь отступ, который был унаследован
от его родительского элемента.</p>
</div>
</body>
</html>Попробовать »Форматирование
Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p.class1 {
text-transform: uppercase;
text-decoration: overline;
}
p.class2 {
text-transform: lowercase;
text-decoration: line-through;
}
p.class3 {
text-transform: capitalize;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>
<p>Расстояние между символами в тексте изменено
с помощью свойства letter-spacing.</p>
</body>
</html>Попробовать »С этой темой смотрят:
puzzleweb.ru
HTML: Теги для текста | HTML самоучитель
В HTML есть теги для изменения внешнего вида текста, такие как <b> и <i>. Они используются для выделения текста полужирным шрифтом или курсивом, такие теги в HTML называются тегами для форматирования.
Форматирование текста
Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:
<html>
<body>
<p><b>Текст</b></p>
<p><strong>Текст</strong></p>
<p><em>Текст</em></p>
<p><i>Текст</i></p>
<p><small>Текст</small></p>
<p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p>
</body>
</html>
Попробовать »Тег <pre>
Тег <pre> позволяет выделить часть исходного текста, которая должна отобразиться браузером в первоначальном виде, то есть теми же символами и с тем же количеством пробелов и разрывов строк. Весь текст, заключенный между открывающим тегом <pre> и закрывающим </pre>, будет отображаться моноширинным шрифтом:
<html>
<body>
<pre>
Он сохраняет авторское форматирование текста
(оставляет без изменений)
и делает шрифт моноширинным
</pre>
</body>
</html>
Попробовать »Теги для отображения кода
Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:
<html>
<body>
<p><code>Программный код</code>
<br>
<kbd>Ввод с клавиатуры</kbd>
<br>
<samp>Образец кода</samp>
<br>
<var>Выделение переменной</var>
</p>
<p>
Эти теги обычно используются для того, чтобы показать на странице программный код
</p>
</body>
</html>
Попробовать »Тег <address>
Адрес является распространенным элементом многих HTML-документов, для выделения адреса на странице существует специальный тег <address>, отделяющий текст, заключенный в него, от всего остального содержимого.
Чаще всего он используется для выделения контактной информации, например адреса электронной почты или способа связи с автором/владельцем документа, статьи или сайта:
<html>
<body>
<p>Вы можете найти меня на моем сайте</p>
<address>
<a href="www.puzzleweb.ru">Мой сайт для связи</a>
</address>
</body>
</html>
Попробовать »Аббревиатуры
Пример демонстрирует, как можно написать аббревиатуру или сокращение:
<html>
<body>
<p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br>
Атрибут title нужен для всплывающей подсказки, она появляется
при наведении курсора на аббревиатуру.
</p>
</body>
</html>
Попробовать »Направление текста
Пример демонстрирует, как можно изменить направление текста:
<html>
<body>
<p>
Тег bdo определяет направление текста - слева направо и наоборот.<br><br>
<bdo dir="rtl">
Это наш текст
</bdo>
</p>
</body>
</html>
Попробовать »Цитаты
В HTML есть два тега для выделения цитат в тексте — <q> и <blockquote>. Тег <q> является строчным элементом и предназначен для выделения коротких цитат непосредственно в тексте абзаца. Текст, размещенный внутри элемента <q>, по умолчанию большинством браузеров отображается в двойных кавычках.
В отличие от тега <q>, тег <blockquote> является блочным элементом, он предназначен для выделения длинных цитат, которые по объему больше похожи на целые абзацы. В большинстве браузеров текст элемента <blockquote> будет отображаться с небольшим отступом вправо и иметь разрывы строки до и после себя:
<html>
<body>
<p>Длинная цитата:</p>
<blockquote>
Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
</blockquote>
<p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b>
<br><br>
Короткая цитата:
<q>Это короткая цитата.</q><br>
<b>Короткие цитаты заключаются в двойные кавычки.</b>
</p>
</body>
</html>
Попробовать »Удаленный и вставленный текст
Пример демонстрирует, как можно в документе пометить текст, который был удален (помечается как перечеркнутый) или вставлен (помечается как подчеркнутый):
<html>
<body>
<p>
Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а
содержимое тега ins - <ins>подчеркнутым</ins>
</p>
</body>
</html>
Попробовать »Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.
puzzleweb.ru