Which tag italicizes. Basic HTML text formatting tags - highlighting text in bold and italics; size, color and font options; paragraph and heading tags

To make our WEB page look more presentable, we divide the text into paragraphs and highlight the heading. HTML has 6 levels of document section headings, numbered from 1 to 6. Headings are declared by a pair of tags with numbers corresponding to the level, for example,

- the heading of the section of the first level, and
- heading of the sixth level section. Headings differ from regular text in the size and width of the letters. The first level heading h1 is usually displayed in a very large font, while the sixth level heading h6 is displayed very small.

Titles

Do not confuse the titles of sections of a document with the previously discussed title of the document, defined by the element .

We use the first sentence as the title of the text - To do this, it is enough to limit it with tags

And

.

Insert tags into the text of the other.html file

And

so that they limit the first sentence of the text, and this piece of code takes the following form:

Welcome to the SD company page!

Let's look at the acquired result.

Save the file by selecting the Notepad program menu command File - Save (File - Save).

The save operation must always be done before viewing the document, because it opens the file for viewing by loading it into the computer's RAM from the disk. If you do not save the file after editing the HTML code, you will not see any configuration in the browser.

Restore the browser window by clicking its button on the Taskbar.

Press the F5 button or the Refresh button on the toolbar of the program's working window. The other.html file will be reloaded and you will see in the browser window what the first level heading looks like.

See how the titles of the other 5 levels will look by changing the numbers in the tags: h2, h3 and so on After each configuration, do not forget to save the file and refresh the image in the browser window.

When you finish the experiments, again restore the tags in the other.html file

.

Using the 6 levels of headings that HTML provides, you can simply readable document with an intuitive structure. Remember that your document will always read significantly better if it has precise division into sections and subsections.

Heading alignment

By default, the header is aligned to the left of the page. But it can also be right-aligned or centered. For right-alignment in a tag

the align="right" attribute is used, and align="center" for centering. The obvious indication of left-side alignment is also allowed - align="left".

Add to tag

the align="center" attribute to center the heading. This element should take the following form:

Welcome to the SD company page!

In the future, we will not remind you of the need to save the file with the initial code and update the image in the browser before viewing.

How to make text bold in HTML

Now let's move on to the rest of the text. Increase its size and make the text bold italic. Paired tags are used to set bold style .

Paste in the file other.html opening and closing tags so that they limit the text Here you will learn ... This element should take the following form:

How to make text italic in HTML

Italic style is set using tags .

Insert an HTML tag into the initial code And so that the edited element takes the following form:

Here you will learn about our activities, about the software products of our company and about the equipment that we produce.

Markup elements can be nested, as in this structure, where the element … nested in element …. Modern browsers are capable of handling nested tags correctly. Therefore, you need to make sure that the nesting order is not violated. The browser will be hindered if nesting is broken. For example, the following would be incorrect: …. Nesting is a very fundamental part of the overall culture of writing HTML code.

How to make text underlined in HTML

With a couple of tags you can set the underlined style of a text piece delimited by these tags, and using a pair of tags - show text in teletype font.

It should be noted that recently the tag simplified and underlining is done using styles. equivalent . Yes, the new analogue looks more cumbersome, but unfortunately it is more true. The main thing in this favor is that the bulky variant is cross-browser, in other words, it is suitable for all browsers, when both Not all browsers support.

How to increment text in HTML

Now let's increase the font size of the text. This can be done in various ways.

tags increase the font size of the text enclosed between them.

Add tags to the beginning and end of the above piece of code, respectively And so that the element takes the following form:

Here you will learn about our activities, about the software products of our company and about the equipment that we produce.

Using tags you can reduce the text font size compared to the initial one.

Another method for specifying font size is with tags. with the size attribute. The values ​​of this attribute are integers from 1 to 7. The value 1 corresponds to the smallest font size, and the value 7 corresponds to the largest.

Using instead of tags view tags , see how the text font size changes with different values ​​of the size attribute - from 1 to 7.

