> >

HTML highlighting: Highlighting text with bold, italics and color. HTML5: Old Tags with a New Purpose Block

To make our WEB page look more presentable, we will divide the text into paragraphs and highlight the title. HTML has 6 levels of document section headings, numbered 1 to 6. Headings are declared by a pair of tags with numbers corresponding to the level, for example,

- the title of the first level section, and
- the title of the sixth level section. Titles 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 usually displayed in a very small font.

Titles

Do not confuse document section titles with the previously discussed document title, defined by the element .

We use the first sentence as the title of the text - To do this, it’s 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 menu command File - Save.

The saving 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 disk. If you do not save the file after editing the HTML code, you will not see any configurations 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 what the first level header looks like in your browser window.

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 update the image in the browser window.

When you finish the experiments, restore the tags in the other.html file again

.

Using the 6 levels of headings that HTML provides at your disposal, you can simply readable document with an intuitively clear structure. Remember that your document will always be much better read if it is clearly divided into sections and subsections.

Heading Alignment

By default, the title is aligned to the left edge of the page. But it can also be aligned to the right or centered. For right alignment in a tag

The attribute align="right" is used, and for centering - align="center". An obvious indication of left-side alignment is also allowed - align="left".

Add to tag

align="center" attribute to center the title. This element should look like this:

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 refresh the image in the browser before viewing.

How to make text highlighted (bold) in HTML

Now let's move on to the rest of the text. Let's increase its size and make the text bold italic. To set bold style, paired tags are used .

Insert the opening one in the other.html file and closing tags so that they limit the text. Here you will find out... 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, software products about our company and about the equipment we produce

Markup elements can be nested, as in this structure, where the element … nested within an element …. Modern browsers are able to correctly handle nested tags. Therefore, you need to ensure that the order of investment is not violated. The browser will be difficult to operate if the nesting is broken. For example, this entry would be incorrect: …. Compliance with nesting is a very important part of the general culture of writing HTML code.

How to make text underlined in HTML

Using a couple of tags you can set the underlined style of a text piece limited by these tags, and using a pair of tags - show text in teletype font.

It should be noted that recently the tag simplified and emphasized using styles. equivalent . Yes new analogue looks more cumbersome, but unfortunately it is more accurate. The main thing in favor of this is that the bulky version is cross-browser, in other words, suitable for all browsers, when Not all browsers support it.

How to increment text in HTML

Now let's increase the text font size. This can be done using various methods.

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 of specifying font size is using tags with the size attribute. Integers from 1 to 7 are used as values ​​for this attribute. In this case, value 1 corresponds to the smallest font size, and value 7 corresponds to the largest.

Using instead of tags view tags , see how the text font size changes for 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 the value of the size attribute. In this case, the font size increases or decreases accordingly, compared to the initial one, for example, tags The font size will increase by one level compared to the current one. Check it out.

Set 5 as the value of the size attribute for the piece of text in question: . The HTML code for this piece should be 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 color of the font limited by text tags. The meanings 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 will find out... is aligned to the left. Center it horizontally using tags

. You can also align a paragraph to the right edge of the page using tags or left - using tags .

Insert tags

limiting them to the designated paragraph.

Please note that we used tags to center the paragraph

, unlike the align="center" attribute that we used in tags

.

Attention! For 2010 tags ,

, , are considered obsolete and therefore it is necessary to use analogues from the styles. This does not mean that you cannot use them, but if you are able, try to get rid of them.

=

=

=

=

=

There are also a huge number of other outdated tags that cannot be outlined in this article, so it is better to immediately familiarize yourself with specialized WEB sites on this issue. But I posted the main ones here a little higher

Allocation codes

The HTML language allows two approaches to font selection of text fragments. On the one hand, you can directly indicate that the font on a certain section of the text can be bold or italic; in other words, you can clearly indicate the font style of the text, as we did in this experiment. On the other hand, you can mark any piece of text as having some logical style that is different from the usual one, leaving the interpretation of this style to the browser. Thus, the logical style shows the role of a text piece, for example, its enormous significance in comparison with ordinary text, or the fact that this piece is a quotation. 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 strengthen them. Text is displayed in italics by default.

- to highlight the titles of books, films, performances, and so on, it is 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. May appear in different fonts in different browsers. Tag is obsolete.

- serves to display program messages. Displayed in a fixed width font. Tag is obsolete.

- for particularly important fragments. Usually highlighted in bold.

- used to indicate that a piece of text or a word is a symbolic variable, in other words, text that can be replaced by different expressions. Displayed in italics by default. Tag is obsolete.

The HTML 4.0 specification offers a more advanced method of specifying styles for text and other parts - using a special language called CSS (Cascading Style Sheets). 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, padding, colors used for text and background, font size and style, and so on. Most parts of HTML can be styled using a style attribute, which is placed inside an element's opening tag. Pairs of the form “property: value” are used as the value of the style attribute. For example, in a piece of code describing the section header,

the style="color: blue" attribute specifies that the color property has the value blue, in other words, the first level heading text should be displayed in blue.

Alignment with styles

Let's see how to use the Cascading Style Sheets language to specify the style of a text piece that begins with the words Here you will learn...

To specify the font thickness, use the font-weight property with the values ​​lighter (narrow), bold (semi-bold), bolder (bold), for example, style="font-weight: bold".

To determine the italic style, use the font-style property with the value italic. Therefore, to give the text a bold italic style, 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, you should use the font-size property, the values ​​of which can be specified in relative or absolute values. Relative values ​​are percentages, and points (pt), pixels (px), centimeters (cm), millimeters (mm) are used as absolute values. Eg:

style="font-size: 200%"

style="font-size: 16pt"

style="font-size: 100px"

By specifying absolute rather than relative sizes, you deprive users viewing your pages of the ability to increase or decrease font size using the browser menu command in accordance with their vision and monitor resolution. Fonts will only be displayed in the size you specify. 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 number of percent than when it was designed with HTML help default tag.

To determine the horizontal text alignment method, use the text-align property with the values ​​left (to the left), right (to the right), center (center), justify (width). Thus, to indicate that the text Here you will learn... should be formatted in bold italic style with a size of 150% of the original and aligned to the center, its style should be found as follows:

style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"

We will use this attribute in tags<р>, which allow you to present text as a separate paragraph.

Edit HTML element, including text Here you will find out... by removing tags

, , , and inserting tags<р>Andwith the style attribute so that this element takes the following form:

<р 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, HTML allows for a variety of styling techniques. At the same time, the use of the cascading table language CSS styles is more desirable.

Other alignment and styling options

We've only seen one use case for stylesheet language, where the style definition is placed specifically within the tag of the element you're 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 introducing 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 must be placed on one page. ki of such parts that do not differ from one another. You have to insert the same piece of HTML code into a page tens of times, increasing the file size and the time it takes to download it from the Internet.

Style sheets work in a different, more comfortable and economical way. To assign certain characteristics to an element, you must outline this element once and find this description as a style, and then simply indicate that the element that you want to design appropriately must 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 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 language of style sheets allows you to work with the font design of pages even more the highest level than standard HTML.

Currently, the CSS language has a fairly large number of parameters for parts of HTML that it can control. By using “safe”, in other words compatible with the largest number browsers CSS elements- font characteristics, colors of parts and background, characteristics of text and borders - you can significantly facilitate your work and make your WEB pages more attractive in terms of text design.

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 optimization site and 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 to remember 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

And here source:

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 ? After all, the latter contains only one character (not counting brackets) 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 both 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!


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 is stored inside this file HTML pages along with 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 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 specifies the version <a href="https://zhumor.ru/en/internet/kakim-terminom-nazyvaetsya-parnyi-teg-yazyka-html-ponyatie-tega-html.html">HTML language</a>, on 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.  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.  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


Except paragraphs important on the page have 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 individual pieces of text bold.


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