HTML5: old tags with a new purpose. Italics in CSS: Changing the Font Style Using the i tag, you can

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 is controlled by 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.

On present moment 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.

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 italic, 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

Sample code:

bold text

Result:

bold text

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 this true?

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.

Sample 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

Sample 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 is the same as , except that the text is italicized and not bold.

Sample 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 used inside a block element. In our case, the 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 required text, specify the property itself (color), which will help set 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, because 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...

Hello, dear blog readers! This article will talk about text formatting tags. Prime examples include making text bold or italic. We will also look at the impact of some tags on internal website optimization and the rules for writing them. You can read about that in the given article. 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 part of the text (lines, individual fragments or words), and the latter are . The formatting tags we'll look at in this article are primarily lowercase.

Rules and order of writing tags

You already know what opening and closing tags are. If not, then read the article given at the very beginning of this material. In short, there are two types of tags: single (for example, new line
) and container (in pairs). 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: Selected fragment

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

The main thing when writing tags is not to forget to close them. Otherwise, all text on the page will be highlighted in bold (in the example with the tag ). But there are cases when you need to highlight a certain fragment in both bold and 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 what order you use them. Therefore, writing text with tags like this:

Selected fragment

or like this:

Selected fragment

You will still receive Selected fragment 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.

Bold and italic text - tags , , And

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

Let's consider first 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 may be able to see any differences. This is what the text in tags looks like And in a form already processed by the browser:

Text in tags strong

Text in b tags

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

Text in tags strong 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

But source code:

Text in em tags Text in tags I

So, the considered bold and italic tags are actually no different, but then why do we need, for example, the tag if there is ? After all, the latter contains only one character (not counting parentheses) and, therefore, is easier to write. And the whole point is that tags And influence . If you surround keywords with these tags, this will have a beneficial effect on website promotion. The main thing is not to overdo it - the text should contain a maximum of 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 internal optimization they still have less influence than And .

Tags for highlighting text with a line - , And

Now let's look at a few tags that use a dash in text design. The most famous one to you text editors — tag or underscore. This tag does not have an impact on ranking (as far as I know), but highlighting some text and focusing attention on it will help. I gave an example of using this tag just above.

Two more tags similar in purpose - And . Both perform the function of striking out 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 one and add a new one; if you are going to write something that deviates from the topic of the material; something that does not correspond to 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’s more convenient to write, and secondly, your page will contain less HTML code, and search engines love this.

Tag and attributes - text font parameters

Now consider a tag that is not used without attributes. Using 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, let's look at that same tag . Everything exists for him three attributes:

  • face- the font itself. For example, Arial, Courier or Verdana. You can list several, 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— an attribute indicating the text size. Can be expressed as in conventional units, and in pixels;
  • color— text color. This attribute can be used both in HTML color codes and in word ones. The first ones have the form #FFFFFF (where F is any number or letter from A to F), and the second ones 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 size 5px

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


Block text design elements - headings 
-
, paragraph 


Finally, we'll look at block elements, which are used in almost every document.  These are heading and paragraph tags.  Let's consider the first.  There are 6 types of headings and each has its own tag.  Each type 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 word title corresponds to the number in the tag .  Headings 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 talk about in subsequent articles.


Now let's talk about the paragraph highlight tag 
The function of this tag is to separate text between another identical text and an empty line.  If you look at the source code of a document, you can see the following:




Green rectangles contain one paragraph, red rectangles contain another.  And here’s what this code looks like 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 of them than I described in this material.  It’s just that a lot needs to be said about some of them, as a result of which separate articles with a full review will be devoted to them!


Everyone knows that tags  ,  ,  , are presentational, and therefore, based on the “structure, presentation, behavior” paradigm, 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 advent of HTML5.  Now we have 4 new tags with meaning and a mess in our heads.
vs 
If previously all layout textbooks were full of phrases like “use instead of ”, and this was half true, then today such a habit can play a cruel semantic joke.  But the thing is that the authors of HTML5 propose to use to highlight passages of text in order to attract the reader's attention, but without implying increased significance of the text or intonation.  The specification provides examples of use for markup keywords in the 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 turn , as before, means the increased significance of its contents.
vs 
From now on contains text that stands out from the general environment, but has no emotional overtones.  In my opinion, It is logical to use where typographic tradition requires italics (for example, words in a foreign language, terms, etc.) 

 Per aspera ad Astra— translated from Latin, the saying means “Through thorns to the stars.”

 it means emphatic stress, emotional emphasis on a given passage of text.  This is the case when in speech we highlight words with voice (intonation, volume, etc.)
Execute it is forbidden, have mercy.
Read the contract carefully!
We, as a rule, marked “fine text” (information that is a legal formality, such as a business license or legal address, etc.) with an element with a class that specifies a smaller font in visual user agents.  Now a new old one has appeared in our arsenal semantic element -  
.
Holivar o 
Earlier was nothing more than crossed out text.  Now  
 represents information that has lost its relevance. 
We also have an element , the default result of processing in visual user agents is strikethrough text.  It means changes to a document, and at first glance their purpose may seem the same.  However, there is a subtle point here.  Let's look at an example of a product page in an online store. 
It may indicate two prices, one of which is crossed out.  We mark it with the element .  This means that the old price has lost its relevance (it doesn’t matter when it was, the fact itself is important).  How to check that it is not  ?  
 implies changes made to the document(the important thing 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 are formally layout in HTML 4.01, do not despair.  Use old new elements with new meaning and in time you will thank yourself.  Perhaps someone will say that this is wrong, but 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 old elements.  Nothing has changed radically, but only a semantic spice has been added. 
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


A website page is a regular text file with the extension .html.   The text of the HTML page along with tags is stored inside this file.   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 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 , which specifies the title of the page, which will be visible in the browser tab, and the tag <meta>, which specifies the page encoding (it is placed in the attribute <b>charset</b> and usually matters <b>utf-8</b>, more about this in the video, which will be a couple of paragraphs lower).</p>
<p>Also, before the tag <html>the construction is usually written <b>doctype</b>, which indicates the version of HTML 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 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 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.   So I took off 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 to create simple pages, we will move on to explore 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.  They can be compared to paragraphs in a book - each paragraph begins on a new line and has a so-called red line (this is when the first line of the paragraph text 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 the title title
 
 
 
This is a paragraph.

 
That's one more paragraph.

 
And one more paragraph.

 





 

 
This is a paragraph.

 
That's one more paragraph.

 
And one more paragraph.


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


In addition to paragraphs, important things on the page are headers.   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 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:


 

 
 
 This is the title title
 
 
 
Heading h1

 
Heading h2

 
Heading h3

 
Heading h4

 
Heading h5

 
Heading h6

 
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:

 
Heading h1

 
Heading h2

 
Heading h3

 
Heading h4

 
Heading h5

 
Heading h6

 
This is the first paragraph.

 
This is the second paragraph.

 
This is the third paragraph.


Block.  Fatty


You already know that headers are by default fatty.  However, you can make regular text bold - just put it in a 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 are created general structure pages (paragraphs and headings), and the tag b makes you fat individual pieces text.


Block.  Italics


In addition to fatty, you can also make italics using 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 lists.  Such elements are probably familiar to all Internet users.   They represent a listing of something (list) point by point.  Next to each item on the list there is usually a filled circle (it’s called marker list).


Lists are created using a tag 

                
                

                    
                    
 
                
 
				
				
				
				
    












    
	
    



        







            


        


        



    2024 wisemotors.ru.  How does this work.  Iron.  Mining.  Cryptocurrency.