First, let's talk about headlines. In the previous lessons you could see how text is used. However, along with it, there are tags in html that denote headings: h1, h2, h3, h4, h5, h6. They are in order from largest to smallest: h1- the biggest title, h2- a little less, but h6, the last of them, respectively, the smallest.

Heading 1

Heading 2

Heading 3

Heading 4

Demonstration Download sources
The above code will display the following

Attention! I want to say right away that headings must be used carefully! The search robot, which creates an array of information on your site, FIRST of all analyzes the headings in terms of Content. And if, for example, they contain empty information like entertaining, Attention, And here's something else interesting, then it will go to the minus of your site! Pay attention to it right away and make headlines informative! For example: Introduction to sociology, Einstein-Podolsky-Rosen paradox, Biography of Horace, Jurassic period, which should contain the Meaning of all or intermediate information on this page.

Formatting Text in HTML

You probably already noticed that if you break a line and continue typing text in the code, then the text itself still goes in one paragraph without a line break. In order to break a line, you need to use a single tag br together forced transfer.

Most often (and more correctly) for line break and paragraph mark use tag p (paragraph). If you use this tag, paragraphs will be indented from each other.

The text of the first paragraph. The text of the first paragraph. The text of the first paragraph. The text of the first paragraph.

The text of the second paragraph. The text of the second paragraph. The text of the second paragraph. The text of the second paragraph.

Demonstration Download sources

Tag p there is an attribute align, which is responsible for paragraph alignment. May have the following values:

left- left alignment
right- alignment on the right side
center- in the center
justify- in width

Let's look at an example code for text alignment on the left side, on the right side and in the center.

The text of the first paragraph. The text of the first paragraph. The text of the first paragraph.

The text of the second paragraph. The text of the second paragraph. The text of the second paragraph.

The text of the third paragraph. The text of the third paragraph. The text of the third paragraph.

Demonstration Download sources

There is also a tag center. It centers its content (text, image, etc.). For text, its effect is similar to center alignment.

Center text

How to make text bold in html?

strong- Standard bold text.
b- highlighting the keyword in bold. This tag predates the strong tag and is considered obsolete by some (however, the tag is used in HTML5). Along with strong, it is perceived by search engines when defining keywords and phrases.
Attention! Highlighting text with these tags is understood by the Search Engine as especially important.
Be careful:
1. allocate only important words and phrases
2. important - this is not a quarter of the text. try limit the application this tag.

Let's look at an example of the code for highlighting text in bold

If you want to highlight a phrase so that it is simply visible to the user,
e.g. reminder do so. Or so in case keyword

Demonstration Download sources
The browser will display the following

Both those and other words will be highlighted in bold, however, the words will be important for the Search Engine keyword

How to italicize text in html?

i- italics. Only important information (keywords) should be highlighted with these opening and closing tags, as search engines will provide data based on them.
em- standard italics. There are no restrictions on use.
quote- this type of italics is used for quotes, references to material and authors.
dfn- to highlight definitions and terms.

Consider an example of code with text selection in italics

mercedes benz is a German automaker founded in 1886.
The name comes from two brands - Mercedes and benz.
He is mainly involved in the production premium cars, trucks, buses.

http://ru.wikipedia.org/wiki/Mercedes-Benz

Demonstration Download sources
The browser will display like this

How to underline text in html?

u- standard underline selection (best used with latest html specs)
ins- this is how new data (text, explanation) inserted into your document (either added or replacing the old ones) is marked. Highlighted by underlining

The data in both the first and second cases will be highlighted underlining.

How to make text strikethrough in html?

Strikethrough highlights text in the following tags
del- made correction.
strike- standard strikethrough.
s- short for strike

Two times two equals five four. Normal strikethrough text

Demonstration Download sources

How to highlight text in superscript and subscript in html?

sub- a tag that displays text below the line level in a smaller font.
sup- a tag that displays text above the line level in a smaller font.

a ²+b ²= c ²- Pythagorean theorem.

H ₂ O is the chemical formula of water.

Demonstration Download sources
The browser will display the following

font tag in html

For editing text in html is also used font tag. However, with the introduction of block layout and the popularity of CSS, this method quickly began to be forgotten.

Tag font specifies font options (font type, size, color). It has the corresponding attributes:

face- font name. You can give several names of fonts (separated by commas), since the user viewing your site may NOT have such a font by default or he will not support this language. For example, a user from Poland or China. Accordingly, if this font is not found, then the next one in the list is used.

size- active values ​​from 1 to 7. Default font is 3.

color- text color. If you do not set the parameter, then the text will be black.

Font Tahoma, size 5, color blue.

Demonstration Download sources
Again, this method is outdated, so I advise you not to get used to using it.

Is it possible to display the text in the form in which it was printed (a). PRE tag

