In addition, displays the text in the browser with all spaces between words ( By default, browsers treat multiple consecutive spaces as one).

The rest of the HTML tags that display text in a monospace font are logical text formatting tags.  Their other purpose is that they provide all sorts of information, for search engines and other programs, about the text contained in them:
Tag - displays text, which is a program code;

Tag - indicates the text that is typed on the keyboard or for the name of the keys;
Tag - designed to display text, which is the result of a program or script.

Program code: FOR i=1 TO 20 


Key names: Alt+F1 


Script result: Hello PHP! 


All spaces between words: 
One Two Three - Try it yourself!
 



Program code: FOR i=1 TO 20
Key names: Alt+F1
Script output: Hello, PHP!
All spaces between words:
One Two Three - Try it yourself!
Quotes in HTML.  Underline and strike through text
Tag is for underlining text, and the tag to cross it out.  These are physical text formatting tags, and, apart from visual design, they do not carry any semantic load.

In what cases you will use these tags - you decide!

 underlined And crossed out text - Everything!


underlined and crossed out text - Everything!
Formatting quotes
Perhaps, in the process of creating a site, you will need to insert a quote on the page.
A quotation is a verbatim excerpt of text from a work.  It is desirable that the quoted text be identified by the reader as inserted.  To do this, the quotation must be highlighted / formatted accordingly.
There is a special tag in HTML for this purpose - 
.  The text enclosed in this tag is formatted as follows: gaps are formed above and below the body text, and indents are formed to the left and right ( about 40 pixels).


As G. Lamene said: 
Science only serves to give us an idea of ​​the extent of our ignorance.



As G. Lamene said:
Science only serves to give us an idea of ​​the extent of our ignorance.
Multiple boolean tags
We have not touched on 3 more tags related to the logical formatting group: these are the tags 
, And 
.
tags And similar.  The first of them is intended to designate an abbreviation, the second - an acronym.
An acronym is the same abbreviation, only it is pronounced as a single word, and not letter by letter.
Both abbreviations are underlined with a dotted line when viewed in a browser, and it is desirable to add a tooltip to both - decoding the abbreviation ( using the title attribute).
Tag used to enclose text in quotation marks.  This tag can be used when making quotes or when using words and expressions that have a figurative meaning.

 
 HTML- this is an abbreviation - it is pronounced letter by letter.


 "Research Institute"> research institutes is an acronym.  An acronym is used as an independent word.
 
Gemini look alike The same
. 


HTML is an acronym - pronounced letter by letter.
 
NII is an acronym.  An acronym is used as an independent word.
 
Gemini are like two peas in a pod.

How to change the font?
When creating a site, it constantly becomes necessary to change the text font for a variety of parts and elements of HTML pages, because this not only adds uniqueness and style to the site, but also improves the quality of information perception.  In HTML, there are special tags for this, we will talk about them in this lesson, which will be one of the largest in this tutorial.  But, as I told you earlier, do not try to memorize everything, it is not necessary, the main thing is to understand and understand what is being discussed at each stage of the lesson.
Change font styles
You can change font styles in HTML in more than one way, and you will soon see this.  Now let's look at some new tags:

... And 
...- highlight text bold font.

... And 
...- highlight text in italics.

...- displays the text in superscript, for example E = mc 2 .

...- displays text in subscript, for example H 2 SO 4 .
All these tags are inline (inline, line level), that is, they do not create line breaks before and after themselves, but are located on one line.  They can also contain only built-in elements, so they can be freely nested inside each other.  Most importantly, do not forget about the correct nesting: a tag opened earlier must be closed later.
I think you noticed that there are two tags for bolding and italicizing.  The fact is that ordinary browsers display the contents of these tags in the same way, but non-visual (voice) browsers can emphasize the text inside in a special way. And .  Therefore, if you want to highlight some words or phrases to attract the reader, then it is better to use these tags, although, by and large, there is no difference.

