Html gives us some options in terms of text design. Today I will tell you how to make an italic font in HTML, both in a standard font and in a non-standard one. In the second case, you will need to take a few things into account to make everything work.

How to write italics in html?

Let me start with the fact that in the html itself there are two tags that give the text an italic style. These are em and i. By the way, the second one is built into the html editor of the WordPress engine, in which I am currently writing this article. How are these tags different? In fact, today I would not like to loudly declare that they are somehow different.

In general, em is supposed to be used to highlight words that need to be pronounced with a special intonation, and i simply visually highlights the text. But let’s not worry about it, because we don’t know if this is actually the case.

What are the CSS properties for italic text?

This is the font-style property and its value is italic. There is also the value oblique and it turns the text into italic. Is there any difference between these values? Virtually none. By the way, details about this and others css properties for the text, read the corresponding article, where everything is sorted out.

How to display a non-standard font in italics?

The fact is that if you connect a non-standard font via Google Fonts, then in this case you must check the box when connecting at least 1 italic font style. If this is not done, then when you try to make such a font italic, italics of one of the standard fonts will be displayed. By the way, you can read about connecting non-standard fonts in this article.

In this screenshot you can see a fragment of the font connection via Google service Fonts.

As you can see, there is a checkmark next to at least one italic style. Now, when using the necessary tags or style properties, this font will indeed become italic, and not some other.

Thus, we have discussed all the points that exist in working with italics. I don't dare detain you any longer.

One of the easiest ways to highlight a word or phrase in text is to use a different letter style. This is how you can emphasize a word or phrase using bold. Pages easily allow you to highlight words using different styles - italic, underlined, bold.

Bold font as a way to highlight the main thing

Words highlighted in bold font look brightest and catchiest. Such words and phrases immediately catch the eye. So, in order to learn how to quickly highlight the necessary places in the text, you should remember a special HTML code. Bold font is set using a paired tag.

Before the word or phrase or sentence that should be highlighted, an opening tag is placed . After the last letter of the text that should be highlighted, a closing tag is placed. Anything between these two tags will appear in bold when displayed in the browser.

Other highlighting options

So, we found out that you can highlight text using a different style. We decided that it is easiest and at the same time effective to use bold HTML font. Now let's talk about other selection options.

So, you can highlight text in italics using a paired tag , emphasize it with . This is the most simple ways highlighting text.

There are also lesser known and used tags that can be used to highlight words and sentences in text. So, in order to cross out the text, it is enough to use . A paired tag will help make text monospaced . If you need to create a superscript, use , lower - .

In this case, as before, the text you need should be between the opening and closing tags. As you can see, there is nothing complicated, the main thing is to remember these codes or write them down.

Using multiple fonts

If you want to make your text more expressive, you can use more than just bold fonts. HTML markup allows you to highlight a word using multiple styles at the same time. So, you can make a word bold, strikethrough, and italic at the same time.

At the same time, you need to remember one thing - all tags must be closed sequentially. For example, a correct entry might be:

• the selected text.

If you close the tags in a different order, the text will be highlighted incorrectly. An example of an erroneous entry:

• the selected text.

In this case, the browser will get confused and will not understand what exactly you want from it.

By the way, it can be noted here that the three style options - bold, underlined and italic - are remembered quite easily if you know the hot keys in Word. There, the style is set using the same letter keys while holding Ctrl.

As you can see, you can use not only italic or bold fonts. HTML markup allows you to highlight words as easily as regular Word.

conclusions

To highlight text, not only various colors and shades, different sizes and types of fonts, but also its style are widely used. Moreover, it is with the help of a different outline that one or another fragment of text can be beautifully and easily highlighted.

To change the font style, you should use any tag you know. The bold font of an HTML page is the brightest and most noticeable font, and therefore is most often used for emphasis.

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

Titles

Do not confuse document section titles with the previously discussed document title, defined by the element .

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

And

Insert tags into the text of the other.html file

And

Welcome to the SD company page!

Let's look at the acquired result.

Save the file by selecting the Notepad menu command File - Save.

The saving 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 disk. If you do not save the file after editing the HTML code, you will not see any configurations 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 what the first level header looks like in your browser window.

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 update the image in the browser window.

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

Using the 6 levels of headings that HTML provides, you can create an easy-to-read document with an intuitive structure. Remember that your document will always be much better read if it is clearly divided into sections and subsections.

Heading Alignment

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

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

Add to tag

align="center" attribute to center the title. This element should look like this:

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 refresh the image in the browser before viewing.

How to make text highlighted (bold) in HTML

Now let's move on to the rest of the text. Let's increase its size and make the text bold italic. To set bold style, paired tags are used .

Insert the opening one in the other.html file and closing tags so that they limit the text. Here you will find out... 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 within an element …. Modern browsers are able to correctly handle nested tags. Therefore, you need to ensure that the order of investment is not violated. The browser will be difficult to operate if the nesting is broken. For example, this entry would be incorrect: …. Compliance with nesting is a very important part of the general culture of writing HTML code.

How to make text underlined in HTML

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

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