You can also use numbers from 1 to 7 with a + (plus) or - (minus) sign as a value for the size attribute. In this case, the font size increases or decreases accordingly, in comparison with the initial one, for example, tags will increase the font size, compared to the current one, by one level. Check.

Set 5 as the value of the size attribute for the piece of text in question: . The HTML code for this piece should look like this:

Here you will learn about our activities, about the software products of our company and about the equipment that we produce..

In tags the color attribute can also be used to specify the font color delimited by text tags. The values ​​of this attribute are the same as for the previously discussed attributes that describe the color of the background and text of the document.

By default, the paragraph with the text Here You'll Know... is left-aligned. Center it horizontally with tags

. You can also align a paragraph to the right side of the page using tags. or on the left - using tags .

Stick tags

restricting them to the designated paragraph.

Note that we used tags to center the paragraph

, as opposed to the align="center" attribute, which we applied in the tags

.

Attention! For 2010 tags ,

, , are considered obsolete and therefore it is required to use analogues from styles. This does not mean that you cannot use them, but if you can, try to get rid of them.

=

=

=

=

=

There are also a huge number of other obsolete tags that cannot be described in this article, therefore it is better to immediately familiarize yourself with specialized WEB sites on this issue. But I posted the main ones here a little higher

Selection codes

The HTML language allows two approaches to font selection of text fragments. On the one hand, you can directly indicate that the font in a certain section of the text can be bold or italic, in other words, it is obvious to indicate the font style of the text, as we did in this experiment. On the other hand, it is possible to mark any piece of text as having some kind of logical style that is nicer than usual, leaving that style to be interpreted by the browser. In this way, the logical style shows the role of the text piece, for example, its great importance in comparison with ordinary text, or the fact that this piece is a quote. In your own work, you can use subsequent tags that define logical styles. Check out how they work different browsers.

- used to define a word. Text is displayed in italics by default.

- to highlight words and amplify. Text is displayed in italics by default.

- to highlight the titles of books, movies, performances, and so on, displayed in italics by default.

- for program code fragments. Shown on the display in a fixed-width font.

- used for text that the user enters from the keyboard. It may be displayed in different fonts in different browsers. Tag deprecated.

- serves to display program messages. Displayed in a fixed-width font. Tag deprecated.

- for particularly important fragments. Usually highlighted in bold.

- is used to indicate that a piece of text or a word is a character variable, in other words, text that can be replaced by different expressions. Displayed in italics by default. Tag deprecated.

The HTML 4.0 specification offers a more advanced method for specifying styles for text and other parts, using the CSS Cascading Style Sheets language. Style sheets are a huge achievement in the field of web design, expanding the ability to improve the appearance of pages. Style sheets make it easy to define line spacing, indentation, colors used for text and backgrounds, font size and style, and so on. As the value of the style attribute, pairs of the form "property: value" are used. For example, in a piece of code describing a section heading,

the style="color: blue" attribute specifies that the color property is set to blue, i.e. the first-level heading text should be displayed in blue.

Style Alignment

Let's see how to use the cascading style sheet language to specify the style of a text piece that begins with the words Here you will learn ...

To specify the font weight, use the font-weight property with the values ​​lighter (narrow), bold (bold), bolder (bold), for example, style="font-weight: bold".

To define italic style, use the font-style property with the value italic. Therefore, to make the text bold italic, you should find the style attribute like this: style="font-weight: bold; font-style: italic". Please note: characteristics can be placed in any order and must be separated by a semicolon.

If you want to specify the font size, then you should use the font-size property, the values ​​of which can be specified in relative or absolute values. Relative values ​​are percentages, and absolute values ​​are points (pt), pixels (px), centimeters (cm), millimeters (mm). Eg:

style="font-size: 200%"

style="font-size: 16pt"

style="font-size: 100px"

By specifying absolute rather than relative sizes, you deprive users looking at your pages of the ability to increase or decrease the font size using the browser menu command in accordance with their vision and monitor resolution. Fonts will only be displayed in the size you specified. Therefore, it is better to specify the font size as a percentage. In this case, the font size will be smaller or larger by the indicated percentage than when it was designed with HTML help default tag.