You ask: "But are the above tags really all that can be used to highlight text in HTML"?  Well, of course not!  There are more tags And , underlining the text as well as the tag A that displays strikethrough text.  But, you see, these tags are deprecated in HTML and, like the align attribute, browsers may soon stop understanding them.  Therefore, I will show you another method that you can use without fear.  And it consists in applying the style attribute, and it is permissible to specify it inside any tags.  The general syntax is the following:

<тег style="text-decoration:underline" >...
- underlines the text.
<тег style="text-decoration:overline" >...
- underlines the text.
<тег style= "text-decoration:line-through">...
- strikes out text.
An example of changing font styles

 






Bold font. Italics.
Bold italic.
H 2 SO 4- formula of sulfuric acid written in italics.
An underlined paragraph of text.
regular text, strikethrough bold.



Result in browser
Now I would like to make one clarification about the style attribute.  Style is a completely normal tag attribute, but it belongs to Cascading Style Sheets (CSS).  In the distant past, all functions for structuring an HTML page as a whole and for the external presentation of its each element separately (color, shape, position on the page, etc.) were taken over by the HTML language.  But then the language designers decided to separate these features and created CSS.  Accordingly, many tags or tag attributes have been deprecated.  Therefore, in order not to fill your head with unnecessary information, in this tutorial I also replaced them with styles, that is, the style attribute.  Its general syntax is as follows:
<тег style= "css property:value">...

Using style you won't lose anything at all, but you will learn how to write competent HTML, and as a bonus, you will also master CSS a little.
Tag or what to do when there are no necessary tags
Well, as long as everything is clear?  Okay, question then.  And what will you do if, for example, you need to cross out not the entire paragraph, but only half of the text, and not make it either bold or italic?  Well, don’t worry, here one very convenient and necessary tag will help you.
So, get acquainted - ... .  This tag is also inline (inline, line level) and may contain any built-in tags, but this is not the main thing.  On my own , with no attributes, does not add any changes to either the text or the tags within it.  And it was created specifically for styles, that is, in fact, for the style attribute.  It is thanks to this attribute, or rather to its different values, that certain properties appear.  So, now let's look at an example.
SPAN tag example

 






Plain text unchanged.
More plain text. Underlined.
 Strikethrough.


Result in browser
Plain text unchanged.
More plain text.  Underlined.  Strikethrough.
Change the name (typeface) of the font
Don't know what a font name is?  Surely many of you at least once typed text in Microsoft Word or OpenOffice Writer and saw this menu:
These are the names of the fonts that are available on your computer and are used not only by Word or Writer, but also by many other applications, including browsers.  The name (typeface) of a font defines its drawing itself, which distinguishes one font from another.
I strongly do not recommend you to use any exotic fonts, since they may not be on the computer of a person who visits your site and then instead of letters he will see various incomprehensible symbols or squares.  Here is a list of the most common fonts that are almost certain to be on every user's computer:
By default, almost all browsers use the "Times New Roman" font, and to change it, the same style attribute is used, which can be applied inside any tag.  The general syntax for specifying is as follows:
<тег style= "font-family:font-name, family">...

If the font name consists of several words, then it must be enclosed in single quotes.  It is allowed to specify not one, but several font names separated by commas, and then, if the first font is not available on the computer, the second, third, etc. will be used.  But at the end, be sure to put the name of the entire font family, in this case, if the browser does not detect a single font, it will apply the font that is most suitable for this family.
To change the font on the entire page - just specify the style attribute in the tag .  And if you need to change the font for a separate part of the text, then enclose it in a tag and apply an attribute to it.
An example of changing the name of fonts

 






 
This font is Arial, if not, then Verdana, and if not, then any other sans-serif.
 
This is Comic Sans MS or any cursive.
 
This is again Arial, Verdana or any sans-serif. And this is Courier or any monospace.


