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. 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 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:
Our sites are truly 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.
In html, font size plays an important role. It allows you to draw the user's attention to important information, posted on the site 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
Hypertext language has a wide range of tools for working with fonts. After all, text formatting is the main task of html.
Reason for creation HTML language There was a problem with browsers displaying text formatting rules.
Let's look at 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 characteristics of the font:
- color – sets the text color;
- size – font size in conventional units.
Positive attribute values from 1 to 7 are supported.
- face – used to set the text font family that will be used inside the tag . Several 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 standard default font.
Also in html there are a number of paired tags that specify only one formatting rule. These include:
- — sets bold font in html. Tag similar in action to the previous one;
- — the size is larger than the default;
- — smaller font size;
- — italic text (italics). 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 underscore
Crossed out
Style attribute capabilities
In addition to the described tags, 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 display style of fonts:
1) font-family – the property sets the font family. It is possible to list 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 you can increase the font in HTML.
Writing syntax:
font-size: absolute size | relative size | meaning | 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 writing style. Syntax:
font-style: normal | italic | oblique | inherit
Values:
- normal – normal spelling;
- italic – italic;
- oblique – font slanted 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 capital letters to capital letters. 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 (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 equivalent.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
HTML font property and font color
Font is another container property. Inside itself, it combined the values of several properties intended for changing fonts. font syntax:
font: font-size font-family | inherit
The value can also be set to the fonts used by the system in the labels on various 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
To set the font color in HTML, you can use the color property. It allows you to set the color using keyword, and in rgb format. And also in hexadecimal code.
Tag in HTML it is used to highlight a piece of text in italics.
HTML tag refers to physical formatting tags. Changing the font style using a tag is stylistic in nature.
Do HTML text You can also use italics using the tag. In this case, the text will be considered logically highlighted (in meaning), “underlined”.
The HTML5 specification recommends giving priority to logical formatting tags: important text fragments - tag, emphasis - tag, subheadings - tags, text highlighting - tag. Italicize text using a tag should only be used if the selection pattern does not match any logical formatting tags.
All types of text selection are described in the article:.
Syntax
text in italicsBrowser display
Usage example in HTML code
Simple text that can be placed on any website. And here is the text in italics(
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, read more about this and other CSS properties for text in the corresponding article, where everything is laid out in detail.
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, the italics of one of the standard fonts. 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.
Greetings, Friends.
After another long break, I remembered that I hadn’t written a single line for a long time. Of course, there are reasons for this, because there will always be some reason to come up with an excuse, right? In fact, I do the Video Course every day, which I’ve already mentioned a couple of times, but for now I won’t say anything more about it, you’ll find out everything soon.
So, since nothing came to mind to write about. I decided to look at the statistics to see what interests RuNet users regarding HTML, WordPress, DLE and similar topics. And guess what? There is still something to write about. All the questions that I found seem to have answers, but not always in an understandable form. And in general it became interesting to write something like that.
Today we'll talk about HTML. Namely, we will talk about how to highlight text in bold and italics, and we will also talk about highlighting with color.
Making text bold.
To highlight text in bold, you don’t need to do anything fancy with CSS styles or come up with any other complications. HTML already has this feature. At the same time, we can not only highlight the text in bold, but also put some emphasis on it using highlighting. The emphasis may be on search engines or any special browsers or programs. The main thing is not to overdo it with emphasis on text in an article or on a page with some information, as this can have a detrimental effect, at least on the promotion of this HTML page.
So, to simply make text bold, we can use the tag . This tag refers to elements of physical markup, while setting the text to bold without placing any emphasis on it. This tag is a paired tag, which means it has both an opening tag and a closing tag. Additionally, since the element is inline, it must be in some block element, for example
Example code:
thumbnail
Result:
thumbnail
In this case, we simply highlighted the text in bold and that’s it.
But it happens, so we need not just to highlight the text, but to focus on it. For this we can use the logical markup tag . Not only does the text highlighted with this tag have more weight for search engines. But in theory it should be different from the tag in speech browsers, for example by intonation. However, I can neither confirm nor deny this information, Is it so?
In this case, everything is exactly the same as in the case with a simple highlighting in bold, only we are making an emphasis, and not just highlighting.
Example code:
Result:
It's all quite simple, isn't it?
Italicize text.
In this case, everything is no more complicated than in the first one. And our situation is absolutely the same. We can highlight text with two options in HTML. Again, using either a physical markup tag or a logical tag, with which we again focus on the selected text.
To make the text italic we will use the tag . This element is paired and inline, which tells us that we should use both an opening tag and a closing tag. They should also use it inside a block element. And in this case, the most suitable block element is the paragraph tag
Example code:
text in italics
Result:
text in italics
And of course, we can emphasize the text at the same time by highlighting it in italics using the tag . This item such as , except that the text is italicized and not bold.
Example code:
the text we focused on
Result:
the text we focused on
And the last thing I would like to talk about today is highlighting text with color.
Unfortunately, we do not have a tag for highlighting text with color in HTML. But still, there is nothing complicated in this method.
So, to highlight a certain part of the text with color, we can wrap the desired part of the text with a tag , which is a generic tag and is used inside a block element. In our case block element is the tag But add not enough. You also need to specify the style parameter, which will allow you to add CSS properties the required text, specify the property itself (color), which will help set a specific color. Finally, provide a value for the color property. But the question may arise: “What should I indicate?” You need to specify the HTML code of the color in which we want to “paint” the text. HTML color codes can be found. Now, to make it clearer, let's look at an example. Example code.
text to highlight color
In this case, we highlight one word: with color. I also want to note that the tag is paired and we have to close it where the property should end.
Result:
text to be highlighted
In these simple ways we can manipulate the text on our page. I would also like to note that everything we just talked about works on both WordPress and DLE, since any engine uses HTML to display pages. That is why HTML can be called the basis of any website, no matter what CMS you have.
I hope I explained everything clearly.
Good luck, Friends. Soon... There will be interesting news...
Loading...
