Headings and Subheadings

The subheading system allows you to create a logical content structure. When the text is divided into semantic blocks, the reader is much easier to concentrate and learn new information. The search engines also analyze the headers to understand what requests to promote the page. That's why SEO experts recommend using thematic keys.

In HTML, six levels of subheadings are used - from

to

. In this system there is a clear hierarchy:

• ... . The main title (the title of the article, the goods in the online store, etc.). There can only be one

  in the text. As a rule, it contains the main key.

• ... . Subheadings of the second level break the text into semantic blocks. For example, if you are rating notebooks, you can make several

  with the names of different models.

• ... . The third level is needed if the text between two

  is also divided into small blocks. In our example, these can be the evaluation criteria - "Performance", "Memory", "Video card", etc. for each model.

• ,

  ,

  . In practice, they are extremely rare. But the general principle is the same - they must be "nested" in the block with a subheading of the highest level.

Keep track of the correct hierarchy. Returning to our example, this means that you can not immediately enter model names as

or

. And even more so to use sub-headings of different levels for homogeneous blocks of meaning (for example, to allocate a laptop, which took the last place in the rating, with the help of

).

And here is a scheme that will help you instantly understand and remember the correct structure of headers in HTML.

Lists

Any enumerations and instructions are better formatted as lists using special HTML tags for text (a typical mistake is just a few paragraphs of

that begin with a hyphen or a digit).

The structure of such blocks is very simple. First, we define the type of the list - labeled

... or numbered
... .

All elements are between the opening and closing tags. Each item in the list starts with a new line and has the format

1. ... . The number of elements is not limited.

   Font selection: and its attributes

   What can I change using this HTML tag? The size of the text, its font and color - and without adding new classes in CSS. This is very convenient when you need to select only one sentence or fragment.

   has several attributes:

   • Face . Allows you to change the text font. You can list several options separated by commas (Tahoma, Verdana). If the user does not have the first font installed, the system simply uses the alternative.
   • Size . To increase or decrease the text, specify in quotes a value from 1 to 7.
   • Color . Depending on the design, you can choose one of the standard shades (red, green, blue) or enter any color code to choose from.

   Do not use paragraphs formatted with instead of sub-headings. It is better to set the same settings for the correct tag.

   Ways to select text

   The monotonous text tires, even with breakdown by paragraphs. To attract attention and warm the reader's interest, it is recommended to highlight key points graphically. Here are a few commands that will help to cope with this task.

   ... . Extremely popular HTML tag. Bold text immediately strikes the eye, and therefore with his help it is convenient to highlight important theses and facts.

   Many confuse the and tags. Visually there is no difference, but they work in different ways. The first simply changes the appearance of the text, and the second performs the function of the "pointer" and highlights the most important fragments (thematic keywords and phrases for SEO).

   ... . Elegant and strict italics is ideal for the design of scientific terms, foreign words and a variety of quotes. In serious editions, the title of works of art is also distinguished by an oblique text.

   ... . Perhaps, so many disputes did not cause any HTML-tag. The underline of the text is rarely used, since this method of allocation has historically been assigned to hyperlinks. If you use in articles, note that this is only suitable for short fragments - no more than 1 line.

   ... . An interesting tag that allows you to make part of the text void. Very relevant in advertising - for example, to emphasize the contrast between old and new prices.

   ... . The easiest way to increase the font size without any additional parameters.

   ... . Works on the same principle as the previous tag. The text inside is reduced relative to the main text.

   ^... . The correct name for this format is the superscript. Basically, this tag is designed for mathematical degrees and footnotes. It reduces the font size and shifts the selected text up.

   _... . The subscript is often found in various formulas. The selected fragment is located below the main text.

   Semantic containers

   Since some blocks were found in many texts, special tags have been created for them. This simplifies the formatting, because if each type of content has its own set of styles, it is enough to select a fragment of the text and indicate what information it contains.

   ... . A tag for adding computer codes. It is irreplaceable in the programming articles with examples - the commands are not executed, but are displayed as plain text.

   ... . It is intended for the formulation of quotations - for example, key excerpts from the interview.

   ... . It takes a part of the text in a separate block. By default, the selection has a larger margin on the left, but in CSS you can also change the size, style, and color of the text.

   ... . Additional tag, which contains information about the author, including links.

   The separation line

   ---

   Using a simple bar, you can designate the logical ending of a large section.

   ---

   does not apply to paired tags. This means that the closing element of the format is not needed.

   Using the WIDTH attribute, you can make the separator shorter by specifying a suitable size in pixels or percent of the width of the window.

   By learning how to use tags correctly to format text in HTML, you not only make your articles easy to read, but also increase the effectiveness of SEO.