It would seem, why know HTML tags for text, if now in almost any admin panel there is a convenient visual editor that exposes them automatically?
The fact is that formatting content on a site is fundamentally different from working in office applications. It is not enough just to give the text an attractive look, because not only the display of the web page, but also its promotion in search engines depends on the correct design.
HTML Tags and Attributes: Syntax Basics
Any text has a hidden code that “explains” to the computer what and how to display on the screen. All information is recorded using a set of universal elements.
Essentially, HTML tags for text are commands that add specific blocks to a page or change their appearance. The correct recording format is as follows:
Please note that not all tags are paired. For example, <BR> (line skipping) or <HR> (adding a horizontal line) does not need to be closed at all.
Why it is impossible to copy articles from Word and other programs to the site editor
Although modern office programs use the same HTML tags for text, in 99% of cases the native code is not suitable for web pages. Even if the document is displayed normally in the application itself, formatting may fail when pasted onto the site. In addition, due to the large number of extra tags and attributes, search engines cannot adequately analyze the content of the page. Which, in turn, makes it difficult to promote your resource.
To get clean and relevant code, you first need to clear the text of the HTML tags created by a regular editor. There are several ways to do this:
- “Drive” the article through Notepad and only after that insert on the site. The application erases all the HTML, so after that you have to format the text again (using the editor tools or manually).
- Write and publish articles through LiveWriter. The popular blog editor immediately generates the correct code. And in a separate tab, you can see how the text on the site will look.
- Use HTML Cleaner. This online service does not destroy the entire code, but only the extra fragments. Using filters, you choose which tags you want to keep. There is also a powerful visual editor for formatting that adds already optimized commands to the code.
Always check the HTML before posting a new post. It should not have tags other than those that we will now consider.
Paragraphs
This element is present in almost all articles. Each paragraph should be located inside such a container - this simplifies formatting and allows you to maintain a uniform style on all pages of the site. For convenience, the <p> tag is always written from a new line.
Alignment
The separate HTML text alignment tag has long been out of use. Instead, the generic attribute ALIGN was created. To change the position of a text block on a page, you must select one of 3 values - CENTER, RIGHT or LEFT. In the same way, you can set the alignment for other elements - for example, headers.
In some situations, other HTML tags are used for alignment . Text in the center, for example, can be positioned using the <CENTER> ... </CENTER> element. Why is a separate tag convenient? Unlike an attribute, it works with any content, including photos, videos, flash, etc.
Headings and Subheadings
The subtitle 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. Search engines also analyze headings to understand what kind of requests to promote the page. That is why SEO experts recommend using thematic keys.
HTML uses six levels of subheadings - from <H1> to <H6>. There is a clear hierarchy in this system:
- <H1> ... </H1> . The main title (the name of the article, product in the online store, etc.). There can be only one <H1> in the text. As a rule, it contains the main keyword.
- <H2> ... </H2> . Subheadings of the second level break the text into semantic blocks. For example, if you are rating laptops, you can make several <H2> with the names of different models.
- <H3> ... </H3> . The third level is needed if the text between the two <H2> is also divided into small blocks. In our example, these may be evaluation criteria - "Performance", "Memory", "Video Card", etc. for each model.
- <H4>, <H5>, <H6> . In practice, they are extremely rare. But the general principle is the same - they should be “nested” in a block with a subheading of the highest level.
Watch for the correct hierarchy. Returning to our example, this means that you cannot immediately enter model names as <H3> or <H5>. And even more so, to use subheadings of different levels for homogeneous blocks of meaning (for example, select the laptop that took the last place in the rating using <H6>).
And here is a diagram that will help you instantly understand and remember the correct header structure in HTML.
Lists
Any listings and instructions are best formatted as lists using special HTML tags for text (a typical mistake is just a few paragraphs <p> that start with a hyphen or a number).
The structure of such blocks is very simple. First, determine the type of list - labeled <UL> ... </UL> or numbered <OL> ... </OL>.
All elements are between the opening and closing tags. Each item in the list starts with a new line and has the format <LI> ... </LI>. The number of elements is not limited.
Font selection : <FONT> and its attributes
What can be changed using this HTML tag? The size of the text, its font and color - without adding new classes to CSS. This is very convenient when you need to select only one sentence or fragment.
<FONT> has several attributes:
- Face Allows you to change the font of the text. You can list several options separated by commas (Tahoma, Verdana). If the user does not have the first font installed, the system simply uses an alternative.
- Size To enlarge or reduce text, use quotation marks between 1 and 7.
- Color Depending on the design, you can choose one of the standard shades (red, green, blue) or enter a code of any color to choose from.
Do not use paragraphs formatted with <FONT> instead of subheadings. It is better to set the same design parameters with the correct tag.
Ways to select text
Monotonous text tires, even with a 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 to help you do this.
<B> ... </B> . Extremely popular HTML tag. The bold text immediately catches your eye, and therefore with its help it is convenient to highlight important theses and facts.
Many confuse the <B> and <STRONG> tags. There is no visual difference, but they work differently. The first simply changes the appearance of the text, and the second acts as a "pointer" and highlights the most important fragments (thematic keywords and phrases for SEO).
<I> ... </I> . Graceful and strict italics are ideal for typing scientific terms, foreign words and various quotes. In serious editions, the names of works of art are also highlighted in oblique text.
<U> ... </U> . Perhaps not a single HTML tag caused so much controversy. Text underlining is rarely used, since this highlighting method has historically been attached to hyperlinks. If you use <U> in articles, please note that this is only suitable for short snippets - no more than 1 line.
<S> ... </S> . An interesting tag that allows you to make part of the text crossed out. Very relevant in advertising - for example, to emphasize the contrast between the old and new prices.
<BIG> ... </BIG> . The easiest way to increase the font size without any additional options.
<SMALL> ... </SMALL> . It works on the same principle as the previous tag. The text inside is reduced relative to the main one.
<SUP> ... </SUP> . The correct name for this format is superscript. This tag is mainly intended for mathematical degrees and footnotes. It reduces the font size and shifts the selected text up.
<SUB> ... </SUB> . 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, they began to create special tags for them. This simplifies formatting, because if each type of content has its own set of styles, just select a piece of text and indicate what information it contains.
<CODE> ... </CODE> . Tag for adding computer codes. Indispensable in programming articles with examples - commands are not executed, but are displayed like plain text.
<CITE> ... </CITE> . Designed for registration quotes - for example, key excerpts from the interview.
<BLOCKQUOTE> ... </BLOCKQUOTE> . Puts out part of the text in a separate block. By default, the selected fragment has a larger indent on the left, however in CSS you can also change the size, style of drawing and color of the text.
<ADDRESS> ... </ADDRESS> . An additional tag that contains information about the author, including links.
Dividing line <HR>
Using a simple line, you can mark the logical end of a large section. <HR> 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 setting the appropriate size in pixels or percent of the width of the window.
By learning how to correctly use tags to format text in HTML, you will not only make your articles easy to read, but also increase the effectiveness of SEO.