You can use the i tag. HTML5: old tags with a new purpose. Tags for highlighting text with a line -, and

Italics is one of the most popular ways to highlight a piece of text and give it some significance. It is ideal for quotations, footnotes, titles and proper names. There are two special tags in HTML for displaying italic style. IN CSS italic controls the font-style property.

Italic or italic?

The same font may appear differently in italic style.

The picture shows three blocks of text typed in the same Playfair Display font. The first one has the usual roman style, while the second and third ones have italic style. They are opened 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 rendered as italic, it will try to italicize it on its own.

In the second block there is just such a version processed by the browser, and in the third there is an original italic version of the Playfair Display font, which has a unique style, more like a handwritten one. The browser simply tilts each character of the text at a certain angle, simulating italics.

When figuring out how to make italic in CSS or HTML, it is important to remember that in the case of specific fonts, you need to provide the browser with access to their italic sets. In some cases, the result of browser tilt algorithms may be unsatisfactory.

HTML italic

There are two special tags for displaying 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 selection. The em tag indicates the special significance of the fragment. This is important for search robots and screen readers, who will highlight the specified text using intonation.

font-style property

In CSS, italics are controlled by the font-style statement. It can take one of three basic values:

  • normal - normal font;
  • italic - italic style;
  • oblique - oblique style.

Currently, most modern browsers treat oblique and italic values ​​the same, but the former was originally thought to be the result of browser-specific algorithms that tilt 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 selection any special importance; it rather corresponds to the i descriptor.

Examples

Quotes are often used 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 indents, the quote block has a font-style rule with the value italic.

Use it to set italics in CSS.

In this article we will talk about how to highlight text 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 look at all three options for how to make italics in HTML, discuss the intricacies of this issue and which methods are more convenient and correct to use in certain situations.

Italic text: tag

Tag i(italic), similar to the tag b For bold text, serves to physically highlight italic text (this means that only the text style is changed). Applying a tag i:

Website builder "Nubex"

Thus, the required 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 text. It means that search robots take into account the importance of text placed between 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 identically (in all modern browsers), in their essence are not entirely identical, as noted above. Therefore, you need to use tags as needed: tag em HTML frame important sections of text, and visual italics are applied using a tag i or CSS styles. Let's now look at using CSS styles to make italic text.

Italic text with CSS

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

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

Applying an attribute font-style on practice:

Italic with <a href="https://bmwworkshop.ru/en/oformlenie-dlya-ugolkov-i-ramok-na-css-svoistvo-border-radius-zakruglenie-ramok-v-css/">using CSS</a>- "Nubex"

Our sites are, indeed, huge step in web development.

We do it for real quality sites.

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

Description

Sets the italic style of the font. It is acceptable to use this tag in conjunction with other tags that define the style of text.

Syntax

Text

Closing tag

Required.

Attributes

Similar to CSS

Example. Using a tag

Tag I

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Note

Although the use of the tag is not frowned upon in HTML, the use of styles provides more control over the style of text.

Specification ?

✖

Specification

Each specification goes through several stages of approval.

  • Recommendation - The specification has been approved by the W3C and is recommended as a standard.
  • Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
  • Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
  • Working Draft - A more mature version of a draft that has been discussed and amended for community review.
  • Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
  • Draft ( Draft specification) - the first draft version of the standard.

The living HTML standard (Living) stands out - it does not adhere to traditional version numbering, since it is under constant development and is updated regularly.

Browsers: Desktop Mobile ?

Internet ExplorerChromeOperaSafariFirefox
2 1 2 1 1
AndroidFirefox MobileOpera MobileSafari Mobile
1 1 6 1

Now we will study the main tags.

Let's start with what tags are required on the page, forming its structure.

Block. Simple page structure The site page is a regular one text file with extension.html . The text is stored inside this file , which should contain the text of the entire site (everything written outside this tag will be ignored by the browser), and inside it there should be two more tags: tag for service page content and tag - for the main text, which is visible on the browser screen.

Into the service content, which is located inside the tag , there are many different things included, but for now we only need two of them. This is a tag <meta>, which specifies the title of the page, which will be visible in the browser tab, and the tag <b>, which specifies the page encoding (it is placed in the attribute</b> charset <b>and usually matters</b> utf-8</p> <p>, more about this in the video, which will be a couple of paragraphs lower). <html>Also, before the tag <b>the construction is usually written</b> doctype <a href="https://bmwworkshop.ru/en/shablon-glavnoi-stranicy-besplatnye-html-shablony-na-russkom-yazyke-tesselatte--/">, which specifies the version</a> HTML language<!DOCTYPE html> .</p> <p>, on which the site is made. <a href="https://bmwworkshop.ru/en/bazovaya-struktura-html-stranicy-standarty-html-ili-chto-takoe-doctype/">The current version of the language is number five and the doctype for it should look like this -</a> So let's look at the main one <b>with extension</b> page structure</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>(to run this example in a browser, copy it to a text file with the extension and open in a browser, if you have problems with this, watch the video below the example):

This is the title title

This is the main content of the page.

See this link to see what this example looks like in a browser. I think after you've read about the basic structure of a page, you're still a little confused about what it all looks like in practice.

Therefore, I made a special video in which I will show you how to make your first HTML page and run it in the browser (in it I will also talk about the title of the page, about encodings, about code design). Watch it and only then proceed to further reading:

Well, now, having learned how to create the simplest pages, we will move on to studying useful tags that should be used inside the tag . These will be tags for paragraphs, headings, lists, links and other useful things. So let's get started. Block. Paragraphs

One of the main elements of the page is

paragraphs

(to run this example in a browser, copy it to a text file with the extension

. They can be compared to paragraphs in a book - each paragraph begins with

new line

and has a so-called red line (this is when the first line of text in a paragraph is slightly indented to the right).

By default there is no red line, but it is easy to create (more on this later).

A paragraph is created using a tag

Thus:

This is a paragraph.

That's one more paragraph. And one more paragraph..

They can also be compared to headings from a book - each chapter has its own heading (the title of that chapter) and is divided into paragraphs, which also have their own headings. Well, the main text of the page is located in paragraphs.

,

,

,

,

,
Headers are created using tags. They have varying degrees of importance. In the title h1 should be located title of the entire HTML page , V h2 - Name blocks

pages, in

(to run this example in a browser, copy it to a text file with the extension

h3

- the name of the subblocks and so on.

All headers are bold by default and have different sizes (this can be changed via CSS, but more on that later). See example:

Heading h1

Heading h2
Heading h3

Heading h4

Heading h5

Heading h6

This is the first paragraph.

h3

- the name of the subblocks and so on.

All headers are bold by default and have different sizes (this can be changed via CSS, but more on that later). See example:

Heading h1

Heading h2
Heading h3

Heading h4

Heading h5

Heading h6

This is the second paragraph.

This is the third paragraph. This is how the code will look in the browser: Block. Fatty You already know that headers are by default

(to run this example in a browser, copy it to a text file with the extension

fatty . However, you can make regular text bold - just put it in a tag.

This is the first paragraph.

fatty See example: This is normal text, and this is

fatty b text.

fatty

text. should be used inside some other tag, such as a paragraph. In this case, paragraphs create the overall structure of the page (paragraphs and headings), and the tag makes individual pieces of text bold. :

(to run this example in a browser, copy it to a text file with the extension

fatty Block. Italics.

This is the first paragraph.

In addition to fatty, you can also make

italics using tag italic Block. Lists Along with paragraphs and headings, there is another important element of the page - this

lists

Read Also

Safety

AirDrop - how to use?

2024-02-21 03:53:31

Liked? Like us on Facebook