Абзацный отступ HTML

Для облегчения восприятия и чтения текст разделяют на части. Например, книга состоит из глав, газета – из рубрик, статья – из подзаголовков, которые имеют собственную структуру: отступы, абзацы, списки и т.д.

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

Чтоб создать абзацы в HTML применяется тег <p> разделяющий документ на вертикальные отступы, добавляя внизу и вверху пустую строчку.

<!-- HTML -->
<p>Первый абзац</p>
<p>Второй абзац</p>

Красная строка

Это первая строчка абзаца с отступом. Раньше, когда книги переписывались вручную было принято делать ее красными чернилами. Со временем традиция упразднилась, но название осталось.

Хотя наличие отступов облегчает чтение, создавая интернет-страницы, их значение недооценивают и поэтому редко оформляют.

Автоматическое добавление красной строки осуществляется благодаря свойству CSS text-indent, оно позволяет устанавливать фиксированный отступ перед первой буквой абзаца. Введенные данные определяют на какое расстояние красная строка сдвинется вправо. Существует способ сделать текст выступающим (передвинуть начало абзаца влево), введя отрицательные цифры.

В качестве значений допускается указывать сантиметры (cm), пиксели (px) или другие единицы измерения, понятные CSS. Но наиболее разумно использовать проценты % или относительные единицы (em), которые автоматически соответствуют заданному размеру шрифта.

<!-- HTML -->
<p>При добавлении красной строки к тексту улучшается визуальное восприятие прочитанного.</p>
<p>Но сейчас это правило все реже и реже не используют.</p>
/* CSS */
p {
    text-indent: 1.2em;
   }
Пример реализации абзацного отступа в html

Следует учитывать, на разные экраны человек смотрит с различного расстояния, и 1 сантиметр на мониторе компьютера и на смартфоне воспринимается по-разному. Например, когда установленный шрифт 2in, то 1em означает 2in. Также допустимо указывать процент, когда величина отступа рассчитывается в % от ширины блока текста.

Если необходимо создать для отдельного абзаца индивидуальный отступ, дополнительно внутри HTML элемента <p> прописывается атрибут style со значеним text-indent, и вносятся требуемые величины отступа.

<!-- HTML -->
<p>Когда необходимо выделить один абзац, можно прибегнуть к применению атрибута внутри элемента.</p>
<p style= "text-indent: 3%">Выделиться лишь этот абзац.</p>
<p>Остальные будут иметь обычный вид.</p>
Пример выделения одного абзаца посредством атрибута элемента p

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

<!-- HTML -->
<p class="start">Начало статьи с кратким описанием.</p>
<p>Текст, представленный в середине статьи, в котором описывается основное содержимое.</p>
<p class="main">Главный тезис в повествованиии.</p>
<p>Раскрытие темы тезиса.</p>
<p class="ps">Выводы и основная мысль.</p>
/* CSS */
.start {
  text-indent: 2%;
}
.main {
  text-indent: -0.9ex;
}
.ps {
  text-indent: 12px;
}
Применение классов CSS со свойством text-indent для персонализации текста

Хотите, чтобы абзацы по умолчанию начинались с фиксируемого отступа, используйте свойство CSS text-indent.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *