Let's continue learning HTML. In this lesson we will look at HTML page headers, what headers there are, how to use them correctly and when they can be used. We will also analyze the paragraphs so that you can already fill your page with text, but, most importantly, do it correctly.

If you haven't read the first article, you can find it here:

• Lesson 1. What is HTML?

Theory and practice - Paragraphs and headings of HTML pages

Today we'll talk about paragraphs and headings. Let's start with something simple - with paragraphs and where they are used.

Paragraphs per page

I will now give an example of code in which the paragraph tag will be present.

You already remember the basic structure from the first lesson. There they looked at the basics and looked at what HTML is. Therefore, let's focus our attention on what is between the tags .

When you write any text on a page, be it just a paragraph or a small explanatory line under an image, you need to place this text inside a tag.

In subsequent lessons you will see the process of formatting these paragraphs. What you should understand by now is that you cannot place a tag on a page without any tag. Because in the future it will be difficult to apply any individual styles specifically for this section of text.

Try writing a few paragraphs. Put some paragraphs in the tag, and leave others without it. And you will immediately see the difference. Because if you write a paragraph inside this tag, it will immediately have indents. Now let's move on to the HTML page headers.

HTML headers on the page

There is semantics in an HTML document. I'm not talking about HTML5 technology and its new tags. Here we will only look at the most basic ones so that you can quickly master the basics of HTML. Semantics means that you don’t need to create headings, paragraphs, tables, and so on using the same tag. This can be done, but HTML technology is more varied and for different situations appropriate tags are provided. And you just need to master the basic tags in order to freely work with HTML code.

I wrote this short introduction to the fact that for paragraphs you need to use the tag you already know. But for headings, tags that begin with the English letter “H” are used.

Here is the entire list of headers you can use:

Some of these tags are used much more often. These are tags such as h1, h2 or h3. If anyone is already familiar with CSS, then they understand that the HTML header of an h3 page can be styled in such a way that it looks similar to an h1 or h2. But the meanings they carry, at least for SEO optimization, are radically different. As a rule, these numbers, inside tags, should be understood as the level of importance of a particular HTML header. Therefore, it is necessary to carefully study these elements and then search engines people will notice your articles.

Before we get to the CSS, you'll see the default header styles in browsers. If you insert these tags one by one and write some text inside, you will see the following:

For search robots The use of headings on the page is also important. There are certain rules that you can read in our book - PDF book on website promotion.

After we have studied everything, we immediately go into the code and try to write everything ourselves. This is the fastest way to master any programming language. But HTML technology is much easier than any programming language, so anyone can figure it out. This way you will remember the tags better.

Video lesson - HTML page title? (practice)

A visual video showing an example of working with these tags:

Homework

D/Z: As an example, write a short text that will consist of 5-7 paragraphs and 2-3 different headings.

Practice more paragraphs and HTML page titles!

www.sitehere.ru

How to make a table in HTML

Any table contains rows and columns. They, in turn, can contain text and an image.

To add a table to a page, use the tag

. This is the main and main container in which the table elements (rows and columns) are placed. And this container needs to be closed -.

Rows and columns are specified using tags And , while instead of you can safely use . Difference from is that the browser displays the text in the cell as bold, and also aligns it to the center of the cell - i.e. can be used in table headings without resorting to additional formatting. Otherwise, there is no difference between them; you can use either one.

Table rows ( ) must be placed strictly between

. And the table columns ( ) in turn are placed strictly between the tags .

Let's create a practical table that will consist of one row and four columns. We need to mark the beginning of the table (

), start of line ( ), four cells ( ), end of table (

), end of line (

).

Result:

Now let's use the tag so as not to return to this again.

Result:

I set the table width to 400 and as you can see, the first and third cells are bold and center aligned. The rest are on the left edge. I recommend that you always spend enough time formatting your code to avoid getting confused. In a small table this may not play a big role, but in a large one...

Let's talk a little more about width since I mentioned it. The width of the table is specified by the width attribute, the height - height. In this way, you can change not only the width and height of the table, but also the sizes of the cells (they all must fit into the table, otherwise the browser will not understand what you want from it).

These values ​​(width and height) are specified in pixels, percentage. You can leave it like this, not write anything, the browser will think that you were too lazy to write “px” and will consider the number to be pixels.

