Абзац в html

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

Абзацы в HTML

Основная функция абзацев состоит в том, чтобы без изменения выдерживать создаваемую автором уникальную структуру текста. Например, на части делятся журналы, книги, газеты и разделы в колонках. Таким же образом структурируются тексты и в HTML. Благодаря этому они приобретают более понятную логическую структуру, которая не только становится удобна для восприятия, но и корректно отображается в браузерах. Разделение фрагментов текста в HTML выполняется при помощи тегов, в результате чего по вертикали появляется небольшой отступ (отбивка) между абзацами.

Итак, как же разделить текст абзацами?

Рассмотрим пример:

<p>Первый абзац, помещенный в теги p</p>
<p>Второй абзац, помещенный в теги p</p>

Итог:

Первый абзац, размещенный в тегах р

Второй абзац, размещенный в тегах р

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

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

Чем вам будет полезен style.css? В данном файле прописаны параметры отступов, а также стили padding и margin (я надеюсь, вы знаете, чем отличаются эти свойства), используемые к абзацу и задающие отступы (сверху и снизу). Обнаружив данные стили, вы спокойно можете внести коррективы в их параметры для уменьшения либо увеличения пустых строк между абзацами.

Атрибуты тега абзаца в HTML

Абзацы в браузерах выравниваются по левому краю, поскольку мы читаем слева направо. Однако если использовать атрибут align, то абзац можно выровнять как по правому краю, так по ширине либо по центру.

Рассмотрим пример:

<p align="left">Выравниваем абзац по левому краю.</p>
<p align="right">Выравниваем абзац по правому краю.</p>
<p align="center">Выравниваем абзац по центру.</p>
Итог:

Выравнивание абзаца по левому краю.

Выравнивание абзаца по правому краю.

Выравнивание абзаца по центру.

Красная строка и отступы

Все помнят, как в школе нас учили в начале каждого абзаца делать небольшой отступ от линии основного текста (так называемую красную строку), благодаря которому улучшалось восприятие написанного. Что касается веб-страниц, то в их оформлении красная строка встречается значительно реже, но все же иногда присутствует. Вам, для того чтобы закрыть эту потребность, следует знать только одно свойство text-indent: 10% . Его я применю для следующего абзаца, используя этот код:


Источник: https://blogwor<p style="text-indent: 10%;"></p>

Хочу обратить ваше внимание на то, что я использовал свойство в HTML, а не в файле CSS, поскольку делаю это в качестве примера. Если же вы подобным образом хотите на своем сайте отредактировать все абзацы, добавив красную строку, то необходимо внести коррективы в файл style.css или в HTML-код страницы добавить код (размер отступа задается или в px, или в %).

<style>p {text-indent: 10%; /* Задаем красную строку — отступ в абзаце */}</style>