To determine the horizontal alignment method for text, use text-align property with the values ​​left (to the left), right (to the right), center (in the center), justify (in width). In this way, to indicate that the text Here you will learn ... should be formatted in bold italic with a size of 150% of the initial and center aligned, its style should be found as follows:

style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"

We will apply this attribute in tags<р>, which allow you to present the text as a separate paragraph.

Edit the HTML element to include text Here you will find out... by removing the tags

, , , and inserting tags<р>Andwith the style attribute so that this element takes the following form:

<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Here you will learn about our activities, about the software products of our company and about the equipment that we produce.

You see, the HTML language allows you to use various methods style design. At the same time, the use of the language of cascading tables css styles is more desirable.

Other Alignment and Style Options

We have seen only one use of the style sheet language, where the style definition is placed specifically within the tag of the element you are describing.

This is done using the style attribute, which is used with most standard HTML tags. But there are other uses for CSS as well.

In standard HTML, without the introduction of style sheets, to assign certain parameters to any element, such as color, size, position on the page, and the like, you have to outline these characteristics for each element every time, even if 10 pages are required to be placed on one page. ki such parts that do not differ from one another. You have to insert the same piece of HTML code into the page 10 times, increasing the file size and download time from the network.

Stylesheets operate in a different, more comfortable and economical way. In order to assign certain features to any element, you must first outline this element and find this description as a style, and in the future, simply indicate that the element that you want to style appropriately should take on the characteristics of the style you described. Comfortable, isn't it?

Moreover, you can save the style description not in the text of your WEB page, but in separate file- this will allow you to use the style description on any number of WEB pages. And another related advantage is the ability to change the design of any number of pages, correcting only the style description in one separate file.

In addition, the style sheet language allows you to work with the font design of pages at an even higher level than standard HTML.

IN current time The CSS language has a fairly large number of options for parts of HTML that it can control. By using “safe”, in other words compatible with the largest number browsers css elements- font characteristics, colors of parts and backgrounds, text and border characteristics - you can greatly facilitate your work and make your WEB pages more attractive in terms of text design.

Hello dear blog readers! This article will talk about text formatting tags. Prominent examples are making text bold or italic. We will also consider the influence of some tags on the internal optimization of the site and the rules for writing them. You can read about that in the article below. By the way, you can find similar text design elements in many text editors, for example, in Word.

Tags are divided into 2 types: block and inline. When using the former, you can change the content of a part of the text (lines, individual fragments or words), and the latter are . The formatting tags we'll cover in this article are predominantly inline.

Rules and order of writing tags

You already know what opening and closing tags are. If not, then read the article at the very beginning of this material. In short, there are two types of tags: single (for example, transfer to newline
) and container (paired). So, all text formatting tags are paired. This means that any element has an opening and closing tag, and the highlight must be placed between them. For example, the correct selection of a phrase would look like this: Selection

When the browser processes this fragment, you will see the following text: Selected fragment. By the way, in RSS feed all tags are not displayed ().

The main thing when writing tags is not to forget to close them. Otherwise, all text on the page will be bold (in the example with the tag ). But there are cases when you need to select a certain fragment both in bold and in italics at the same time. But there is no tag that performs this action. There is only one way out of this situation: use two tags at the same time. It doesn't matter in which order you use them. Therefore, writing the text with tags like this:

Selection

or like this:

Selection

You still get Selection italic and bold at the same time. However, it is preferable to use the first option, because initially it was the only and correct one. Also, do not forget that each browser can process tags differently (), depending on the settings. Now let's move on to the formatting tags themselves.

Making text bold and italic - tags , , And

The most popular text formatting tags - highlighting it bold And in italics. Usually they are used to give importance to any fragment. The first case serves to select a fragment containing useful information or keywords. Italics serve the same purposes as bold text, but the information is less important because italics are less visible against the background of body text than bold text.

