To make the text easier to understand and read, it is divided into parts. For example, a book consists of chapters, a newspaper – of headings, an article – of subheadings, which have their own structure: indents, paragraphs, lists, etc.
The text posted on the Internet is also subject to this rule. It should have a user-friendly structure. Because of how easy and simple it will be perceived, depends in the first place, whether the user will stay on your site and assimilate the information read.
To create paragraphs in HTML tag p is used to divide the document on the vertical indent, adding a blank line at the bottom and top.
<!-- HTML -->
<p>First paragraph</p>
<p>Second paragraph</p>
Title line
This is the first line of an indented paragraph. In the past, when books were rewritten by hand, it was customary to do it in red ink. Over time, the tradition was discontinued, but the name remained.
Although the presence of indentation makes it easier to read, creating Internet pages, their importance is underestimated and therefore rarely designed.
Automatic addition of a red line is carried out thanks to the CSS property text-indent, it allows you to set a fixed indent before the first letter of the paragraph. The data entered determines how far the red line will move to the right. There is a way to make the text protrude (move the beginning of the paragraph to the left) by entering negative numbers.
As values it is allowed to specify centimeters (cm), pixels (px) or other units of measurement that CSS understands. But it makes the most sense to use percent % or relative units (em), which automatically correspond to the specified font size.
<!-- HTML -->
<p>Adding a red line to the text improves the visual perception of what you're reading.</p>
<p>But nowadays this rule is used less and less often.</p>
/* CSS */
p {
text-indent: 1.2em;
}
It should be borne in mind, different screens people look at different distances, and 1 centimeter on the computer monitor and a smartphone is perceived differently. For example, when the set font is 2in, then 1em means 2in. It is also acceptable to specify a percentage when the indent value is calculated in % of the text block width.
If you want to indent a separate paragraph individually, you should additionally write style attribute with text-indent value inside p HTML element and specify required indent value.
<!-- HTML -->
<p>When you need to select a single paragraph, you can resort to using the attribute within the element.</p>
<p style= "text-indent: 3%">Only the paragraph will be highlighted.</p>
<p>The others will appear as normal.</p>
For more flexible customization of the submitted text, you can create separate CSS classes with different indentations and apply them depending on the importance and need to personalize the content.
<!-- HTML -->
<p class="start">The beginning of an article with a short description.</p>
<p>Text presented in the middle of an article that describes the main content.</p>
<p class="main">The main thesis in the narrative.</p>
<p>Disclosure of the topic of the thesis.</p>
<p class="ps">Conclusions and the main idea.</p>
/* CSS */
.start {
text-indent: 2%;
}
.main {
text-indent: -0.9ex;
}
.ps {
text-indent: 12px;
}
You want paragraphs to start with a fixed indent by default, use the CSS text-indent property.