Yes, you can really make your life easier and get rid of many indents, hyphens and other things. For this there is pre tag. The number of spaces greater than one in the code is equal to one, but in pre the text remains in the form in which it was entered.

How did you want to enter the text 
so he showed up!  =)

Demonstration Download sources
It will look like this in the browser

Other tags for text formatting

abbr tag stands for an abbreviation. An abbreviation is an abbreviated word or phrase. Abbreviations can be found everywhere, for example, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
title attribute

HTML

Demonstration Download sources
In the browser it will look like this

acronym tag unlike an abbreviation, it denotes an established word (acronym) that is used as an independent word. For example: USSR (Union of Soviet Socialist Republics), AIDS (Acquired Immune Deficiency Syndrome), USA (United States of America).
The word selected in these tags is highlighted with a dotted line and displays the content on hover title attribute

HTML

Horizontal bar in html or hr tag

To indicate a horizontal line in html is used hr tag. Above and below it is distinguished by indents.

This tag has the following attributes:
align- alignment of the horizontal line. Alignment types have already been mentioned earlier: left (left), center (center), right (right).
width- fixes stroke length in pixels or percentage
size- line thickness
color- line color
noshade- removes the relief of the line

regular line

---

Line in the center with a length of 50% of the block width, line thickness 2

---

Line right, blue, 200px

---

Demonstration Download sources
In browser

Thank you for your attention! The lesson was long and difficult! You have taken a big step forward!

Description

Adds text decoration in the form of underlines, strikethroughs, lines above text, and blinking. More than one style can be applied at the same time by listing values ​​separated by spaces.

Syntax

text-decoration: [blink || line-through || overline || underline] | none | inherit

Values

blink Sets blinking text. Such text periodically, about once a second, disappears, then reappears in the same place. This value is not currently supported by browsers and is deprecated in CSS3, animation is recommended instead. line-through Creates strikethrough text (example ). overline The line passes over the text (example ). underline Sets underlined text (example ). none Cancels all effects, including underlining on links, which is set by default. inherit The value is inherited from the parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

strategic attack

Object Model

document.getElementById("elementID ").style.textDecoration

document.getElementById("elementID ").style.textDecorationBlink

document.getElementById("elementID ").style.textDecorationLineThrough

document.getElementById("elementID ").style.textDecorationNone

document.getElementById("elementID ").style.textDecorationOverLine

document.getElementById("elementID ").style.textDecorationUnderline

Browsers

Internet Explorer up to version 7.0 does not support the inherit value. The line obtained with the line-through value is higher in IE7 than in other browsers; IE8 has fixed this bug.

CSS allows you to perform a variety of operations related to the decorative decoration of the entire page. Particular attention is paid to the text, which in most cases fills most of all sites. Today we will look at one interesting property: underlined, underlined and strikethrough text. All of these effects are set using a single CSS rule.

Assignment

You can underline and strikethrough text in CSS using the "text-decoration" command. The effect will depend on which value is specified. CSS was invented to separate the logical and structural parts of a web page. But before the advent of Cascading Style Sheets, HTML tags were used, which had a similar meaning. For example, an element like allows you to display strikethrough text. This tag is now deprecated and will automatically invalidate your page code. Although the element is still supported by all modern browsers and is used by some developers. But back to CSS. The "text-decoration" command can have the following values:

• underline. By assigning this value, you will get
• overline. The line will pass over a certain fragment of the page.
• line through. Creates strikethrough or strikethrough text.
• blink. The selected fragment of the document will periodically disappear and reappear.
• There are also "none" and "inherit" values. The first cancels all effects, and the second orders the property to be inherited from the parent element.

purpose

It would seem that in CSS, strikethrough text and similar effects only serve to decorate the text. In most cases, this statement is true. But sometimes it is worth thinking about the question: why were such elements created? For example, the already obsolete "strike" tag was used to indicate incorrect or old information. Readers, seeing the crossed out text, understand the hidden meaning of such a designation. Underlined words are always immediately highlighted from the general flow. Therefore, this effect should be used to highlight important information. The "blink" value, which makes the text blink, is rarely used, as it is generally considered unacceptable among programmers. After all, few of your readers like flickering symbols that will constantly distract them. Well, the "overline" value is used only to decorate the text.

Peculiarities

While all values ​​for the "text-decoration" property are part of the cascading table version specification, some values ​​are not supported by modern browsers. For example, blinking text will not be visible in IE. The Google Chrome browser does not accept some values. Mobile platforms do not fully support this property.

Conclusion

Effects such as strikethrough text and other similar meanings are used quite often on the Internet. Their use allows you to correctly express the main idea of ​​the author, helping to focus readers' attention on the right part of the text. But do not be too zealous and use the “text-decoration” property whenever possible. After all, excessive decoration of the text can harm you and your readers.