Let's start with making text bold. There are two tags used for this action − And . Differences in appearance No. Although, given that each browser can interpret each element differently, you should be able to see some differences. This is what the text in the tags looks like And in the form already processed by the browser:

Text in strong tags

Text in b tags

And here is what these two lines look like in the source code of the page:

Text in strong tags Text in b tags

We can observe the same situation in the case of italic tags And . Try to find the differences between the two examples:

Text in em tags

Text in tags I

And here source:

Text in em tags Text in tags I

So, the considered selection tags in bold and italics do not actually differ, but why then do we need, for example, the tag if there ? After all, the latter contains only one character (not counting the brackets) and, therefore, is easier to write. And the thing is that tags And affect . If you surround keywords with these tags, this will have a positive effect on site promotion. The main thing is not to overdo it - the maximum text should be 5% bold text in the tag , and the same amount of italics in the tag .

If you just want to highlight some point in the text, then use the tag or . In general, I think that search engines also consider the text in these tags as more important, but on internal optimization they still have less effect than And .

Highlight text slash tags − , And

Now let's look at a few tags that use a stroke in text decoration. The most famous to you text editors — tag or underscore. This tag does not affect the ranking (as far as I know), but it will help to highlight some text and focus on it. I gave an example of using this tag a little higher.

Two more similar tags - And . Both perform the function of strikethrough text. You can use this tag in any situation: if you are updating a document (or rather part of it), you can cross out the old and add a new one; if you are going to write something that deviates from the topic of the material; something that does not meet moral and ethical standards.

The differences between these two tags are only in their writing, as a result of which it is preferable to use the first one, because firstly, it is more convenient to write, and secondly, there will be less HTML code on your page, and search engines love it.

Tag and attributes - text font settings

Now consider a tag that is not used without attributes. With it, you can set parameters for a specific piece of text. In general, it is now preferable to use (cascading style sheets), because using them, you can greatly reduce the entire HTML code of the page. So, consider the same tag . For him there is everything three attributes:

  • face- the font itself. For example, Arial, Courier or Verdana. You can list a few, because. not all users have an extensive set of fonts, and by writing several in the face attribute, the browser will be able to choose which one to use, or rather, which one is present in the system;
  • size is an attribute that specifies the size of the text. It can be expressed both in arbitrary units and in pixels;
  • color- text color. This attribute can be used both in HTML color codes and in verbal ones. The former look like #FFFFFF (where F is any number or letter from A to F), while the latter are written in simple words(for example, red - red).

This is what the text in the tag looks like using each attribute:

This text is 6px 


This text is red


This text is in Arial font


This text is red and 5px in size.

And here is what you will see after processing the written code: 


Block Text Design Elements - Headings 
-
, paragraph 


Finally, we will look at block elements, which are used in almost every document.  These are heading and paragraph tags.  Let's consider the first.  Headings come in 6 types and each has its own tag.  Each species has only its own serial number and is recorded using tags. 
, 
,..., 
.  Here's what all the headers look like when processed:




The number after the title word corresponds to the number in the tag .  Headlines have a huge impact on on-page optimization, so wrap them in tags keywords.  There are quite a few features of this case, which I will discuss in subsequent articles.


Now let's talk about the paragraph selection tag 
The function of this tag is to separate text between other similar text with an empty line.  If you look at the source code of any document, you can see the following:




The green rectangles contain one paragraph, the red rectangles another.  And here is how this code looks after processing by the browser (the arrow points to an empty line):




As a result, we get a fairly noticeable separation of one paragraph from another, which is beneficial - reading becomes more convenient.


This is the end of the article about document formatting tags.  There are many more than I have described in this article.  It’s just that some need to be told quite a lot, as a result of which separate articles with a full review will be devoted to them.!


Italic font is one of the most popular ways to highlight a piece of text and give it a certain significance.  It is ideal for quotes, footnotes, titles and proper names.  There are two special tags in HTML for displaying italics.  In CSS, italic is controlled by the font-style property.
 
Italic or italic font?
 