Well, if you want to align the contents of one or more table cells, use the align attribute with the values ​​left, center, right. This is horizontal alignment, but there is also vertical alignment and it has its own separate attribute - valign, which can take the following values: baseline (vertical alignment exactly along the baseline), bottom (along the bottom edge), middle (cell values ​​will be aligned vertically in the middle), top (along the top edge). By default, browsers align cells centered (middle).

Enlarge the frame (borders) of the table and change its color

You probably noticed that I have already shown you how you can work with the frame and width of the table. In general, by default, tables are always displayed in the browser without a frame, and this is not always convenient. That's why:

Agree, somehow not very good. But this is not a problem for those who are already familiar with the HTML border attribute, which I used in the examples at the beginning of the post.

We add just 1 attribute and things get better:

It's like Excel! Imagine if there were no lines (grid) between cells? Well, it's terrible. But what happens if you set border to 10.

As you can see, border only affects the outer border and border of the table, changing the width of the outer border, but leaving the borders between table cells the same.

Let's change the color of this frame, because there is also an attribute for this - bordercolor. Let's set its value to “d3d3d3”. Result:

How to indent a table

Indents in the table are also needed to increase readability, as are cell borders. To create indents we need the “cellspacing” attribute. I'll continue to work with our 4x4 table and apply this attribute to it. I’ll update the code for you (I’m providing only one line so as not to clutter the post):

Result:

These were the indentations on the outside of the cells. But there is a similar attribute for setting padding inside cells - cellpadding. Now I will also make it equal to 10 and you will see how the distance from the contents of the cell to its borders has increased (I had to make the number of cells smaller so that the table does not grow excessively). Code:

Result:

Now let’s remove “cellspacing” and leave only “cellpadding”. Result:

So we figured out how to create indents in the table and manage them. Great! If you are interested in how to do a line break, then it is written here.

How to correctly merge cells in a table

There are also special attributes for merging cells in your table. These are "colspan" and "rowspan". The first (colspan) combines cells by columns (horizontal), the second (rowspan) - by rows or vertically. Let's combine something in our table.

Be careful here! When merging cells, you need to reduce their number by the number (minus one) that you specify in the attribute parameters. If you create a table in HTML, merging cells without deleting unnecessary ones, then the site will work. We combine two - we delete one. We combine three - we remove two. And so on.

When merging cells in columns or columns, one cell must be deleted! And do this as many times as you combine cells. Now I’ll show you with an example.

When merging cells in columns or columns, one cell must be deleted! And do this as many times as you combine cells.

Now I’ll show you with an example. Here is our current table:

Let's combine cells numbered "1 and 2", "5 and 9", "4, 8, 12", "6 and 7". Look how cool it turned out, I didn’t expect it myself!

The principle of unification is this.

When horizontally merging cells number 1 and 2, you need to write “colspan=”2″” in the first one, place the contents of the second in the first (we are merging) and delete the second cell (or hide it from HTML as I did - I’ll show you later.)

When vertically merging cells number 4, 8, 12, you need to write “rowspan=”2″” in the first cell (number 4), and delete the contents of the rest, first placing them in the merged cell.

This is the code I ended up with. I've hidden the cells for clarity (to make it easier for you), but you can delete them.

I hope I explained it clearly and gave a good example.

How to make a table title

To give a table a title, use tags after the beginning of the table (

), but before the start of the tag . Here's what happens:

Well, a small HTML hack for those who need to place the table title under the table itself. Use the align attribute with the value bottom like this:

And then the table header will move below the table.

So, we've covered almost everything, except... The background!

How to make a beautiful background for a cell or entire table

HTML allows you to set the color not only for the entire background of the table, but also for each separate cell(if there is such a need). Sets the background color of a table or cell to the "bgcolor" attribute.

