HTML Highlighting: Bold, italic and color text. How to make a nice font in html: sizes, colors, html font tags With the i tag you can

Tag in HTML it is used to make a piece of text italic.

HTML tag refers to physical formatting tags. Change font style using a tag is stylistic in nature.

You can also make HTML text italic using the tag. In this case, the text will be considered as highlighted logically (by meaning), "underlined".

The HTML5 specification recommends giving priority to logical formatting tags: important text fragments - a tag, emphasis - a tag, subheadings - tags, text highlighting - a tag. Italicize text with a tag only follows if the selection character does not match any logical formatting tags.

All types of text selection are described in the article:.

Syntax

italicized text

Browser display

Usage example in HTML code




Italic tag in HTML


Simple text that can be located on any site. And here is the text in italics (

Everyone knows that tags , , , are presentation, and therefore, based on the paradigm "structure, presentation, behavior", their use is not encouraged. The elements seem much more familiar , , ... This has been the case for many years of development practice. However, much has changed in the semantics of these elements with the arrival of HTML5. Now we have 4 new tags with meaning and a mess in our head.

vs

If earlier all textbooks on layout were full of phrases like “use instead ”, And this was half true, today such a habit can play a cruel semantic joke. And the thing is that HTML5 authors suggest using to highlight passages of text in order to draw the attention of the reader, but without implying an increase in the meaning of the text or intonation. The spec provides examples of use for marking up keywords in a document

The frobonitor and barbinator components are fried.

And leads (first paragraph of an article in journalism)


Kittens "adopted" by pet rabbit


Six abandoned kittens have found an unexpected new mother figure - a pet rabbit.


Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.


In its turn , as before, means the increased value of its content.

vs

From now on contains text that stands out from the general environment, but does not have an emotional connotation. In my opinion, it is logical to use it where typographic tradition suggests italics (for example, words in a foreign language, terms, etc.)

Per aspera ad Astra - translated from Latin the saying means "Through hardships to the stars."

the same means emphatic stress, emotional emphasis on a given passage of the text. This is the case when in speech we highlight words with a voice (intonation, volume, etc.)

To execute can't, have mercy.

Read the contract carefully!

“Text in small print” (information that is a legal formality, such as an enterprise license or legal address, etc.), we, as a rule, marked up with an element with a class that sets a smaller font in visual user agents. Now a new old one has appeared in our arsenal semantic element - .

Holyvar about

Earlier was nothing more than strikethrough text. Now presents information that has lost its relevance.
We also have an item , which results in strikethrough text by default in visual user agents. It means changes in the document, and at first glance, their purpose may seem the same. However, there is a subtle point here. Consider an example of a product page in an online store.
It can show two prices, one of which is crossed out. We mark it with an element ... This means that the old price has lost its relevance (no matter when it was, the fact itself is important). How to check what is not ? implies changes made to the document(what matters is that at some point in time the document was changed). In our case, the new document already contains irrelevant information.

New semantics and old doctype

If, for some unknown reason, you cannot replace the doctype with a new one and formally typeset in HTML 4.01, do not despair. Use old new elements with new meaning and over time you will say thank you to yourself. Perhaps someone will say that this is wrong, but after all, these elements, except are not even invalid. In addition, HTML5 was designed with backward compatibility in mind, and the same applies to the new semantics of the old elements. Nothing has changed radically, and only a semantic peppercorn has been added.

In this article, we will talk about how to select text. in italics HTML. As with bold text, italicized text can be made in three ways:

  • Tag i HTML;
  • Tag em HTML;
  • CSS property font-style.

Let's consider all three options for making italic in HTML, discuss the subtleties of this issue and what 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, it is used to physically highlight italic text (this means that only the style of the text changes). Tag application 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. This means that search robots take into account the importance of the 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 the same (in all modern browsers), in their essence they are not quite identical, as noted above. Therefore, you need to use tags as needed: tag em HTML to frame important sections of text, and apply visual italic design using a tag i or CSS styles. Let's now look at using CSS styles for italic text selection.

Italic text powered by CSS

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

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

Attribute application font-style on practice:

Italic with CSS - "Nubex"

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

We do for real quality sites.

But it must be remembered that some browsers text with the property font-style: oblique; may not be interpreted as italic text, but as italic.

Now we are going to study the main tags. Let's start with what tags are required on the page, forming its structure.

Block. The structure of the simplest page

A site page is a plain text file with the extension .html... This file contains the text of the HTML page along with the tags. This file must have the following tags: tag , 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 the service content of the page and the tag - for the main text, which is visible on the browser screen.

To service content that is located inside the tag , many different things come in, but for now we only need two of them. This is a tag , which sets the name of the page, which will be visible in the browser tab, and the tag <meta> , which sets the page encoding (it is set in the attribute <b>charset</b> and usually matters <b>utf-8</b>, more on this in the video, which will be a couple of paragraphs below).</p> <p>Also, before the tag <html> the construction is usually written <b>doctype</b>, which indicates the version of the HTML language in which the site is made. The current version of the language is number five and the doctype for it should look like this -<!DOCTYPE html> .</p> <p>So let's take a look at the basic structure of the page (to run this example in a browser, copy it into a text file with the extension <b>.html</b> and open in a browser if you have problems with this - watch the video below the example):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is the title title This is the main content of the page.

See this link for how this example looks in a browser.

I think after you read about the basic structure of the page, you still have some confusion about how it all looks 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 tell you about the page title, about encodings, about code design). Take a look at it and only then move on to further reading:

Well, now that we have learned how to create the simplest pages, we will move on to exploring useful tags that should be used inside a 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 are paragraphs... They can be compared to paragraphs in a book - each paragraph starts on a new line and has a so-called red line (this is when the first line of the text of the paragraph is slightly indented to the right). There is no red line by default, but it is easy to do (more on that later).

A paragraph is created using the tag

Thus:

This is the title title

This is a paragraph.

This is another paragraph.

And one more paragraph.

This is a paragraph.

This is another paragraph.

And one more paragraph.

Block. Headings h1, h2, h3, h4, h5, h6

In addition to paragraphs, are important on the page headlines... They can also be compared to titles from a book - each chapter has its own title (the title of this chapter) and is divided into paragraphs, which also have their own titles. Well, and the main text of the page is in paragraphs.

Headers are created using tags

,

,

,

,

,
... They have varying degrees of importance. In the title h1 should have the title of the entire HTML page, in h2 - name blocks pages in h3 - the name of the subblocks, and so on.

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

This is the title title

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

This is how the code will look in the browser:

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

Block. Fatty

You already know that the default headers are fatty... However, you can also make plain text bold - just take it into the tag ... See example:

This is the title title

This is normal text, and this is fatty text.

This is how the code will look in the browser:

This is normal text, and this is 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 b makes individual pieces of text bold.

Block. Italics

In addition to fatty, you can also make italics using the tag :

This is the title title

This is normal text, and this is italic text.

This is how the code will look in the browser:

Block. Lists

Along with paragraphs and headings, there is another important element of the page - this is the lists... Such elements are probably familiar to all Internet users. They are a listing of something (a list) point by point. There is usually a filled circle next to each item on the list (it is called marker list).

Lists are created using the tag

© 2020 Mobile and Computer Gadgets