HTML paragraph and first-line indent

Paragraphs

Any text has its own unique structure: books are divided into parts, sections and chapters, newspapers and magazines have separate rubrics and subheadings, which in turn include fragments of the text, which also have their own structure: paragraphs, indents, etc.

Text placed on web pages is not an exception, it should also have a logical structure that is understandable to each user. After all, how convenient and simple will be perceived text on the page, depends a lot: first of all, what impression the visitor will have about your site.

To create structural units of text, such as paragraphs, in HTML documents used the <p> tag, which separates text fragments with a vertical indentation (an empty string is added before and after a paragraph).

<p>Paragraph</p>

Note: by default the spacing between paragraphs is 1em (em is a unit of measurement equal to the font height), that is, the distance between paragraphs is directly dependent on the font size.

Do not forget about the closing tag

Most browsers will display the HTML document correctly, even if you forgot about the closing tag.

<p>Paragraph
<p>Another paragraph</p>

This code will work in most browsers, but do not rely on it. A forgotten closing tag can lead to unexpected results.

First-line indent

First line is the starting line of the paragraph. To indent the first line to your paragraphs, you need to use the CSS property text-indent, which allows you to indent the first sentence:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
	  p { text-indent: 25px; }
	</style>
  <head>
  <body>

    <p>As in any real art, there are no trivialities in good texts,
	to which some also refer to the red line, considering that its use
	is not so important. </p>
    
    <p>However, one must understand that any comma carries in itself both aesthetic
	and the semantic load, and not only is a tribute to the rules of grammar is concerns
	and formatting. </p>    

  </body>
</html>
Try it »

In the example above, the first line of each paragraph on the page will start with an indentation of 25px. The example below shows how you can specify indent for only a certain paragraph on the page:

<p style="text-indent: 25px;">As in any real art, there are no trivialities in good texts,
 to which some also refer to the red line, considering that its use is not so important.
 However, one must understand that any comma carries in itself both aesthetic and
 and the semantic load, and not only is a tribute to the rules of grammar is
 concerns and formatting.</p>
Try it »

Note: it is not necessary to set the indent size in 25px, you can choose the optimal indentation size yourself, also using the text-indent property it is possible to make protruding over the rest of the text string, you need to set a negative value for the property (for example:-30px).

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen