You can use the i tag. HTML5: old tags for a new purpose
Everyone knows that tags , , , are presentational, and therefore, based on the “structure, presentation, behavior” paradigm, their use is not welcome. Much more familiar are the elements , , . 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 mess in our heads.
versus
If earlier all layout textbooks were full of phrases like “use instead of ”, and this was half true, today such a habit can play a cruel semantic joke. And the point is that the authors of HTML5 suggest using to emphasize passages of text in order to draw the attention of the reader, but without implying an increase in the significance of the text or intonation. The specification gives examples of how to mark up keywords in a document.
The frobonitor and barbinator components are fried.
And leads (the first paragraph of an article in journalism)
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.
Kittens "adopted" by pet rabbit
In its turn , as before, means increased importance of its content.
versus
From now on contains text that stands out from the general environment, but does not have an emotional coloring. In my opinion, it is logical to use where the typographic tradition suggests 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."
same means emphatic stress, emotional emphasis on a given passage of text. This is the case when in speech we highlight words with a voice (intonation, loudness, etc.)
Execute it is forbidden, pardon.
Read the contract carefully!
“Small print text” (information that is a legal formality, such as a business license or legal address, etc.) we usually mark up with an element with a class that sets a smaller font in visual user agents. Now in our arsenal there is a new old semantic element - .Holivar about
Before We also have an element
It can show two prices, one of which is crossed out. We mark it with an element
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 these elements, in addition toTo make our WEB page look more presentable, we divide the text into paragraphs and highlight the heading. HTML has 6 levels of document section headings, numbered from 1 to 6. Headings are declared by a pair of tags with numbers corresponding to the level, for example,
- the heading of the section of the first level, and - heading of the sixth level section. Headings differ from regular text in the size and width of the letters. The first level heading h1 is usually displayed in a very large font, while the sixth level heading h6 is displayed very small.Titles
Do not confuse the titles of sections of a document with the previously discussed title of the document, defined by the element
.We use the first sentence as the title of the text - To do this, it is enough to limit it with tags
and
.Insert tags into the text of the other.html file
and
so that they limit the first sentence of the text, and this piece of code takes the following form:Welcome to the SD company page!
Let's look at the acquired result.
Save the file by selecting the Notepad program menu command File - Save (File - Save).
The save 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 the disk. If you do not save the file after editing the HTML code, you will not see any configuration 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 in the browser window what the first level heading looks like.
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 refresh the image in the browser window.
When you finish the experiments, again restore the tags in the other.html file
.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 read significantly better if it has precise division into sections and subsections.
Heading alignment
By default, the title is aligned to the left side of the page. But it can also be right-aligned or centered. For right-alignment in a tag
the align="right" attribute is used, and align="center" for centering. The obvious indication of left-side alignment is also allowed - align="left".
Add to tag
the align="center" attribute to center the heading. This element should take the following form:
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 update the image in the browser before viewing.
How to make text bold in HTML
Now let's move on to the rest of the text. Increase its size and make the text bold italic. Paired tags are used to set bold style .
Paste in the file other.html opening and closing tags so that they limit the text Here you will learn ... 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 in element …. Modern browsers are capable of handling nested tags correctly. Therefore, you need to make sure that the nesting order is not violated. The browser will be hindered if nesting is broken. For example, the following would be incorrect: …. Nesting is a very fundamental part of the overall culture of writing HTML code.
How to make text underlined in HTML
With a couple of tags you can set the underlined style of a text piece delimited by these tags, and using a pair of tags - show text in teletype font.
It should be noted that recently the tag simplified and underlining is done using styles. equivalent . Yes, the new analogue looks more cumbersome, but unfortunately it is more true. The main thing in this favor is that the bulky variant is cross-browser, in other words, it is suitable for all browsers, when both Not all browsers support.
How to increment text in HTML
Now let's increase the font size of the text. This can be done in various ways.
tags increase the font size of the text enclosed between them.
Add tags to the beginning and end of the above piece of code, respectively and so that the 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.
Using tags you can reduce the text font size compared to the initial one.
Another method for specifying font size is with tags. with the size attribute. The values of this attribute are integers from 1 to 7. The value 1 corresponds to the smallest font size, and the value 7 corresponds to the largest.
Using instead of tags view tags , see how the text font size changes with different values of the size attribute - from 1 to 7.
You can also use numbers from 1 to 7 with a + (plus) or - (minus) sign as a value for the size attribute. In this case, the font size increases or decreases accordingly, in comparison with the initial one, for example, tags will increase the font size, compared to the current one, by one level. Check.
Set 5 as the value of the size attribute for the piece of text in question: . The HTML code for this piece should look like this:
Here you will learn about our activities, about the software products of our company and about the equipment that we produce..
In tags the color attribute can also be used to specify the font color delimited by text tags. The values of this attribute are the same as for the previously discussed attributes that describe the color of the background and text of the document.
By default, the paragraph with the text Here You'll Know... is left-aligned. Center it horizontally with tags
Stick tags
Note that we used tags to center the paragraph
Attention! For 2010 tags ,
=
=
There are also a huge number of other obsolete tags that cannot be described in this article, therefore it is better to immediately familiarize yourself with specialized WEB sites on this issue. But I posted the main ones here a little higher
Selection codes
The HTML language allows two approaches to font selection of text fragments. On the one hand, you can directly indicate that the font in a certain section of the text can be bold or italic, in other words, it is obvious to indicate the font style of the text, as we did in this experiment. On the other hand, it is possible to mark any piece of text as having some kind of logical style that is nicer than usual, leaving that style to be interpreted by the browser. In this way, the logical style shows the role of a text piece, for example, its great importance in comparison with ordinary text, or the fact that this piece is a quote. In your own work, you can use subsequent tags that define logical styles. Check how they work in different browsers.
- used to define a word. Text is displayed in italics by default.
- to highlight words and amplify. Text is displayed in italics by default.
- to highlight the titles of books, movies, performances, and so on, displayed in italics by default.
- for program code fragments. Shown on the display in a fixed-width font.
- used for text that the user enters from the keyboard. It may be displayed in different fonts in different browsers. Tag deprecated.
- serves to display program messages. Displayed in a fixed-width font. Tag deprecated.
- for particularly important fragments. Usually highlighted in bold.
- is used to indicate that a piece of text or a word is a character variable, in other words, text that can be replaced by different expressions. Displayed in italics by default. Tag deprecated.
The HTML 4.0 specification offers a more advanced method for specifying styles for text and other parts, using the CSS Cascading Style Sheets language. Style sheets are a huge achievement in the field of web design, expanding the ability to improve the appearance of pages. Style sheets make it easy to define line spacing, indentation, colors used for text and backgrounds, font sizes and styles, and so on. As the value of the style attribute, pairs of the form "property: value" are used. For example, in a piece of code describing a section heading,
the style="color: blue" attribute specifies that the color property is set to blue, i.e. the first-level heading text should be displayed in blue.
Style Alignment
Let's see how to use the cascading style sheet language to specify the style of a text piece that begins with the words Here you will learn ...
To specify the font weight, use the font-weight property with the values lighter (narrow), bold (bold), bolder (bold), for example, style="font-weight: bold".
To define italic style, use the font-style property with the value italic. Therefore, to make the text bold italic, you should find the style attribute like this: style="font-weight: bold; font-style: italic". Please note: characteristics can be placed in any order and must be separated by a semicolon.
If you need to specify the font size, then you should use the font-size property, the values of which can be specified in relative or absolute values. Relative values are percentages, and absolute values are points (pt), pixels (px), centimeters (cm), millimeters (mm). For example:
style="font-size: 200%"
style="font-size: 16pt"
style="font-size: 100px"
By specifying absolute rather than relative sizes, you deprive users looking at your pages of the ability to increase or decrease the font size using the browser menu command in accordance with their vision and monitor resolution. Fonts will only be displayed in the size you specified. Therefore, it is better to specify the font size as a percentage. In this case, the font size will be smaller or larger by the indicated percentage than when it is formatted using the default HTML tag.
To determine the horizontal text alignment method, the text-align property is used with the values left (to the left), right (to the right), center (in the center), justify (in width). In this way, to indicate that the text Here you will learn ... should be formatted in bold italic with a size of 150% of the initial and center aligned, its style should be found as follows:
style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"
We will apply this attribute in tags<р>, which allow you to present the text as a separate paragraph.
Edit the HTML element to include text Here you will find out... by removing the tags
<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Here you will learn about our activities, about the software products of our company and about the equipment that we produce.
You see, the HTML language allows for a variety of styling techniques. However, the CSS language is more desirable.
Other Alignment and Style Options
We have seen only one use of the style sheet language, where the style definition is placed specifically within the tag of the element you are describing.
This is done using the style attribute, which is used with most standard HTML tags. But there are other uses for CSS.
In standard HTML, without the introduction of style sheets, in order to assign certain parameters to any element, such as color, size, position on the page, and the like, you have to outline these characteristics for each element every time, even if 10 pages are required to be placed on one page. ki such parts that do not differ from one another. You have to insert the same piece of HTML code into the page 10 times, increasing the file size and download time from the network.
Stylesheets operate in a different, more comfortable and economical way. In order to assign certain features to any element, you must first outline this element and find this description as a style, and in the future, simply indicate that the element that you want to style appropriately should take on the characteristics of the style you described. Comfortable, isn't it?
Moreover, you can save the style description not in the text of your WEB page, but in a separate file - this will allow you to use the style description on any number of WEB pages. And another related advantage is the ability to change the design of any number of pages, correcting only the style description in one separate file.
In addition, the style sheet language allows you to work with the font design of pages at an even higher level than standard HTML.
Currently, the CSS language has a fairly large number of options for parts of HTML that it can control. By applying "safe", in other words compatible with most browsers CSS elements - font characteristics, colors of parts and backgrounds, text and border characteristics - you can significantly facilitate your work and make your WEB pages more attractive in terms of text design.
Description
Specifies the style of the font - regular, italic, or italic. When text is set to italic or italic, the browser looks to the system to find a suitable font. If the specified font is not found, the browser uses a special algorithm to simulate the desired type of text. The result and quality may be unsatisfactory, especially when printing a document.
Syntax
font-style: normal | italic | oblique | inherit
Values
normal Normal text style. italic Italic style. oblique An oblique style. Italics and italics, while similar, are not the same thing. Italic is a special font that imitates handwriting, while italic is formed by tilting ordinary characters to the right. inherit Inherits the value of the parent.HTML5 CSS2.1 IE Cr Op Sa Fx
Duis te feugifacilisi
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.
The result of this example is shown in Fig. one.
Rice. 1. Applying the font-style property
Object Model
document.getElementById("elementID ").style.fontStyle
Browsers
Internet Explorer up to version 7.0 does not support the inherit value.
Browsers always display text with a value of oblique as italic .
or study tags that format HTML text
Your attention is presented to one of the key and simplest lessons of the tutorial.
- HTML text is the main component of most Internet pages.
- By keywords in the body of the HTML page users can find your site.
- HTML text can be any size and color you want. You can also define the type of font and its volume.
- HTML font size usually set in pixels.
- HTML text formatting widespread, formatting tags are used.
See below tags that format HTML text:
- tags → bold HTML text(bold font).
- tags → bold HTML text(bold font).
- tags → monospaced HTML text(monospace font).
- tags
- tags → monospaced HTML text(monospace font).
- tags → HTML text, the size is larger than usual (large font).
- tags → HTML text, the size is smaller than usual (small print).
- tags → oblique HTML text(Italic font).
- tags → oblique HTML text(Italic font).
- tags → oblique HTML text(Italic font).
- tags → underlined HTML text(underlined font).
- tags
- tags → HTML text(font) in subscript.
- tags → HTML text(font) in superscript.
HTML text formatting: strikethrough, underlined text
Result: ... monospace font
Result: ... font size larger than normal
Result: ... italic font
Result: strikethrough text (strikethrough font)
Result: superscript
C The formatting methods presented above should only be used for small sections of text. Enjoy css if you want to set a specific font for the whole page, or for several lines, for example.
Hello dear blog readers! This article will talk about text formatting tags. Prominent examples are making text bold or italic. We will also consider the influence of some tags on the internal optimization of the site and the rules for writing them. You can read about that in the article below. 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 a part of the text (lines, individual fragments or words), and the latter are . The formatting tags we'll cover in this article are predominantly inline.
Rules and order of writing tags
You already know what opening and closing tags are. If not, then read the article at the very beginning of this material. In short, there are two types of tags: single (for example, a line break) and container (paired). 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: Selection
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 bold (in the example with the tag ). But there are cases when you need to select a certain fragment both in bold and in 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 which order you use them. Therefore, writing the text with tags like this:
Selection
or like this:
Selection
You still get Selection 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.
Making text bold and italic - tags , , and
The most popular text formatting tags - highlighting it bold and in italics. Usually they are used to give importance to any fragment. The first case serves to highlight 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 visible against the background of body text than bold text.Let's start with making text bold. There are two tags used for this action − and . There is no difference in appearance. Although, given that each browser can interpret each element differently, you should be able to see some differences. This is what the text in the tags looks like and in the form already processed by the browser:
Text in strong tags
Text in b tags
And here is what these two lines look like in the source code of the page:
Text in strong tags 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
And here is the source code:
Text in em tags Text in tags I
So, the considered selection tags in bold and italics do not actually differ, but why then do we need, for example, the tag if there ? After all, the latter contains only one character (not counting the brackets) and, therefore, is easier to write. And the thing is that tags and affect . If you surround keywords with these tags, this will have a positive effect on site promotion. The main thing is not to overdo it - the text should have 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 on internal optimization they still have less effect than and .
Highlight text slash tags − , and
Now let's look at a few tags that use a stroke in text decoration. The most famous text editor you know is tag
or underscore. This tag does not affect the ranking (as far as I know), but it will help to highlight some text and focus on it. I gave an example of using this tag a little higher. Two more similar tags - and . Both perform the function of strikethrough 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 and add a new one; if you are going to write something that deviates from the topic of the material; something that does not meet 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 is more convenient to write, and secondly, there will be less HTML code on your page, and search engines love it.
Tag and attributes - text font settings
Now consider a tag that is not used without attributes. With 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, consider the same tag . For him there is everything three attributes:
- face- the font itself. For example, Arial, Courier or Verdana. You can list a few, 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 is an attribute that specifies the size of the text. It can be expressed both in arbitrary units and in pixels;
- color- text color. This attribute can be used both in HTML color codes and in verbal ones. The former look like #FFFFFF (where F is any number or letter from A to F), while the latter are written in simple words (for example, red is 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 5px in size.And here is what you will see after processing the written code: 
Block Text Design Elements - Headings -, paragraph
, paragraph
Finally, we will look at block elements, which are used in almost every document. These are heading and paragraph tags. Let's consider the first. Headings come in 6 types and each has its own tag. Each species has only its own serial number and is recorded using tags.
, ,..., . Here's what all the headers look like when processed:
. Here's what all the headers look like when processed:
The number after the title word corresponds to the number in the tag
Now let's talk about the paragraph selection tag
The function of this tag is to separate text between other similar text with an empty line. If you look at the source code of any document, you can see the following:
The green rectangles contain one paragraph, the red rectangles another. And here is how this code looks 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 than I have described in this article. It’s just that some need to be told quite a lot, as a result of which separate articles with a full review will be devoted to them.!