The display of the same font in italics may vary.
The picture shows three blocks of text in the same Playfair Display font.  The first one is in normal roman style, while the second and third are italic.  They are open in the same browser Google Chrome but they look completely different.
 
The fact is that some fonts have their own italic character sets.  If the browser does not have access to this set, but encounters text that should be displayed as italic, it will attempt to slant it on its own.
In the second block - just such a browser-processed version, and in the third - the original italic version of the Playfair Display font, which has a unique style, more like a handwritten one.  The browser, on the other hand, simply tilts each character of the text at a certain angle, imitating italics.
When figuring out how to make italics in CSS or HTML, it's important to remember that in the case of specific fonts, you need to make sure the browser has access to their italic sets.  In some cases, the result of browser tilt algorithms may be unsatisfactory.
 
HTML cursive
 
There are two special tags for italic text in HTML: i (from the word italic) and em.  The style of a text fragment enclosed in any of these descriptors will be the same.
The difference lies in the logical allocation.  The em tag indicates the special significance of the fragment.  This is important for search robots and screen readers, which will highlight the specified text using intonation.
 
font-style property
 
In CSS, italic is controlled by the font-style statement.  It can take one of three basic values:
 
  • normal - normal font;
    •  
  • italic - italic style;
    •  
  • oblique - oblique style.
    • 

On currently most modern browsers treat oblique and italic in the same way, but the former was originally thought to be the result of browser-specific algorithms that slant each character to the right.
If the font you are looking for is not found by the browser, then italic will look exactly the same as oblique.
Unlike the em tag, it does not give the highlighted fragment special importance, it rather corresponds to the i descriptor.
 
Examples
 
Quotations are often highlighted in italics.  Let's try to make it look nice.
Quote ( font-style: italic; border-left: 5px solid purple; padding-left: 20px; )
In addition to the decorative border on the right and padding, the quote block has a font-style rule with a value of italic.
 
 
It sets italic CSS.


In html, font size plays an important role.  It draws the user's attention to important information posted on the website page.  Although not only the size of the letters is important, but also their color, thickness and even family.

 
Tags and attributes when working with html fonts


The hypertext language has a large set of tools for working with fonts.  After all, text formatting is the main task of html .


Cause of creation HTML language there was a problem of displaying text formatting rules by browsers.



Consider the tags that are used to work with fonts in html and their attributes.  The main one is the tag .  Using the values ​​of its attributes, you can set several font characteristics:


  • color - sets the color of the text;
    • 

  • size – font size in conventional units.
    • 

A positive attribute value from 1 to 7 is supported.


  • face - used to set the font family of the text to be used inside the tag .  Multiple values ​​are supported, separated by commas.
    • 


Only the text that is located between the parts of the paired font tag is formatted. The rest of the text is displayed in the default font.


Also in html there are a number of paired tags that define only one formatting rule.  These include:


  • - sets in html bold font.  Tag similar in action to the previous one;
    • 

  • - the size is larger than the default;
    • 

  •  — smaller size font;
    • 

  • - italic text (italic).  Similar tag ;
    • 

  • — text with underlining;
    • 

  • - crossed out;
    • 

  • - display text only in lower case;
    • 

  • - in upper case.
    • 

plain text


Thumbnail


Thumbnail


More than usual


Less than usual


Italics


Italics


With underline


Strikethrough


Style Attribute Capabilities


In addition to the tags described, there are several more ways to change the font in html .  One of them is to use the generic style attribute.  Using the values ​​of its properties, you can set the font display style:


1) font-family - property sets the font family.  It is possible to enumerate multiple values. 
Changing the font in html to the next value will happen if the previous family is not set to operating system user.


Writing syntax:


font-family: font-name [, font-name[, ...]]


2) font-size - the size is set from 1 to 7. This is one of the main ways in which you can increase the font in html. 
Writing syntax:


font-size: absolute size |  relative size |  value |  interest |  inherit


You can also set the font size:


  • In pixels;
    • 

  • In absolute terms ( xx-small, x-small, small, medium, large);
    • 

  • In percentages;
    • 

  • In points (pt).
    • 

