Tag new paragraph. How can I add a first line indent for each paragraph? Creating html lists
Tags defining paragraph, space, HTML block and paragraph
Let's look at it in detail HTML blocks and paragraphs as elements of a web page.
- HTML paragraph defined by tags.
- HTML paragraphs usually contain text, formatting tags, and images.
- HTML paragraph cannot contain block elements such as headers
- , block
and other paragraphs. - HTML block defined by tags .
- HTML block can contain any elements of a web page, in any quantity.
- HTML blocks Great for web pages and easy to manipulate.
Consider the code below:
Result:
We can see that HTML paragraphs have vertical indentations - this is a feature of tags. HTML blocks
Tags cannot contain other or
Linear elements can be placed inside, such as or, for example, tags responsible for text formatting.
Tags and , in principle, are the same thing, but the W3C consortium recommends using small letters. In the new version of HTML, as in modern XHTML, the use of capital letters when writing tags is prohibited.
document. It is ideal for layout, but more on that later - in the CSS tutorial lessons.
HTML space from special characters table HTML space
allows you to increase the distance between words and characters.< >As for the spaces between words, no matter how many there are in Notepad, that is, in the source code, only one will be displayed on the web page. If you need to increase the distance, use the space character from the symbol table. You may ask: Why are these encoded meanings of ordinary characters needed? - I will answer: They are needed to display, for example, such brackets . In other words, to display tags on the screen, in my editor I write: . Tags
, as we remember, convert the text to monospace (typewritten).
Ways to display an HTML paragraph
Examples of paragraph output.
To give it a specific style, you need to place the text in the appropriate container.
All formatting tags can be divided into three groups: 1. Title tags ().
h1-h6
,
,
,
,
2. Body text design tags (
etc.).
,
,
)
3. Grouping tags (
Title tags
creates a first-level heading - the largest and most important (usually the title of the article on the page),
is responsible for the sixth level heading - the smallest and most inconspicuous. These tags are important for both users and search engines - both of them love headings with subheadings. The hierarchy of levels must be observed, that is,
have to go
, and not the other way around.
To understand how this works, enter the following code into the html file:
First level header
Second level heading
Third level heading
Fourth level heading
Fifth level heading
Level six heading
It will look like this in the browser:
Body text design tags
Allows formatting at the character level. Let's look at what you can do with them.
Bold font
Needed to focus attention on the text. It is also important for search engines; they can highlight keywords.
Responsible for bold style tags And .
Superscript and subscript
They can be used in formulas, equations, and the designation of certain quantities.
The tag is responsible for creating subscripts , for the top ones the tag is used .
X 1=32 m 2
Downsizing
If you need to make the text one less than the set value throughout the page, then you need to use the tag
Plain text. Reduced text.
Underscore
This type of highlighting can be used to indicate changes made to a document or simply to draw attention to the text.
Plain text. Underlined text.
Strikethrough
You can cross out information if it has already lost its relevance. This is the tag for this
.
Italics
Needed to focus attention on the text, and can be created with a tag or .
Computer text input
It happens that you need to add the source code of a program and the results of its work to a web page. To make it easy to visually distinguish different parts of the text from each other, HTML developers introduced tags of this group.
Into container
contains the program code, and its variables are highlighted with the tag
, and the result of execution is
. Container
contains text that the user must enter from the keyboard when working with the program, and everything that is enclosed in tags
, preserves the original format, including extra spaces and line breaks.
Thus a, b, c, Here result of program execution , and this is user entered text displayed something like this
.
Quotes and definitions
The program code will look like
Thus
, the variables are designated as follows:
a, b, c
, Here
result of program execution
, and this is
user entered text
. Keep original formatting
displayed something like this
.
Quote in the blockquote tag.Quote inside cite container.
Short quote tagged q.
General example
To better understand what each tag is responsible for and how it works, look at the following code and the result of its execution.
Fatty text can be made into tags strong And b. Behind italics answer em And i.
Tags sub And sup used to create lower(x 1…x n) And upper (42=16) indexes. Del crosses out, ins - emphasizes.
Tags code, kbd, var And samp are rarely used and are needed to display program listings
abbr needed to indicate abbreviations ( HTML). The blockquote, cite and q tags are used to format quotes ( The sky was already breathing in autumn
)
The pre tag preserves the original text formatting without removing spaces or line breaks.
The browser interprets this code as follows:
Grouping tags
It is necessary that the text does not flow in one continuous line, but is broken into logical components.
- Inside the tags is a paragraph.
First paragraph
Second paragraph
- Tag
moves to the next line within a paragraph (there will be no indentation before the line).
allows you to draw a horizontal line. You can use it to separate text more clearly. Attributes width, size, color, align And noshade set the width, thickness, color, alignment and lack of 3D effect of the line, respectively.
Line above line.
Line below line.
So, let's proceed directly to learning the HTML language. Finally, a couple more words off topic.
In the process of presenting the material, many examples will be given, which I advise you to do yourself. After typing the example text, be sure to look at what you got (I think you yourself will be interested). If you use a specialized HTML editor, then, as a rule, such a program has its own built-in browser, with which you can see the results of your work.
If things are really tough and you are using an ordinary notepad, then to view it you need to save the source text with the .htm or .html extension, and then view the saved file in a browser. If you have Windows, then the Internet Explorer browser is built in automatically during system installation.
Well, that seems to be all.
Let's get down to business.
Required tags (tags)
There are several basic HTML tags that must be present in the text of any Web page. Each Web page must contain a tag (tag) , located at the very beginning. This tag describes your document as a Web page in HTML format. Directly behind the handle usually followed by tag (tag) , which indicates the presence of text containing the name of the page and additional information about it.
The HEAD section usually contains a tag (tag)
A normal HTML editor already has a set of the above tags (tags) when creating a new page. It should be said that the choice of names for Web pages should be taken very seriously, because they are used by search engines to create catalogs of Web pages. A search engine is a website that helps users quickly find the information they are interested in. Your page is more likely to be found by a search engine that is given a specific set of search keywords if those words appear in the page title. Among the most popular search engines are Yandex, Google, Aport, Yahoo, Rambler.
Create paragraph, space characters, heading
Web browsers usually do not take into account those newline characters that are entered into the text by the user at the stage of its formation. To start a new paragraph, use a tag (tag)
.
After opening a page in a Web browser window, all paragraphs of its text marked with a tag (tag)
, separated by blank lines, which improves its layout and appearance.
By default, the browser usually formats paragraphs with left alignment. To force alignment, use the align attribute. With its help, paragraphs can be aligned left, right, center and justified.
Example:
|
HTML code: paragraph aligned left... paragraph is aligned to the right... paragraph is center aligned... paragraph is justified... |
Browser display: paragraph aligned left paragraph aligned left paragraph paragraph aligned left paragraph aligned left paragraph paragraph aligned left paragraph paragraph aligned left paragraph paragraph aligned left paragraph paragraph aligned left paragraph paragraph aligned left paragraph aligned to the right paragraph aligned to the right paragraph aligned to the right paragraph aligned to the right paragraph aligned to the right paragraph aligned to the right paragraph aligned to the right paragraph aligned to the right paragraph aligned to the right paragraph aligned to center paragraph aligned to center paragraph paragraph aligned to center paragraph paragraph aligned to center paragraph paragraph aligned to center paragraph paragraph aligned to center paragraph paragraph aligned to center paragraph paragraph aligned to center paragraph aligned to center paragraph justified paragraph justified paragraph justified paragraph paragraph justified paragraph justified paragraph justified paragraph justified paragraph justified paragraph justified paragraph justified paragraph justified paragraph justified |
Web browsers automatically wrap text within paragraphs to a new line. If the task is to place any combination of words in one line, then a tag is used for this purpose.
To go to a new line, use a tag (tag)
. It tells the browser to stop placing text and other page elements within the current line and move to a new line. This tag (tag) does not have its slash counterpart, the so-called closing tag (tag).
The main use of this tag(s) is to force inline elements to be placed at a specific location on the page. It is also convenient in cases where it is necessary to increase the empty areas between individual page elements.
– in the process of creating a website, we have to work a lot with text blocks, or text phrases. One day, I needed to add a text phrase in such a way that before this text phrase there is some indent text from edge html block in which this text was added.
So, the first method is the most natural and simple. To indent the text, add an html space code before the text - You can add an html space code in any html editor.
Here is an example of working code for setting indentation for text using the space code:
and other elements left text indentation, use space code
In this example, before the text we have selected, the space code is added four times, as a result, we get the indent we need.
We know that the space code is processed by any browser. Therefore, by adding the required number of spaces before the text, you can get the required indentation for the text.
This method is good because it is guaranteed to be processed by any browser.
But this method has a significant drawback. In order to indent the text long enough in the html code, you will have to add a large number of space characters before the text, which may not look beautiful, cumbersome and unprofessional.
One solution to this problem is the following method of setting the indentation.
HTML text indentation, method two - this method is based on the properties of the blockquote tag. This tag sets an indent of approximately 40 pixels on the left and right for the text placed in it. In addition, the indentation is specified at the top and bottom. An example of html code for using this method is given below:
on the left, use the tag blockquote
As you can see, this method of setting indentation for text is very easy to use, but this method also has a significant drawback. The indentation that the tag sets blockquote is fixed and is always equal to the same value – 40px.
To correct the situation, and when adding html indentation and for text to be able to set any value, we will use the third method.
HTML text indentation, method three.
Here we will use the text-indent property of CSS Cascading Style Sheets.
If we open the CSS reference book, on the page with a description of the properties of text-indent, we will see that using text-indent, we can set the indentation value of the first line or first paragraph, or any block of text.
We are considering an example with a short block of text, so the text-indent properties are quite suitable for our case.
Below is the html code that indents text using text-indent. The example shows that by setting text-indent to different argument values, we can change the amount of text indentation:
and other elementsindentationtext, CSS style works - text-indent
In my opinion, this method of setting an indent for text is the most optimal, but, nevertheless, let’s consider another way to set an indent, using images.
HTML text indentation, fourth method - here we will use an image to set the indentation.
As a working example, let’s immediately look at the html code that demonstrates how this method works:
on the left, use the image
From the above example it is clearly seen that by changing the width of the image, we can change the position of the text, that is, set the desired indent for the text.
As an image, you can use an image whose width and height are equal to one pixel. To prevent the image we are using from being visible on the page, we will set its color exactly the same as the background of the site page.
In my opinion, the above methods for setting indents for text are quite enough to organize the indentation you need in any situation when adding content to the page of your sites.
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 fragments of text that also have their own structure: paragraphs, indents, etc.
The text posted on web pages is no exception; it must also have a logical structure that is understandable to every user. After all, a lot depends on how convenient and simple the text on the page is perceived: first of all, what impression the visitor will get about your site.
To create structural text units such as paragraphs, HTML documents use the tag
, which separates text fragments with a vertical indent (a blank line is added before and after the paragraph).
Note: by default, the distance between paragraphs is 1em (em is a unit of measurement equal to the height of the font), that is, the distance between paragraphs directly depends on the font size.
To change the margins between paragraphs without changing the font size, you can use the margin CSS property.
Don't forget the closing tag
Most browsers will render the HTML document correctly even if you forget 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 starting line of a paragraph, which used to be highlighted in red (hence the name). Before printing was invented, books were written by hand - a 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 red line design is used quite rarely, despite the fact that it makes it much more convenient to perceive the text visually, 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 each paragraph on the page will start with a 25px indent. The example below demonstrates how you can set a red line only for a specific paragraph on a page.
As in any real art, there are no trifles in good texts, to which some include the red line, believing that its use is not so important.
Try »However, we 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.
