Not only people are greeted by clothes. Assessing the appearance of the text, we we make a decision pretty quickly - read or not read. And, if you continue to draw an analogy with a known expression, text content is much less likely to hook the user if it looks boring than a person who has the ability to flash personal qualities. Formatting comes to the aid of the content.


Get a free consultation from an expert on your project

What is text formatting and why it is necessary

Formatting is the design of the appearance of the text. on the site and giving its elements a certain format using special HTML tags. 

A solid stream of letters and lines in which there is no breakdown into paragraphs, no lists, no headings and subheadings are highlighted, the main thoughts are not marked in any way, most likely it will not cause users to get acquainted. In addition, search engines when ranking sites take into account both the relevance of the text and its structured design. 

It turns out, HTML tag formatting affects:

Therefore, when creating content, focus not only on content, but also his design. To do this, consider the most popular HTML tags.

HTML text formatting tags: 6 basic content elements

Each HTML element of the page has its own semantic load. Most of them consist of 3 -x parts:

  • Opening tag - < name >,
  • Element Content - text or other tags,
  • Closing tag - < / name >.

структура html элемента пример

But there are single (empty) elements, that contain only the opening tag.

HTML tags are inserted into the web page code manually or through the use of an HTML editor.

1. Headings

< h1 > ... < / h1 >, < h2 > ... < / h2 > etc.

Working with headlines not only helps to make content more attractive and convenient for study, but also highlight the main points, as well as more efficient use of key messages.

Headings vary in levels. Accepted to allocate 6 header and subheading levels. Their value is set by H1 tags (heading 1 -th level) and H2, H3 ..., H6 (headings 2 -th, 3 th, etc. levels). The level serial number indicates the "seniority" of the title. The same value sets the peculiarity of its design - the font size and indentation.

заголовки в html коде страницы пример

2. Text markup

< b > ... < / b >, < strong > ... < / strong >

These HTML text formatting tags are used to highlight the phrase in bold. Despite getting the same result at the output, they have different meanings for search bots. 

< b > serves only for the visual designation of the phrase and aims to affect exclusively the user.

< strong > not only visually highlights the text, it is used to inform search bots about the emphasized importance of the phrase.

strong жирное выделение текста пример

< em > ... < / em > and < i > ... < / i >

HTML tags for writing in italics. < i > only externally highlights the phrase, < em > tells the bots that the phrase is of particular importance.

em выделение курсивом пример

<small > ... < /small >

It is used if you need to reduce the font size relative to the main one. You can use it to highlight third-party information (e.g., quotes or tables).

small маленький текст картинка

< sub > ... < / sub >

This kind of HTML team translates the text into a lower index, that is, reduces its size and has a lower line level. Used, for example, in formulas.

sub для нижнего индекса текста

< sup > ... < / sup >

Another “formal” HTML tag. With it, you can display the degree, that is, the text is reduced and moved to the top of the line.

sup для верхнего индекса текста

< s > ... < / s >

If you need to cross out the phrase - the often used technique - this tag will help.

тег s для зачеркивания текста

< u > ... < / u >

Using this HTML tag, you can highlight the phrase by emphasizing.

тег u для подчеркивания текста

Get a free consultation from an SEO expert on your site

3. Abzacs and text transfer

< p > ... < / p >

A tag that breaks the solid text into paragraphs. Inside is a whole paragraph. Outwardly, this department is carried out not only by moving the line, but also by adding additional inter-line intervals - at the top and bottom of the paragraph.

как оформить в html абзацы

< br >

An example of a single HTML tag that is used to break a line. Unlike the previous “collegium”, it does not add inter-line intervals.

как в html перенести строку

4. Links

< a href > ... < / a >

It is this tag that turns the set of letters into a clickable link, which is displayed as color-separated text.

пример ссылки в коде страницы

5. Lists

Thanks to this group of HTML tags for formatting text, you can design various types of lists. This element revitalizes the content, makes it more convenient for perception and further work with it.

The group consists of tags:

  • < li > ... < / li > - defines individual elements of the list, that is, its items;
  • < ul > ... < /ul > - labeled list;

    теги для маркированных списков
  • < ol > ... < / o > - numbered list.

    теги для нумерованных списков

6. Image

< img > 

Also a single HTML tag that is used to add images to a page. Using the src attribute, the address of the required file is specified.

img для вставки изображения


We listed only part of the HTML tags that help make the look of the text attractive and interesting. But even with their help you can convert the content and increase the user's desire to familiarize themselves with it.

Using HTML tags for text is not incomprehensible. The main thing is to know the commands and be able to correctly enter them into the content when posted on the site.

P.S. If you want to learn how to create high-quality content that both site visitors and search engines will like, join to the course "SEO copywriter from A to Z". And with the "Text-11" promotional code you will be expected a pleasant bonus to buy.