Result in browser
Well, have you figured out the example?  I will make one explanation, the understanding of which will greatly facilitate your life in the future, although I think many have already guessed it.  So, if tags are nested inside each other and several of them make changes of the same type(for example, they change the name of the font), then the descendant tags override the properties of the ancestor tags.  If nested tags make different changes, then they complement each other, that's all.
Changing the font size
The HTML language is limited to only seven font sizes, which, you see, is very small for a good site.  Therefore, everyone has been using CSS for resizing for a long time, and now you will learn this too.
There are about ten units of measurement in CSS, but we will only consider the three most popular ones - these are points (pt), pixels (px) and percentages (%).  So:
pt- Points.  One point is 1/72 of an inch and one inch is 2.54cm.  Therefore, 1pt = 0.03527778cm.  This is an absolute value, since the size specified in points does not depend on anything.
px- Pixels.  Measured in pixels on a computer monitor.  A pixel is the smallest dot on a monitor and is relative because its size depends on the current screen resolution and the size of the monitor itself.
%
- Interest.  It is calculated as a percentage, where 100% is taken from the value of the parent tag, and if it is not specified, then the default value in the browser.  This is also a relative value, because the font size of the parent can be completely different, and users can freely change the font size in the browser.
The style attribute is used to specify the font size and can be specified inside any tag.  The general syntax is:
<тег style="font-size:size">...

As in the case of font names, to change the font size on the entire page - just specify the style attribute in the tag .  And if you need to change the font for a piece of text, then enclose it in a tag and apply an attribute to it.
An example of changing the font size

 






 
This font size is 90% of the default browser size.
 
This size is 90% narrower than the size in the BODY tag.
 
The title font size is 120% of the BODY size.
 
This is again 90% of the default browser size. This font size is 15 points.


Result in browser
This font size is 90% of the default browser size.
This size is already 90% of the BODY size.
The title font size is 120% of the BODY size.
This is again 90% of the default browser size. This font size is 15 points.
The font size depends not only on its explicit indication, but also on its name (typeface) - different fonts can have completely different height and width of letters, as well as letter spacing.
A little more about the style attribute
It's time to reveal to you another secret of this wonderful attribute, but again, first I'll ask you a question.  What would you do if you had to set the font name of the entire paragraph to Arial with a size of 80%?  And I'll tell you, you would write something like this:

 

 Paragraph text.

 

 
 Paragraph text.
Or in general like this.

 
Paragraph text.
I'm right?  Well, if the first two options are basically correct, then the last one is generally wrong, because, if you remember, there cannot be two identical attributes in one tag.  And now it's time to remember that style is not just an attribute, but an attribute related to CSS.  Look at this:

 
Paragraph text.
Much easier, right?  The most important thing is not to forget to put a semicolon (;) between adjacent styles and take all this “household” in double quotes (“ “), otherwise only the first style will be applied, and the browser will ignore the rest.  Well, we always put down double quotes with you, right?
So, this lesson turned out to be very busy, so do your homework and relax a bit.
Homework.
Create a heading for the article and two of its sections, but also underline the section headings.
Make it so that when you hover the mouse over the title of the article, the corresponding inscription appears.
Write one paragraph at the beginning of the article and two in each section.
Set the whole page font to Arial at 90% of the default browser size.
Set the font for all headings to Times and have the title of the article at 150% font size and the subheadings at 120%.
In the first paragraph, put two words in bold and one in italics.  In the second - a phrase of several words in bold italics.  In the third - underline the phrase in italics.  In the fourth - cross out half of the phrase in bold.
Write the formula of alcohol in the last paragraph: C 2 H 5 OH.

Greetings to all readers of this article and subscribers of my blog!  I want to devote today's publication to a topic without knowledge of which your Internet resources will not be readable and attractive: "How to set a font in html."  The theme itself is easy and I'm sure you'll get the hang of it quickly.
However, we should not forget that web languages ​​are rich in all sorts of font design tools, which ideally you need to know.  After reading the article, you will confidently master text formatting, learn how to set different styles, types of font weights and decorations, as well as change the size and color of both sentences and individual letters.  Let's get started!
Fonts are different
The bulk of signs, press and literature, websites and other services use standard fonts.  Although they are comfortable, they have long been bored and do not catch the eye.  That is why many designers slightly change the look of the design or even create new styles.  The most famous and influential fonts are:
Helvetica;
Futura;
Garamond;
Bodoni;
Bembo;
Rockwell;
Times New Roman.

