How to indent the first line in html. Formatting an HTML Paragraph

In the case of HTML documents, tags work more to mark up content than to indicate how it should be presented. Greater control over presentation is achieved with styles. In this article I will look at those styles that are associated with paragraph formatting in HTML.

Tag

In HTML, you can specify paragraphs, and the align attribute aligns them left, right, center, or justified. In addition to them, we will use the global style attribute.

Paragraph alignment

You can align a paragraph using the align attribute with the following values:

text-align: left|right|center|justify|initial|inherit;

Copy the following code into your .html file.

This paragraph is center aligned

This paragraph is right aligned

This paragraph appears justified in the browser window. A justified paragraph is aligned to the right and left by adding extra spaces. You can see that the edges of the justified paragraph match the edges of the left- and right-aligned paragraphs. In a left-aligned paragraph, the left edge is straight, while in a right-aligned paragraph, the left edge is straight. Do you see how both edges of this paragraph are straight? This is achieved through the text-align:justify style.

In the window HTML browser The paragraph code looks like this.

Line spacing

You can control paragraph line spacing using style=line-height . Use the style attribute with the following values:

line-height: normal|number|length|initial|inherit;

Below is an example of HTML code that displays paragraphs with different line spacing:

This paragraph uses two meanings for style attribute. The first line-height:1.5 specifies one-and-a-half line spacing for the paragraph, and the second value text-align:justify specifies that the paragraph text should be spread across the width.

This paragraph is double-spaced and justified. line-height:2 specifies double spacing. The style attribute does not have to have two values. But if you need to specify two values, you can do so by separating them with a semicolon.

Here are a few different ways to use the line-height value for the style attribute:

: Sets line spacing 13 pixels;

: Sets the HTML spacing between paragraphs to 200% relative to the current font size;

: Sets the line height to 14 pixels.

Indentations

I used the term "indents" to make it easier to understand. But in HTML we use spacing to create around an object empty space. You can use the style attribute with a padding value to indent a paragraph to the left or right.

Below is an example of paragraphs with left and right indentation:

This paragraph is not indented, it is simply justified. Look at the P element's style attribute for this paragraph.

For this paragraph, I set the left padding to 30 px using the padding-left:30px style. This paragraph is also justified using the text-align:justify style. As you already know, we can use multiple values ​​for the Style attribute by separating them with a semicolon.

And this paragraph has a right indentation of 30 pixels, but no left indentation. It is also aligned to the width. The 'padding-right' value of the style attribute specifies the right padding. If you don't see the effect, reduce the width of your browser window so that the justified HTML paragraph displays properly.

Indentation between paragraphs (indentation before and indentation after paragraph)

In HTML or CSS we don't need this. We can simply specify the padding style for the element

Padding-top and padding-bottom specify white space before and after a paragraph, which acts like padding at the top or bottom. Look at the tag example below

I set the first HTML paragraph to have a padding of 10 pixels before the second paragraph and 50 pixels after the second paragraph:

This paragraph does not have any before or after indentation specified. This is a regular paragraph, justified. As you already know, we can justify a paragraph using the code style=”text-align:justify” inside the tag.

This paragraph is outsized. It also has 10 pixels of padding before the paragraph and 50 pixels after it. Inside the tag I have set 3 styles.

This is a regular paragraph with no indents and default alignment.

Things to remember

• An HTML paragraph can be aligned using the align attribute or the text-align style;
• HTML will be rendered differently depending on screen sizes, browser window sizes;
• Adding extra spaces or empty lines to your HTML does not affect the output. The browser deletes everything extra spaces;
• Tags define what should be displayed, and styles define how it should be displayed;
• Styles can be specified in three different ways— built-in (within tags), internal ( inside the same HTML file using the element
  

  Prince Andrei looked back at this oak tree several times while driving through the forest. There were flowers and grass under the oak tree, but he still stood in the middle of them, gloomy, motionless, ugly and stubborn.
  

  Result:

  Prince Andrei looked back at this oak tree several times while driving through the forest. There were flowers and grass under the oak tree, but he still stood in the middle of them, gloomy, motionless, ugly and stubborn.

  Now you can easily make a red line on yours html pages . See you again!

  Eat different ways HTML settings indentation before text. But for compatibility with different browsers and accessibility, we will discuss the most popular methods:

  To indent before text or paragraph, it is better to use CSS. Below are examples of how to offset labels using Cascading Style Sheets. Paste each of the following code examples between HTML tags .

  The following code creates a CSS class "tab" that moves the characters and paragraph 40 pixels from the left edge:

  By pasting the above code into the section , you can execute it anywhere by adding it to paragraph tags (

  ) as shown below:

  Sample tab

  If you plan to apply this style on multiple pages, it is better to create a .css file and link it to all web pages. To indent HTML, add the following line between the tags and create a link to the file. We called it " basic.css«:

  Once the CSS file is created, open it for editing and add the same code except the tag