font-size:7


font-size:24px


Font-size: x-large


font-size: 200%


font-size:24pt


3) font-style - sets the font style.  Syntax:


font-style: normal |  italic |  oblique |  inherit


Values:


  • normal - normal spelling;
    • 

  • italic - italic
    • 

  • oblique - font with an inclination to the right;
    • 

  • inherit - inherits the spelling of the parent element.
    • 

An example of how to change the font in html using this property:


font-style:inherit


font-style:italic


font-style:normal


font-style:oblique


4) font-variant - converts all uppercase letters to uppercase.  Syntax:


font-variant: normal |  small caps |  inherit


An example of how to change the font in html with this property:


font-variant:inherit


font-variant:normal


font-variant:small-caps


5) font-weight - allows you to set the thickness of the text writing (saturation).  Syntax:


font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900


Values:


  • bold - sets the html font to bold;
    • 

  • bolder - bolder relative to normal;
    • 

  • lighter - less saturated relative to normal;
    • 

  • normal - normal spelling;
    • 

  • 100-900 - sets the font thickness in numerical terms.
    • 

font-weight:bold


font-weight:bolder


font-weight:lighter


font-weight:normal


font-weight:900


font-weight:100


font property and html font color


Font is another container property.  Internally, it combined the values ​​of several properties designed to change fonts.  Font syntax:


font: font-size font-family |  inherit


Also, the value can be set to the fonts used by the system in the inscriptions on various elements controls:


  • caption - for buttons;
    • 

  • icon - for icons;
    • 

  • menu - menu;
    • 

  • message-box - for dialog boxes;
    • 

  • small-caption - for small controls;
    • 

  • status-bar - status bar font.
    • 

font:icon


font:caption


font:menu


font:message-box


small caption


font:status-bar


font:italic 50px bold "Times New Roman", Times, serif


In order to set the font color in html, you can use the color property.  It allows you to set the color, as with keyword, and in rgb format.  And also in the form of a hexadecimal code.


In the current article, we will talk about how to highlight text. in italics HTML.  As with bold text, italic text can be made in three ways:


  • Tag i HTML;
    • 

  • Tag em HTML;
    • 

  • CSS property font-style.
    • 

Let's consider all three options on how to make italics in HTML, discuss the subtleties of this issue and which methods are more convenient and more correct to use in certain situations.


Italic text: tag 


Tag i(italic), by analogy with the tag b for bold text, physically emphasizes italic text (meaning that only the style of the text changes).  Tag application i:

 Website builder "Nubex"

Thus, the desired part of the text is placed between the tags 
.


Italic text: tag 


Although the tag i remains valid, from the point of view of site optimization, it is better to use the tag em to highlight logically important sections of the text.  This means that search robots take into account the importance of the text placed between the tags. 
:
Website builder "Nubex"

Result:


Website builder "Nubex"


But do not forget that the text enclosed in tags i And em, although they are displayed almost the same (in all modern browsers), are inherently not quite identical, as noted above.  Therefore, you need to use tags as needed: tag em HTML frame important sections of text, and apply visual italic styling using a tag i or CSS styles.  Let's now look at using CSS styles to italicize text.


Italic text with CSS


To set font display styles in CSS, use the property font-style, which can take the values: oblique(Italic text), italic(italics) and normal(regular font).


It is worth remembering that italic font and inclined are, in essence, not the same. Italics is a special font that is analogous to handwriting, A inclined formed by tilting the regular font to the right.


Applying an attribute font-style on practice:

 

 
 
 Italic with <a href="https://olympsb.ru/en/teg-ol-v-html-oznachaet-kak-razmestit-elementy-spiska-gorizontalno-izmenenie-markerov-tega-s-pomo.html">using CSS</a>- "Nubex"
 
 
 
 

 
Our sites are really huge step in web development.

 
We do it for real quality sites.

 

 






But you need to remember that some browsers text with the property font-style: oblique; may not be interpreted as italic text, but as italic.