How to make a beautiful font in html: sizes, colors, html font tags. Font control tags in HTML Attributes of the font tag
It would seem, why know HTML tags for text, if now almost any admin panel has a convenient one that sets them automatically?
The fact is that formatting content on a website is fundamentally different from working in office applications. Here it is not enough to simply give the text an attractive appearance, because not only the display of a web page, but also its promotion in search engines depends on the correct design.
HTML Tags and Attributes: Basic Syntax
Any text has hidden code, which “explains” to the computer what and how to display on the screen. All information is recorded using a set of universal elements.
Essentially, HTML text tags are commands that add or change certain blocks to a page. appearance. The correct recording format looks like this:
Please note that not all tags are paired. For example,
(line skip) or
(addition horizontal line) does not need to be closed at all.
Why you can’t copy articles from Word and other programs into the website editor
Although modern office programs use the same HTML tags for text, 99% of the time native code is unusable for web pages. Even if the document is displayed normally in the application itself, when inserted onto a website, the formatting may be lost. In addition, due to the large number of unnecessary 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 HTML tags created by a regular editor. There are several ways to do this:
- “Run” the article through Notepad and only then insert it onto the site. The application erases all HTML, so after that you will have to format the text again (using the editor tools or manually).
- Write and publish articles using LiveWriter. The popular blog editor immediately generates correct code. And in separate tab You can see how the text will look on the site.
- Use HTML Cleaner. This online service does not destroy the entire code, but only unnecessary fragments. Using filters, you choose which tags you want to save. There is also a powerful visual formatting editor that adds already optimized commands to the code.
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 consistent style on all pages of the site. For convenience, the tag
Always write on a new line.
Alignment
The separate HTML "Text Alignment" tag has not been used for a long time. Instead, a generic ALIGN attribute was created. To change the position of a text block on the page, you must select one of 3 values - CENTER, RIGHT or LEFT. You can set the alignment for other elements, such as headings, in the same way.
In some situations, other tags are used for alignment, for example, you can position using the element
Headings and subheadings
The subheading system allows you to create a logical content structure. When the text is divided into meaningful blocks, it is much easier for the reader to concentrate and absorb new information. Search engines also analyze headlines to understand what queries to promote the page for. This is why SEO experts recommend using topical keywords in them.
HTML uses six levels of subheadings - from
before . There is a clear hierarchy in this system:...
. Main article, product in an online store, etc.). There can be only one in the text . As a rule, it contains the main keyword.
...
. Second-level subheadings break the text into meaningful blocks. For example, if you are rating laptops, you can do several with the names of different models.
...
. The third level is needed if the text is between two is also broken down into small blocks. In our example, these could be evaluation criteria - “Performance”, “Memory”, “Video card”, etc. for each model.
, ,
. In practice they are extremely rare. But the general principle is the same - they should be “nested” in a block with a top-level subheading.
...
. Main article, product in an online store, etc.). There can be only one in the text. As a rule, it contains the main keyword.
...
. Second-level subheadings break the text into meaningful blocks. For example, if you are rating laptops, you can do severalwith the names of different models.
...
. The third level is needed if the text is between twois also broken down into small blocks. In our example, these could be evaluation criteria - “Performance”, “Memory”, “Video card”, etc. for each model.
,
. In practice they are extremely rare. But the general principle is the same - they should be “nested” in a block with a top-level subheading.,
Make sure to maintain the correct hierarchy. Returning to our example, this means that you cannot immediately enter the model names as
or . And even more so, use subheadings of different levels for blocks of homogeneous meaning (for example, highlight a laptop that took last place in the ranking using ).
).
Here is a diagram that will help you instantly understand and remember the correct structure of headings in HTML.
Lists
It is better to format any listings and instructions in the form of lists, using special HTML tags for text ( typical mistake- just a few paragraphs
Which begin with a hyphen or number).
The structure of such blocks is very simple. First, we determine the type of list - bulleted or numbered.
All elements are between the opening and closing tags. Each list item starts on a new line and has the format . The number of elements is not limited.
Choice and its attributes
What can be changed using this font and color - and without adding new classes to CSS. This is very convenient when you need to highlight 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 an alternative.
- Size. To make text larger or smaller, enter a value between 1 and 7 in quotation marks.
- Color. Depending on the design, you can choose one of the standard shades (red, green, blue) or enter a code for any color of your choice.
Do not use paragraphs formatted with , instead of subheadings. It is better to set the same design parameters with the correct tag.
Ways to highlight text
Monotonous text is tiring, even broken down into paragraphs. To attract attention and stir up the reader’s interest, it is recommended to highlight key points graphically. Here are some commands that will help you cope with this task.
... . An extremely popular HTML tag. Thumbnail immediately catches the eye, and therefore with its help it is convenient to highlight important theses and facts.
Many people confuse tags And . There is no visual difference, but they work differently. The first one simply changes the appearance of the text, while the second one acts as an “index” and highlights the most important fragments (topic keywords and phrases for SEO).
... . Elegant and strict italics are ideal for the design of scientific terms, foreign words and a variety of quotations. In serious publications, the names of works of art are also highlighted in italic text.
... . Perhaps no other HTML tag has caused so much controversy. Underlining text is rarely used because this method Highlights have historically been assigned to hyperlinks. If you use in articles, please note that this is only suitable for short fragments - no more than 1 line.
...
. An interesting tag that allows you to make a part. Very relevant in advertising - for example, to emphasize the contrast between the old and new prices.
... . The easiest way to increase the font size without any additional options.
... . It works on the same principle as the previous tag. The text located inside is reduced relative to the main one.
... . The correct name for this format is superscript. This tag is mainly intended for mathematical degrees and footnotes. It reduces the font size and moves the selected text up.
... . Subscripts are often found in various formulas. The selected fragment is located below the main text.
Meaningful containers
Since some blocks were found in many texts, special tags began to be created for them. This simplifies formatting, because if each type of content has its own set of styles, you just need to highlight a piece of text and indicate what information it contains.
...
. Tag for adding computer codes. Indispensable in articles on programming with examples - commands are not executed, but displayed as plain text.
... . Designed for formatting quotes - for example, key excerpts from an interview.
. Places part of the text into a separate block. By default, the selection has more left padding, but you can also change the size, style, and color of the text in CSS.
... . An additional tag that contains information about the author, including links.
Demarcation line
A simple line can be used to mark the logical end of a large section.
does not apply to paired tags. This means that the closing format elementnot needed.
Using the WIDTH attribute, you can make the separator shorter by specifying a suitable size in pixels or a percentage of the window width.
By learning how to properly use tags to format text in HTML, you will not only make your articles easier to read, but also increase your SEO effectiveness.
Tag is a container for changing font characteristics such as size, color and typeface. Although this tag is still supported by all browsers, it is considered obsolete and its use is recommended to be abandoned in favor of styles.
Syntax
TextOptions
Description of tag parameters
COLOR parameter
Sets the color of the text inside the container .
Syntax
...Analogue of CSS -color
FACE parameter
The face parameter is used to specify the font type used for text. You can list several font names, separated by commas. In this case, if the first specified font is not found, the browser will use the next one in the list.
Syntax
...Arguments are any number of font names separated by commas. Universal font families:
- serif— serif fonts (antique), such as Times;
- sans-serif— sans-serif fonts (fonts without serifs or sans serifs), a typical representative is Arial;
- cursive— italic fonts;
- fantasy— decorative fonts;
- monospace- monospace fonts, the width of each character in this family is the same.
CSS analogue - font-family
SIZE parameter
Sets the font size in arbitrary units from 1 to 7. The average size used by default is 3. The font size can be specified either as an absolute value (for example, size="4"), or as a relative value (for example, size="+1" size="-1"). In the latter case, the size changes relative to the base one. The font size is affected not only by the specified size parameter, but also by the choice of font typeface. So, Arial font looks larger than Times font, and the Verdana font is slightly larger than the Arial font. Take this feature into account when choosing a font and its size.
Syntax
...The argument is an integer from 1 to 7 or an increase or decrease in value using the + and - symbols.
Today we will continue to consider various tags, namely Font, Blockquote, Pre, Strong, Em, B, I and others, which allow text formatting.
Blockquote and Pre - HTML formatting
Previously (even before the advent of CSS) the quote tag Blockquote V HTML code was used quite often because the piece of text enclosed in it received a horizontal indentation, which was not so easy to do at that time due to the impossibility of using CSS properties. The Blockquote element is paired and can contain both inline and block tags (for example, P paragraphs).
Example
Example enclosed in Blockquote
Nowadays the Blockquote tag is still used when formatting text, but the appearance of quotes in our time is usually set with using CSS properties specified specifically for it in the file with style sheets of your design template. For example, in the case of my blog, in style.css you can find the following lines:
#content blockquote(margin:15px 0 20px 0;padding:5px 8px 5px 35px;background:#eaedf0 url(images/quote2.png) no-repeat left top;background-position:8px 5px;color:#666;font- size:14px;width:91%;font-style:italic;) #content blockquote p(color:#666;font-size:14px;)
Well, you can see how the quotes included in Blockquote will look in the text of the article with an interview with the manager.
In addition to the quote in Html earlier (before the advent of CSS), another formatting tag was quite widely used - Center. It is paired (a kind of container) and block. It can contain any text elements (both line and block), which as a result of this action will be aligned to the center.
So, now let's look at the tag Pre, which allows you to transfer text formatting specified directly to source code. Remember I said that all consecutive in (space, tab and line break) will be replaced by a single space when parsing the code in the browser.
So, the element Pre disables shortening whitespace characters in the section of text that will be enclosed in it. What is noteworthy is that for a fragment enclosed in Pre, the browser will not automatically break lines using whitespace characters.
Those. all lines inside the Pre element will be considered continuous by the browser - as you wrote in the code, this is how it will be displayed in the browser. Moreover, in the browser, to display a section of text formatted using the Pre tag, a monospaced font, such as Courier New or similar, will be used.
Formatting in the source code tag Pre tags are outdated
The Pre tag itself is block-level, and inside it (this tag is paired) only inline content can be contained (i.e., paragraphs P, headings H1 - H6, etc. should not be placed inside it).
Html has another block tag that is designed for text formatting - Address. According to validator standards, only inline content can be located inside this tag, which will be displayed in italics in the browser.
Font - working with text color and font in pure Html
Strong, Em - tags for logical and visual highlighting in the text
If CSS did not exist now, then I would have to describe the purpose of certain logical and physical (visual) text formatting tags. But, because CSS is now already used on the vast majority of sites, the role of such tags in Html code has already been practically reduced to zero, so I will just quickly go through them and explain why they were used before (and some are still used now).
Visual tags are designed to change the style of text that will be visible to visitors to your site, but which search engines should not pay any special attention to.
Logical text formatting tags, in theory, are oriented to indicate any accents for search engines. For the user, highlighting with these elements will also change the appearance of the highlighted words.
If you remember, not so long ago, optimizers were advised to highlight significant places with keywords (as they should be highlighted) with Strong and EM logical formatting tags, which to the user will look like regular bold and italics.
But for selections without keywords advised to use HTML elements“B” and “I”, which again would look like bold and italics for users, but were not taken into account by search engines, because they are not logical formatting tags.
Now all this practically no longer works as intended, and we do the selection of keywords using Strong and EM more out of habit, rather than really hoping for certain dividends for this from search engines.
So, in addition to the already mentioned “B” and “I” (in bold and italics) to the category visual formatting These include Font, Pre, already discussed at the beginning of the article, as well as tags:
- "U" - underlining
- "Strike" - crossing out
- "Sup" - superscript
- "Sub" - subscript
- "Tt" - monospace font
- “Big” - increase the font
- “Small” - reduce the font
Well, now let's look at the list of elements logical formatting text:
- “Em” - logical highlighting of important fragments in italics
- “Strong” is the same, but it will only stand out in bold
- "Cite" - italicize quotes
- “Code” - designed to display various codes with a monospaced font
- “Samp” - to highlight several characters with a monospace font
- “Abbr” - the Title attribute of this tag contains the decoding of an abbreviation (such as CSS or Html, which are read by letters, and not as a single word). The words written in the Title will pop up when you move the mouse cursor over this abbreviation.
- “Acronym” is the same thing, but is used for acronyms, i.e. abbreviations that are read not by letters, but as a word (for example, MKAD or Gai)
- “Kbd” - used to display text entered by the site user from the keyboard in a monospace font
- "Var" - used to italicize variables in some code
- “Del” - highlighting with a strikethrough when you want to show that some fragment was deleted after publishing the Html document
- “Ins” - underlining when you need to show that some piece was inserted after the publication of the Html document
I repeat once again that these formatting tags for the most part are very rarely found when writing code now, but still it is not superfluous to know their purpose.
Good luck to you! See you soon on the pages of the blog site
You might be interested
Whitespace characters and their formatting of code in Html, as well as special characters non-breaking space and other mnemonics 
How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex output and other programs Select, Option, Textarea, Label, Fieldset, Legend - Html tags for the form of drop-down lists and text fields 
Lists in Html code - UL, OL, LI and DL tags 
How to create a hyperlink (A, Href, Target blank), how to open it in a new window on the site, and also make a picture a link in Html code 
Tables in Html - Table, Tr and Td tags, as well as Colspan, Cellpadding, Cellspacing and Rowspan for creating them 
Tags and attributes of headings H1-H6, horizontal line Hr, line break Br and paragraph P according to the Html 4.01 standard 
What is hypertext language HTML markup and how to view a list of all tags in the W3C validator 
Img - Html tag for inserting a picture (Src), aligning and wrapping text around it (align), as well as setting the background (background) 
Comment directives and Doctype in Html code, as well as the concept of block and inline elements (tags)
| Browser | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Version | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Supported | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
Description
Tag is a container for changing font characteristics such as size, color and typeface. Although this tag is still supported by all browsers, it is considered obsolete and its use is recommended to be abandoned in favor of styles.
Syntax
Text
Closing tag
Required.
Options
color Sets the text color. face Specifies the font typeface. size Sets the font size in conventional units.Example 1: Using a tag
P The first letter of this sentence is written in Arial font, highlighted in red and enlarged.
Description of tag parameters
COLOR parameter
Description
Sets the color of the text inside the container .
Syntax
...
Arguments
The color value can be set in two ways.
1. By its name
Browsers support some colors by their name.
2. By hexadecimal value
Hexadecimal numbers are used to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name suggests, on the number 16. The numbers will be as follows: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced with Latin letters. Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal corresponds to the number FF in hexadecimal. To avoid confusion in determining the number system, a hash symbol # is placed before the hexadecimal number, for example #666999. Each of the three colors - red, green and blue - can take values from 00 to FF. Thus, the color symbol is divided into three components #rrggbb, where the first two symbols indicate the red component of the color, the middle two - green, and the last two - blue.
Similar to CSS
Default value
The browser's default color.
FACE parameter
Description
The face parameter is used to specify the font typeface used for text. You can list several font names, separated by commas. In this case, if the first specified font is not found, the browser will use the next one in the list.
Syntax
...
Arguments
Any number of font names separated by commas. Universal font families:
serif - serif fonts (antique), such as Times;
sans-serif - sans-serif fonts (fonts without serifs or sans serifs), a typical representative is Arial;
cursive - cursive fonts;
fantasy - decorative fonts;
monospace - monospace fonts, the width of each character in this family is the same.
Similar to CSS
Default value
The default font in the browser.
SIZE parameter
Description
Specifies the font size in arbitrary units from 1 to 7. The average size used by default is 3. The font size can be specified either as an absolute value (for example, size="4" ) or as a relative value (for example, size="+1" , size="-1" ).
Syntax
...
Arguments
In the latter case, the size changes relative to the base one. The font size is affected not only by the specified size parameter, but also by the choice of font typeface. Thus, the Arial font looks larger than the Times font, and the Verdana font is slightly larger than the Arial font. Take this feature into account when choosing a font and its size.
Tag is a container for changing font characteristics such as size, color and typeface. Although this tag is still supported by all browsers, it is considered obsolete and its use is recommended to be abandoned in favor of styles.
Syntax
Text
Closing tag
Required.
Options
An integer from 1 to 7, or changing the value up or down using the + and - symbols.Example 1: Using a tag
P color Sets the text color.
Description of tag parameters
COLOR parameter
Description
Sets the color of the text inside the container .
Syntax
...
Arguments
The color value can be set in two ways.
1. By its name
Browsers support some colors by their name.
2. By hexadecimal value
Hexadecimal numbers are used to specify colors. The hexadecimal system, unlike the decimal system, is based, as its name suggests, on the number 16. The numbers will be as follows: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Numbers from 10 to 15 are replaced by Latin letters. Numbers greater than 15 in the hexadecimal system are formed by combining two numbers into one. For example, the number 255 in decimal corresponds to the number FF in hexadecimal. To avoid confusion in determining the number system, a hash symbol # is placed before the hexadecimal number, for example #666999. Each of the three colors - red, green and blue - can take values from 00 to FF. Thus, the color symbol is divided into three components #rrggbb, where the first two symbols indicate the red component of the color, the middle two - green, and the last two - blue.
Similar to CSS
Default value
The browser's default color.
FACE parameter
Description
The face parameter is used to specify the font typeface used for text. You can list several font names, separated by commas. In this case, if the first specified font is not found, the browser will use the next one in the list.
Syntax
...
Arguments
Any number of font names separated by commas. Universal font families:
serif - serif fonts (antique), such as Times;
sans-serif - sans-serif fonts (fonts without serifs or sans serifs), a typical representative is Arial;
cursive - italic fonts;
fantasy - decorative fonts;
monospace - monospace fonts, the width of each character in this family is the same.
Similar to CSS
Default value
The default font in the browser.
SIZE parameter
Description
Specifies the font size in arbitrary units from 1 to 7. The average size used by default is 3. The font size can be specified either as an absolute value (for example, size="4" ) or as a relative value (for example, size="+1" , size="-1" ).