Their main differences are in relation to certain families.  There are serif, serif, decorative, italic, and monospaced families.

I also want to emphasize that there are 5 units of font sizes.
Let's start with the html language and its "creativity"


 
 
 
 
 
Name first header
 
P subtitle with a red letter!
Here is located first paragraph current example.  For clarity these words will be written in italics.
 


Recall that the attribute align="center" sets text to be displayed in the center.

And now it's css time to show off your skills
Despite the whole set of various tags provided by html, css is a more convenient and flexible tool for styling the appearance of fonts. 

The main properties used to format content are font and its components: text-decoration.

First, let's analyze font.  This is a universal parameter, thanks to which several values ​​can be set at the same time.  In addition, each parameter operates with its own keywords.
Property name


Keywords


font-family

Can be installed as standard font families: 
without serifs (sans-serif);
antique (serif);
decorative (fantasy);
Italic (cursive);
monospace (monospace),
So are standard existing styles (Arial, Calibri, etc.).
font-size

To set the absolute dimension of symbols, the following notations are used: xx-small, x-small, small, medium, large, x-large, xx-large.  You can also set a unique value.
font-weight

Responsible for the saturation of the text style.  Varies within a range or specified using the words normal, bold, lighter, or bolder.
font-variant

Specifies the representation of letters using the keywords: small-caps, normal, or inherit.
font-style

Sets the usual (normal), oblique (oblique), italic (italic) style or inherits the parent (inherit).
font-stretch

Specifies the density of letters.  You can specify the following values: ultra-condensed, ultra-expanded, extra-condensed, extra-expanded, semi-condensed, semi-expanded, normal, expanded, condensed, and inherit.
Property text-decoration helps to decorate text with additional elements such as underlining ( underline), strikethrough ( line through), overline ( overline), as well as inherit the parent's parameters ( inherit) or cancel all clearance ( none).
And now it's time for the second example.  I took the previous code and styled it with css.  So, the title was styled with a shadow (using the property text-shadow) and with a contour around ( border-color).  At the same time, I made one word larger.  I also wanted to use the parameter opacity to set the transparency of the subtitle.


 
 
 
 
 
 
Name first header
 
Translucent subtitle!
Here is located first paragraph current example.  For clarity these words will be written in italics.
 

The font color on the site can be set using HTML code.  There is a tag for this. font.  By definition, the tag font serves as a kind of "wrapper" or "container" for text, by controlling the properties of which you can change the design of the text.
Tag font applied as follows:

 
Website builder "Nubex"
The easiest way to change the font color in HTML is to use the attribute color tag font:
Website builder "Nubex"
This sets the blue color for the word framed by the tag font.
But in addition to the color parameter, the tag has other attributes.
FONT tag attributes
Tag font has only three attributes:
color- sets the color of the text;
size- sets the text size;
face- sets the font family.
Parameter color can be specified by a color name (eg "red", "blue", "green") or a hexadecimal code (eg #fa8e47).
Attribute size can take values ​​from 1 to 7 (the default is 3, which corresponds to 13.5 points for the Times New Roman font).  Another option for setting the attribute is “+1” or “-1”.  This means that the size will be changed relative to the base one by 1 more or less, respectively.
Consider the use of these attributes in our example:

 
 
 
 
 
 
 
Website builder "Nubex"
 

We have applied the tag font for one word, we set for it the size 6, orange color and the font family “Serif”.
Setting text color with CSS
If you need to apply certain formatting (for example, change the color of the text) to several sections of text, then it will be more correct to use CSS code.  There is a color attribute for this.  Let's look at how to use it in our example:

 
 
 
 
 
 
 
 
Constructor sites "Nubex"
 

Here we set blue color for the word "Constructor" (its size, by default, is 100% of the base), green color and size 125% for the word "sites", orange color and size 150% for the word "Nubex".