Параграфы и абзацы — это элементы структурированного текста. По сути это разные понятия. Параграф — небольшое подразделение большого текста внутри главы или раздела. Абзацы, как правило, состоят из нескольких предложений.
В одном параграфе может быть несколько абзацев. Однако в HTML параграф — это то же, что и абзац. В html абзацы выводятся тегом <p></p>.
Дробление текста на параграфы и выделение заголовками помогает создать иерархическую структуру текста, удобную для чтения.
Как выровнять текст в HTML
Рассмотрим примеры:
| 1 2 3 4 5 6 | <p align="center">текст</p> — текст будет располагаться посередине. <p align="left">текст</p> — текст выравнивается по левому краю. <p align="right">текст</p> — текст выравнивается по правому краю. <p align="justify">текст</p> — текст выравнивается по ширине, или по краям (то есть по обеим сторонам документа). |
Если не задавать абзацы, то текст всегда выравнивается по умолчанию по левому краю.
Примеры использования тегов для выравнивания теста
Этот текст выровнен в html посередине. Выравнивание по центру подходит для выделения небольших отрывков текста. Например, для привлечения внимания к цитатам. Не подходит для объёмного текста по той же причине, что и выравнивание «по правому краю» — «рваный» левый край может затруднять чтение.
Этот текст выровнен в html по левому краю. Стандартный и самый распространенный способ выравнивания текста в html и в печатных изданиях. По результатам исследований, выровненный по левому краю текст лучше запоминается и быстрее читается.
Этот текст выровнен в html по правому краю. Применим для добавления информации в шапке сайта, но не подходит для оформления текста большого объёма: из-за «рваного» левого края читателю каждый раз нужно искать начало следующей строки. При небольших объёмах текста это не критично, но затрудняет чтение, если текста много.
Этот текст выровнен в html по обеим сторонам. Его края обрезаются так, чтобы они были ровными с обеих сторон. При необходимости автоматически устанавливаются большие разрывы между словами. Такой текст сложно читать из-за неравномерной разбивки слов. Было выяснено, что выравнивание текста по краю снижает скорость чтения.
Абзацы, параграфы в html
Теги <p></p> можно назвать просто — абзац. Всё, что расположено между ними, будет абзацем текста. Закрывающий тег </p> означает перевод строки. Ну а следующий тег <p> открывает новый абзац.
Кроме тегов <p></p> для выравнивания текста можно использовать теги <div></div>:
| 1 2 3 4 5 6 | <div align="center"> текст </div> <div align="left"> текст </div> <div align="right"> текст </div> <div align="justify"> текст </div> |
Между этими тегами есть различие, например вот такая конструкция будет неверна, так как параграф не может содержать в себе несколько параграфов:
| 1 2 3 4 5 6 7 | <p align="left"> <p>текст</p> <p>текст</p> <p>текст</p> </p> |
А вот между тегами <div></div> можно вставлять несколько параграфов, и выглядеть это будет так:
| 1 2 3 4 5 6 7 | <div align="left"> <p>текст первого абзаца</p> <p>текст второго абзаца</p> <p>текст третьего абзаца</p> </div> |
Также абзацы можно формировать с применением тега перевода строки <br>, например, так:
Здесь текст абзаца.
<br><br>
Здесь следующий абзац.
<br><br>
Еще один абзац.
Стоит учитывать, что если использовать только тег <div>, то, в отличие от <p>, он не делает увеличенного вертикального отступа между блоками текста. То есть чтобы между абзацами был просвет, придётся ставить дополнительные теги (например, устанавливать отступы или просто использовать <br>).
Красная строка в html
Сразу уточним, что красной строки не может быть без абзаца, а вот абзац без красной строки — вполне может. Например, на этом сайте красная строка не используется. Но бывают случаи, когда она необходима или просто хочется.
Рассмотрим, как сделать красную строку в html для всех абзацев.
Для добавления красной строки к абзацам используется CSS свойство text-indent. Именно оно позволяет поставить отступ перед первым предложением в абзаце:
<html>
<head>
<style>
p { text-indent: 20px; }
</style>
<head>
<body>
<p>
текст абзаца
</p>
</body>
</html>
Если делать красную строку в записях вручную, то в редакторе перед абзацами нужно будет добавить код:
| 1 2 3 | <p style="text-indent: 20px;"> |
Отступ может быть любым, не обязательно именно 20 пикселей. Не забывайте в конце ставить закрывающий тег </p> (хотя, например, в WordPress теги закрываются автоматически).
Именно так будет выглядеть абзац с красной строкой. Здесь прописан отступ в 30 пикселей.
Здесь прописан отступ в 20 пикселей.
Также красную строку в html можно приписать в процентах вместо пикселей. Тогда отступ будет рассчитываться от ширины страницы. Например:
| 1 2 3 | <p style="text-indent: 5%"> |
Результат:
Здесь прописан отступ красной строки в 5%.
Статья была полезной?