Which tag creates a paragraph in a document. Formatting Text in HTML
Read also
Any text has its own unique structure: books are divided into parts, sections and chapters, newspapers and magazines have separate headings and subheadings, which, in turn, include text fragments that also have their own structure: paragraphs, indents, etc.
The text placed on web pages is no exception, it must also have a logical structure understandable to every user. After all, a lot depends on how convenient and simple the text on the page will be perceived: first of all, what impression the visitor will have about your site.
To create such structural units of text as paragraphs, the tag is used in HTML documents.
, which separates text fragments with a vertical indent (an empty line is added before and after a paragraph).
Note: by default, the spacing between paragraphs is 1em (em is a unit of measure equal to the height of the font), that is, the spacing between paragraphs directly depends on the font size.
To change the indents between paragraphs without changing the font size, you can use CSS property margin .
Don't forget the closing tag
Most browsers will display HTML document correctly, even if you forgot about the closing tag.
Paragraph
Another paragraph
This code will work in most browsers, but don't rely on it. A forgotten closing tag can lead to unexpected results or errors.
Red line
What is a red line? By definition, this is the initial line of a paragraph, which used to be highlighted in red (hence the name). Before printing was invented, books were written by hand - the chapter or part of the text, the first word or letter was written in red paint. This is how the concept of “writing from the red line” appeared - this means the beginning of a new thought, chapter or part.
However, when creating web pages, the design of the red line is used quite rarely, despite the fact that it allows you to perceive the text visually with much greater convenience, which is quite important for the traditional reader - not everyone is comfortable reading the electronic version of the text.
To add a red line to your paragraphs, you need to use the text-indent CSS property, which allows you to indent the first sentence:
Try »
In the example above, the first line of every paragraph on the page will start with a 25px indent. The example below demonstrates how you can set the red line to only a specific paragraph on a page.
As with any real art, good lyrics there are no trifles, to which some include the red line, believing that its use is not so important. However, one must understand that any comma carries both an aesthetic and semantic load, and is not only a tribute to the rules of grammar - this also applies to formatting.
Try »Note: it is not necessary to set the padding to 25px, you can choose optimal size indent themselves, also using the text-indent property it is possible to make a line protruding above the rest of the text, for this you need to set a negative value for the property (for example: -30px).
In the last lesson about the document, we looked at six levels of headings that an html page can include, learned the rules for using the “h1-h6” tag. In this lesson, we'll look at paragraph tag, which will give our text the correct appearance on the page.
In the next post, I will tell you how to make your site even more beautiful (not to be missed). We will learn how to create a stylish background. I will break this post into two parts, in the first part we will work with Photoshop, and in the second we will play with cascading style sheets.
paragraph tag or the "p" paragraph tag allows you to create a paragraph of text on the page of a web document. If you do not use the “p” tag, but simply enter text without decoration, you will get unstructured, ugly-styled text.
When using the paragraph tag, the text becomes more or less readable, which makes the page more attractive. Let's look at a document that doesn't use the paragraph tag:
XHTML
Today, I woke up early as always. The morning sun broke through my window curtains. Stretching, I went to the kitchen. I brewed green tea put down two spoonfuls of sugar and sat down in an easy chair in front of the kitchen window. Outside it was autumn. I like this time of the year because I think that autumn is the most romantic time of the year. After finishing my tea, I took my mobile and called your beloved, wish her good morning. As I thought, she was still asleep. We are cute talked and agreed to meet this afternoon, while the sun is shining and on the street is warm. Time flew by unnoticed. And now we are together, having lunch at a local cafe: we eat, chat, flirt with each other. We feel good together. I love my girl and me too. Thinking about starting a family...
|
Here is what we ended up with:
The text is ugly. Everything is lumped together, without any structure. The following example shows the use of the "p" paragraph tag. This tag is a paired, block tag, but inside it can only contain lowercase tags. Block tags inside the "p" tag are not allowed, including the "p" tag itself:
XHTML
Paragraph one. In order to make the text on your pages look readable, the “p” paragraph tag is used. This text is framed in pair tag"p", which allows the browser to recognize the text as a paragraph.
Paragraph two. This is the second paragraph following the first. This paragraph will be indented from the first paragraph. An example of using paragraphs can be seen in the figure below.
Paragraph one. To make the text on your pages look readable the paragraph tag "p" is used. This text is framed in a paired "p" tag, which allows The browser will recognize the text as a paragraph. Paragraph two. This is the second paragraph following the first. This paragraph will have indent, from the first paragraph. An example of the use of paragraphs can be viewed at figure below.
|
Here's what we got, the code we began to use a paragraph:
Two component parts of the page appeared - two paragraphs separated by an indent. And so troubles with each new paragraph. For our first example, where the paragraph tag is not used, we can apply the following formatting using the "p" tag:
XHTML
Sunny morning
Today, I woke up early as always. The morning sun was shining through the curtains of my window. Stretching, I went to the kitchen. I made myself some green tea, put in two spoonfuls of sugar, and sat down in an easy chair in front of the kitchen window. It was autumn outside.
I like this time of the year because I think autumn is the most romantic time of the year. After finishing my tea, I took my mobile and called my beloved to wish her good morning. As I thought, she was still asleep.
We had a nice chat and agreed to meet this afternoon while the sun is shining and it's warm outside. Time flew by unnoticed. And now we are together, having lunch at a local cafe: we eat, chat, flirt with each other. We feel good together. I love my girlfriend and me too. Thinking about starting a family...
Sunny morningToday, I woke up early as always. The morning sun was shining through the curtains of my window. Stretching, I went to the kitchen. I made myself some green tea, put in two spoonfuls of sugar, and sat down in an easy chair in front of the kitchen window. It was autumn outside. I like this time of the year because I think autumn is the most romantic time of the year. After finishing my tea, I took my mobile and called my beloved to wish her good morning. As I thought, she was still asleep. We had a nice chat and agreed to meet this afternoon while the sun is shining and it's warm outside. Time flew by unnoticed. And now we are together, having lunch at a local cafe: we eat, chat, flirt with each other. We feel good together. I love my girlfriend and me too. Thinking about starting a family...
|
As you may have noticed, I have added a title to the text. I used only three paragraphs, and this option, as always, turned out to be better than the one that was before. Now we have semantic divisions of the text (indents between paragraphs). In general, it would be correct to say, not “paragraph”, but “paragraph”, since the “p” tag in English means “paragraph”. Next, I will say a paragraph, so do not get confused.
This is roughly what you should get after using paragraph tag:
The paragraph tag, like all other html tags, has attributes. Now we will look at the most important attributes of the "p" tag.
- id - Specifies the universal identifier used when writing properties in the cascading style sheet file (usually style.css). The identifier name is used only once within the same document.
- class - same as id, but can be used multiple times within the same document
- title - a tooltip displayed in the browser window when the mouse cursor is hovered over the text of the paragraph
- style - defines a set of cascading style sheet properties
- align - determines the alignment of the text of the paragraph relative to the browser window (left - left , right - right , center - center , width - justify)
- etc. (JavaScript elements)
An example of using attributes:
XHTML
If you move the mouse cursor over this text, a tooltip will pop up!!!
This paragraph is left aligned
This paragraph is right-aligned
This paragraph is center aligned
This paragraph has a universal identifier that refers to properties defined in the CSS file and can only be used once per page.
This paragraph has the class MAIN-P, can be assigned multiple times on the page, as opposed to ID
This paragraph is all underlined because uses cascading styles written directly to this paragraph using the STYLE tag attribute. In the value of the STYLE attribute, I specified that the entire paragraph should be underlined: UNDERLINE
s
This paragraph is all underlined because uses cascading styles written directly to this paragraph using the STYLE tag attribute. In the value of the STYLE attribute, I specified that the entire paragraph should be underlined: UNDERLINE s |
Hello! Let's continue to consider the basics of website programming. It is hard to imagine at least one of them, in the code of which the paragraph tag would not occur. Today we will consider how to write it correctly and a description of several additional actions with the text.
Example
Let's look at an example of how to make a paragraph in HTML code.
One or more offers.
A prerequisite is the presence of an opening and closing tag. By the way, everything can be done directly in Notepad, just then you will need to save the file in the appropriate format.
Formatting
Quite often I notice that people are interested in how to make a red line. For a particular paragraph, it's very simple.
Enabling these options will indent the first line by 15 pixels from the left edge. If such changes should be applied to all P tags, then in the CSS file that is connected to the pages of the site, you can write the code shown below.
Personally, I don't usually make red lines when editing code in notepad or another editor.
I just include padding between text blocks. To do this, in CSS you need to write special parameters.
p(margin-bottom:25px;)
If you use this design, then after each paragraph an indent of 25 pixels will appear.
In fact, there are a lot of options for working with HTML and various styles. I have described only a few of them, it is very difficult to cover everything in one article.
Want to know more? You may find my previous posts on the following topics helpful:
On this I will complete the article and, I think, now it will not be difficult to make paragraphs in HTML and arrange them beautifully with the help of special tags.
I wish you great success in learning to program. By the way, have you thought about making money on informational non-commercial sites? He simply provided great information for his readers at.
Normal work and finances online are the key topics of this blog. You can familiarize yourself with individual prospects online right now from the published materials. I continue to prepare and publish new, and most importantly, really useful content. Subscribe to Workip updates on your email. Until communication.
Hello dear blog readers! This article will talk about text formatting tags. Prominent examples are making text bold or italic. We will also consider the influence of some tags on the internal optimization of the site and the rules for writing them. You can read about that in the article below. By the way, you can find similar text design elements in many text editors, for example, in Word.
Tags are divided into 2 types: block and inline. When using the former, you can change the content of a part of the text (lines, individual fragments or words), and the latter are . The formatting tags we'll cover in this article are predominantly inline.
Rules and order of writing tags
You already know what opening and closing tags are. If not, then read the article at the very beginning of this material. In short, there are two types of tags: single (for example, transfer to newline) and container (paired). So, all text formatting tags are paired. This means that any element has an opening and closing tag, and the highlight must be placed between them. For example, the correct selection of a phrase would look like this: Selection
When the browser processes this fragment, you will see the following text: Selected fragment. By the way, in RSS feed all tags are not displayed ().
The main thing when writing tags is not to forget to close them. Otherwise, all text on the page will be bold (in the example with the tag ). But there are cases when you need to select a certain fragment both in bold and in italics at the same time. But there is no tag that performs this action. There is only one way out of this situation: use two tags at the same time. It doesn't matter in which order you use them. Therefore, writing the text with tags like this:
Selection
or like this:
Selection
You still get Selection italic and bold at the same time. However, it is preferable to use the first option, because initially it was the only and correct one. Also, do not forget that each browser can process tags differently (), depending on the settings. Now let's move on to the formatting tags themselves.
Making text bold and italic - tags , , And
The most popular text formatting tags - highlighting it bold And in italics. Usually they are used to give importance to any fragment. The first case serves to select a fragment containing useful information or keywords. Italics serve the same purpose as bold text, but the information is less important because italics are less visible against the background of body text than bold text.Let's start with making text bold. There are two tags used for this action − And . Differences in appearance No. Although, given that each browser can interpret each element differently, you should be able to see some differences. This is what the text in the tags looks like And in the form already processed by the browser:
Text in strong tags
Text in b tags
And here is what these two lines look like in the source code of the page:
Text in strong tags Text in b tags
We can observe the same situation in the case of italic tags And . Try to find the differences between the two examples:
Text in em tags
Text in tags I
And here source:
Text in em tags Text in tags I
So, the considered selection tags in bold and italics do not actually differ, but why then do we need, for example, the tag if there ? After all, the latter contains only one character (not counting the brackets) and, therefore, is easier to write. And the thing is that tags And affect . If you surround keywords with these tags, this will have a positive effect on site promotion. The main thing is not to overdo it - the text should have a maximum of 5% bold text in the tag , and the same amount of italics in the tag .
If you just want to highlight some point in the text, then use the tag or . In general, I think that search engines also consider the text in these tags as more important, but on internal optimization they still have less effect than And .
Highlight text slash tags − , And
Now let's look at a few tags that use a stroke in text decoration. The most famous to you text editors — tag
or underscore. This tag does not affect the ranking (as far as I know), but it will help to highlight some text and focus on it. I gave an example of using this tag a little higher. Two more similar tags - And . Both perform the function of strikethrough text. You can use this tag in any situation: if you are updating a document (or rather part of it), you can cross out the old and add a new one; if you are going to write something that deviates from the topic of the material; something that does not meet moral and ethical standards.
The differences between these two tags are only in their writing, as a result of which it is preferable to use the first one, because firstly, it is more convenient to write, and secondly, there will be less HTML code on your page, and search engines love it.
Tag and attributes - text font settings
Now consider a tag that is not used without attributes. With it, you can set parameters for a specific piece of text. In general, it is now preferable to use (cascading style sheets), because using them, you can greatly reduce the entire HTML code of the page. So, consider the same tag . For him there is everything three attributes:
- face- the font itself. For example, Arial, Courier or Verdana. You can list a few, because. not all users have an extensive set of fonts, and by writing several in the face attribute, the browser will be able to choose which one to use, or rather, which one is present in the system;
- size is an attribute that specifies the size of the text. It can be expressed both in arbitrary units and in pixels;
- color- text color. This attribute can be used both in HTML color codes and in verbal ones. The former look like #FFFFFF (where F is any number or letter from A to F), while the latter are written in simple terms(for example, red - red).
This is what the text in the tag looks like using each attribute:
This text is 6px
This text is red This text is in Arial font This text is red and 5px in size.And here is what you will see after processing the written code: 
Block Text Design Elements - Headings -, paragraph
, paragraph
Finally, we will look at block elements, which are used in almost every document. These are heading and paragraph tags. Let's consider the first. Headings come in 6 types and each has its own tag. Each species has only its own serial number and is recorded using tags.
, ,..., . Here's what all the headers look like when processed:
. Here's what all the headers look like when processed:
The number after the title word corresponds to the number in the tag
Now let's talk about the paragraph selection tag
The function of this tag is to separate text between other similar text. empty string. If you look at the source code of any document, you can see the following:
The green rectangles contain one paragraph, the red rectangles another. And here is how this code looks after processing by the browser (the arrow points to an empty line):
As a result, we get a fairly noticeable separation of one paragraph from another, which is beneficial - reading becomes more convenient.
This is the end of the article about document formatting tags. There are many more than I have described in this article. It’s just that some need to be told quite a lot, as a result of which separate articles with a full review will be devoted to them.!