Let me first set the background for the entire table. This will be the color “”lightgreen”” (in general, you can set it like this - “”#90EE90″”). This is how my table now starts:

Result:

Wow, the background color of the cells has become very “lightgreen”. Now I’ll paint one of the table cells back white, assigning it the same attribute, only with a different color:

Tada! Result:

I think it's cool! If I participated in a competition for creative tables (or teaching HTML to preschoolers), I would definitely win.

I also wanted to write how to insert a picture as a table background in HTML, but I already mentioned this in my other article at the link above.

Good luck and success in learning HTML.

blogwork.ru

Layout and center alignment of website pages is a creative endeavor and often causes difficulties for beginners. So let's see how to do it. Let's say we want to make a page with the following structure:

Our page consists of four blocks: header, menu, content and footer. To align to the center of the page, we will place these four blocks in one main block: Using this structure as an example, we will consider several options.

Layout and centering of a rubber site

When laying out a rubber website, the main unit of measurement used is %, because the site should stretch across the width and occupy all the free space.

Therefore, the width of the header and footer blocks will be 100% of the screen width. Let the width of the “menu” block be 30%, and the “content” block should be located next to the “menu” block, i.e. it must have a left margin (margin-left) with a width equal to the width of the “menu” block, i.e. thirty%.

In order for the “menu” and “content” blocks to be located side by side, let’s make the “menu” block floating and push it to the left edge. We will also set the background colors for our blocks. Now let's write all this in the style sheet (on the style.css page)

The height of the blocks was set conditionally so that the result was visible. Look at our page in your browser:

If you change the size of the browser window, the width of all blocks will change. This is not always convenient, because... When the menu block is stretched, empty space appears. Therefore, the width of the “menu” block is often fixed, so let’s do the same. To do this, we replace the values ​​of the corresponding properties in the style sheet: Now our page stretches more naturally. With fluid layout, pages occupy the entire width of the screen, so page alignment is not required.

But if you want, you can make your page have equal padding on the left and right of the screen. To do this, we need to add a style to the “main” block, which is a container for all other blocks: Now our page looks like this:

Layout and centering of the site, fixed width

In this case, we will have to set fixed sizes for our blocks: Currently our page is pressed to the left edge of the screen.

In this case, center alignment of site pages can be done as follows. Let's remember that our page has a “body” tag, which can also be given a width and some padding.

Let’s do this: give the “body” tag a width of 800 pixels (like the “main” block) and a padding-left of 50%. Then the entire contents of the “main” block will be displayed on the right side of the screen (i.e. from the middle to the right):

In order for our “main” block to be located in the middle of the screen, its middle must coincide with the middle of the “body” tag. Those. you need to move the “main” block to the left by half its size. The width of the “main” block is 800 pixels, which means you need to set its property “margin-left:-400px”. Yes, this property can take negative values, then the left margin is reduced (i.e. shifted to the left). And this is exactly what we need.

Now the style sheet looks like this: And our page in the browser is located exactly in the middle:

We looked at two options for centering site pages; in fact, they are not dogma. You can experiment and come up with your own version, just check how it works in different browsers. Unfortunately, what displays well in FireFox or Opera may display completely incomprehensibly in IE and vice versa. And we must remember this.

Good luck to you in your creative quest!

www.site-do.ru

How to center text in html?

There are two options in HTML that do not involve the use of CSS.

1. 1.Tag
   A very easy to use tag that centers all the inline elements it contains, namely:
   • text,
   • Pictures,
   • links,
   • and also tags , , , and some others.
     2.Using the HTML attribute align with the value center.
     We need to add this attribute inside the block tag, which contains the text that we need to align to the center.
     This could be a tag

     ,

     ,

     …

     and some others.

     The align attribute also has other meanings:

     • align='»left'— text alignment left
     • align='right'– right alignment
     • align='justify'– text alignment to width

     How to center text using CSS?

     Personally, I think that using HTML tags and attributes to center text is not the best solution. If you only need to align text in one or two places and don't want to bother with CSS, you can get by with HTML, but for center alignment in multiple places on the page, it's better to use CSS.

     For this we have a special property text-align, which also has several meanings:

     • text-align: center;- for center alignment
     • text-align: left;- on the left side
     • text-align: right;- on the right side
     • text-align: justify;— according to the width of the block or page.

     In order to apply it to our text, you can use one of the proposed options:

     1. 1. Assign a CSS class to the block tag (heading, form, paragraph or other block element):

        And then in the CSS file of your site we write:

        Instead of block-text can be any other class name.

        If you need to center text alignment for all paragraphs or headings on the site at once, then it is not necessary to write this CSS property for each one. It is enough to set or define the class or identifier of the block within which these paragraphs or headings are located, and then add the following entry in the CSS file:

        In this case, centered text alignment will be applied to all tags

        Which are inside a tag with the block class:

        To align headings inside a block with the block class, the notation will be slightly different:

     2. 2.You can add the necessary CSS properties in the tag itself using the style attribute:

        This method, as well as the attribute align or tag center, is convenient only in cases where alignment needs to be done in one or more places. I do not recommend using it for mass text alignment.

     That's all I have! Thank you for visiting my site! I will be very glad to see your comments! Good luck and prosperity to you!

     Sincerely, Yulia Gusar

     impuls-web.ru

     Attributes in HTML

     What is an attribute? An attribute is a parameter that gives tags specific information. There can be a lot of these parameters. For example, using attributes we can align the text of a paragraph, set the font style and size, set the required indents, etc. Attributes are written inside tags, followed by an equal sign, then the attribute values ​​are indicated in double quotes. Attributes are separated from each other by a semicolon.

     Examples of working with attributes

     Let's look at working with attributes using examples. The simplest example is let's take a paragraph tag

     With the "align" attribute. Let's write:

     Example of paragraph left alignment

     The "align" attribute tells the browser to align the given paragraph to the left edge of the screen.

     The following attributes can also be applied to the paragraph tag:

     • align="center" – alignment to the center of the screen;
     • align=”right” – right alignment;
     • align="justify" - aligns text to the width of the screen.

     Now let's complicate the task - create an HTML page using several different attributes. An example of such a page would have the following code:

     Attributes in HTML

     The "bgcolor" color attribute allows us to set the background color of the page. The “center” and “justify” attributes align the text within itself, centered and justified, respectively.

     Headings in HTML

     with index. There are only six such indices - from 1 to 6, they indicate the size of the header (

     is the biggest headline,

     - the smallest). For example, let's create a web page that has several headings. The code for this page will look like:

     Attributes in HTML

     What is an attribute? An attribute is a parameter that gives tags specific information. There can be an unlimited number of these parameters.

     Headings in HTML

     In order to create a title on a page, a special tag is used with index. There are only six such indexes - from 1 to 6, they indicate the size of the title...

     In this example, we have two headings - the first level heading has no attributes, the second level heading has a center alignment attribute. After the headings there are paragraphs, which also have their own attributes.

     This is the principle used to work with attributes and headers in HTML. There is nothing complicated here. You should definitely practice with your own examples in order to consolidate the information received in this lesson.

     siteblogger.ru

     Greetings to all. Have you noticed that when designing, the blog title, post title, and gadget titles are not centered.

     Perhaps someone is happy with this option. But if you want to align them, then this post is for you. Usually we create our own unique blog header using Photoshop or another editor. Here, of course, the name is located exactly where we want to see it. But not everyone initially knows how to do this and are content only with the settings that are offered to us. As a result, the blog name is shifted to the left.

     Let's see how you can use CSS in your blog template to fix this. Let's place all the headings strictly in the center and add a little uniqueness to them.

     As usual, go to the template tab and be sure to make a backup copy. If something goes wrong, you can download the template back from your computer. It would be better if for now you do all your experiments on the test blog. Create another blog for this based on the same template.

     How to center a blog title.
     
     Template tab - edit HTML. At the very top of the template, click on the black marker (arrow) on the left.

     And here all the CSS codes were revealed to us. We go down slowly and find the line .Header h1 (
     
     

     Immediately after the brackets we write the value

     text-align:center;

     Thus, the name of the blog will be located strictly in the center. Click view template to see the result. Everything worked out. Click save.

     But to add some variety to the design, let's look at a few more CSS styles that can be added to these brackets. Whether you need it or not, decide for yourself. There are a lot of options here. Change color values.

     background:#e9967a; - background color.
     or background:url (http://www.fonstola.ru/large/201310/134392.jpg); picture instead of background.
     height:50px; — the width of the title block.
     text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); — set a shadow for the text
     border-radius: 15px; - rounding corners.
     -moz-box-shadow:0 0 30px #a28b53 inset;
     box-shadow:0 0 30px #a28b53 inset;
     -webkit-box-shadow:0 0 30px #a28b53 inset;

     Highlighted in blue is the inner shadow of the title field. Just be careful. If you change color, then only this #e9967a(hash and six-digit number). Colon, parentheses, dash, semicolon - everything is very important in the code.

     How to center the gadget title in the sidebar.

     We also go down below and find the following line
     
     .sidebar .widget h2 (
     
     

     In brackets we write text-align: center; However, in this case, it is necessary to set the width, font size, and indents. Here I used an image instead of a background and set a shadow for the text and block.

     background:url(http://www.fonstola.ru/large/201310/134392.jpg);background or image
     height:20px;
     width: 200px;
     border-radius: 13px;
     margin-left: 0px;
     padding-top:0px; / distance from the edge of the frame /
     font-size: 16px; /font size/
     text-align: center; /text location/
     text-shadow: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10); /shadow for text/
     box-shadow: 0 4px 6px rgba(0, 0, 0, .2); /shadow for block/
     

     www.shpargalochki.ru

     Vertical and horizontal centering in CSS level 3

     We can extend both methods to center horizontally and vertically at the same time.

     A side effect of absolute paragraph positioning is that the paragraph becomes exactly as wide as it should be (unless we explicitly specify a width). In the example below, this is exactly what we want: we center a paragraph of one word (“Center!”), so that the width of the paragraph is equal to the width of that word.

     The yellow background clearly demonstrates that the paragraph is indeed the same width as its content. We assume the markup remains the same:

     Center!

     In terms of vertical centering, this style sheet is similar to the one in the previous example. But now we also move the element halfway through the container using the 'left: 50%' rule and at the same time shift it left by half its own width in the 'translate' transform:

     Div.container4 ( height: 10em; position: relative ) div.container4 p ( margin: 0; background: yellow; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate( -50%, -50%) }

     The following example explains why the 'margin-right: -50%' rule is required.

     When the CSS formatter supports 'flex', things get even easier:

     with this style sheet:

     Div.container6 ( height: 10em; display: flex; align-items: center; justify-content: center) div.container6 p ( margin: 0 )

     those. the only addition is 'justify-content: center'. Just as 'align-items' defines the vertical alignment of a container's content, 'justify-content' defines the horizontal alignment in the same way. (In reality, everything is somewhat more complicated, as their names suggest, but in a simple case, this is how it works.) A side effect of using the 'flex' property is that the child element, in our case P, automatically becomes as small as possible.

     To select the desired input elements with the “checkbox” type, you can use the selector ':checkbox'. Example:

     Where handler— a handler that is called when the change event occurs

     Working with the Callbacks Object in jQuery: Using a List of Callback Functions

     The Callbacks object in jQuery allows you to create something like a list of callbacks that will be executed when the fire() utility method is called. Moreover, when calling the fire() method, it is possible to pass some argument that will be used by each callback function. We will now look at how this works using several examples.

     Catching the loss of focus. blur() method in jQuery

     The blur() method in jQuery allows you to assign a handler to a specific element on the page that will be called as soon as focus is lost from that element. Initially, this event applied primarily to form elements - input tags, but recent versions of browsers are able to handle this event for almost all types of DOM elements.

     Inserts content before the content of the selected object. before() method in jQuery

     The before() method in jQuery allows you to insert specific content or objects before the content of each of a set of specified objects.
     The method syntax is simple:

1	.before(content, )

Second variation:

1	.before(function)

jQuery. attr() method. How to get or add an attribute to an element

jQuery makes it very easy to access the attributes of the desired element, retrieving its value or, conversely, setting and changing it. For such manipulations, the attr() method is used.

The .appendTo() method in jQuery. Adding Content to the End of Elements

The appendTo() method essentially performs the same task as the append() method. The difference, by and large, is only in the syntax. If for append() we specify the desired selector, adding this method to it, where in brackets we indicate what exactly needs to be added to the end of the contents of the specified object, then for appendTo() what needs to be added is no longer in brackets as a method parameter, and immediately before the method itself as the object on which appendTo() is called. The difference will be better understood with the following example.

jQuery .animate() Method: Animate Images, Text, and Anything

The .animate() method allows you to create animation effects using the CSS properties of the objects themselves. The method has two variations with different numbers of passed parameters

Converting videos using Movavi

Lately, in order to make good use of the time spent traveling to and from work, I’ve been trying to download more useful videos to my phone in advance. The phone is on Android, and most recently I encountered a problem when the smartphone for some reason refused to play video in AVI format. Whether the player is weak, or the specifics of the operating system, I don’t know. However, it didn’t take long to solve the problem: I found a fairly functional video converter on the Internet that can not only convert it from one format to another, but also prepare a file taking into account the characteristics of your device. Here is a brief description of how to use this wonderful program.

This lesson is devoted to attributes and headers in HTML, which are essential elements of any HTML document. This is why it is so important to master this issue. This lesson explains what an attribute is and provides examples of working with attributes. The lesson also discusses headers used in HTML and provides examples of headers.

Attributes in HTML

What is an attribute? An attribute is a parameter that gives tags specific information. There can be a lot of these parameters. For example, using attributes we can align the text of a paragraph, set the font style and size, set the required indents, etc. Attributes are written inside tags, followed by an equal sign, then the attribute values ​​are indicated in double quotes. Attributes are separated from each other by a semicolon.

Examples of working with attributes

Let's look at working with attributes using examples. The simplest example is let's take a paragraph tag

With the "align" attribute. Let's write:

Example of paragraph left alignment

The "align" attribute tells the browser to align the given paragraph to the left edge of the screen.

The following attributes can also be applied to the paragraph tag:

• align="center" – alignment to the center of the screen;
• align="right" – right alignment;
• align="justify" - aligns text to the width of the screen.

Now let's complicate the task - create an HTML page using several different attributes. An example of such a page would have the following code:

Attributes in HTML

The "bgcolor" color attribute allows us to set the background color of the page. The “center” and “justify” attributes align the text within itself, centered and justified, respectively.

Headings in HTML

with index. There are only six such indices - from 1 to 6, they indicate the size of the header (

is the biggest headline,

- the smallest). For example, let's create a web page that has several headings. The code for this page will look like:

Attributes in HTML

What is an attribute? An attribute is a parameter that gives tags specific information. There can be an unlimited number of these parameters.

Headings in HTML

In order to create a title on a page, a special tag is used with index. There are only six such indexes - from 1 to 6, they indicate the size of the title...

In this example, we have two headings - the first level heading has no attributes, the second level heading has a center alignment attribute. After the headings there are paragraphs, which also have their own attributes.

This is the principle used to work with attributes and headers in HTML. There is nothing complicated here. You should definitely practice with your own examples in order to consolidate the information received in this lesson.

Let's continue learning HTML. In this lesson we will look at HTML page headers, what headers there are, how to use them correctly and when they can be used. We will also analyze the paragraphs so that you can already fill your page with text, but, most importantly, do it correctly.

If you haven't read the first article, you can find it here:

Since you are in this lesson, you want to continue studying the topic of website building. And with the help of these lessons you will have a basic understanding of what it is.

What if you need more knowledge and want to maybe even work in this field? It is better to find specialized courses. There are not many good ones in RuNet that train Front-end developers. I liked the training program that Netology has in the ““ course. Also, Skillbox has a good program and a course ““.

If you study web development, do it with professionals.

Theory and practice - Paragraphs and headings of HTML pages

Today we'll talk about paragraphs and headings. Let's start with something simple - with paragraphs and where they are used.

Paragraphs per page

I will now give an example of code in which the paragraph tag will be present.

You already remember the basic structure from the first lesson. There they looked at the basics and looked at what HTML is. Therefore, let's focus our attention on what is between the tags .

When you write any text on a page, be it just a paragraph or a small explanatory line under an image, you need to place this text inside a tag.

In subsequent lessons you will see the process of formatting these paragraphs. What you should understand by now is that you cannot place a tag on a page without any tag. Because in the future it will be difficult to apply any individual styles specifically for this section of text.

Try writing a few paragraphs. Put some paragraphs in the tag, and leave others without it. And you will immediately see the difference. Because if you write a paragraph inside this tag, it will immediately have indents. Now let's move on to the HTML page headers.

HTML headers on the page

There is semantics in an HTML document. I'm not talking about HTML5 technology and its new tags. Here we will only look at the most basic ones so that you can quickly master the basics of HTML. Semantics means that you don’t need to create headings, paragraphs, tables, and so on using the same tag. This can be done, but HTML technology is more varied and appropriate tags are provided for different situations. And you just need to master the basic tags in order to freely work with HTML code.

I wrote this short introduction to the fact that for paragraphs you need to use the tag you already know. But for headings, tags that begin with the English letter “H” are used.

Here is the entire list of headers you can use:

Some of these tags are used much more often. These are tags such as h1, h2 or h3. If anyone is already familiar with CSS, then they understand that the HTML header of an h3 page can be styled in such a way that it looks similar to an h1 or h2. But the meanings they carry, at least for SEO optimization, are radically different. As a rule, these numbers, inside tags, should be understood as the level of importance of a particular HTML header. Therefore, it is necessary to work through these elements very carefully and then search engines will begin to notice your articles.

Before we get to the CSS, you'll see the default header styles in browsers. If you insert these tags one by one and write some text inside, you will see the following:

The use of headings on the page is also important for search robots. There are certain rules that you can read in our book -.

After we have studied everything, we immediately go into the code and try to write everything ourselves. This is the fastest way to master any programming language. But HTML technology is much easier than any programming language, so anyone can figure it out. This way you will remember the tags better.

Video lesson - HTML page title? (practice)

A visual video showing an example of working with these tags:

Homework

D/Z: As an example, write a short text that will consist of 5-7 paragraphs and 2-3 different headings.