Home page » HTML » 1. HTML разметка

1. HTML разметка

HTML (HyperText Markup Language) is a markup language used for creating web pages. HTML defines the structure of web content using elements and tags. In this lesson, we will learn the basic HTML elements, how to use them correctly, and what common mistakes to avoid.

Basic HTML Tags

<!DOCTYPE html> Tag

This tag specifies the document type and HTML version. Most modern web pages use the following line:

				
					<!DOCTYPE html>

<html> Tag

The <html> tag serves as a container for all the content of a web page. It starts with <html> and ends with </html>:

				
					<!DOCTYPE html>
<html>
  <!-- Содержимое страницы -->
</html>

<head> Tag

The <head> tag contains metadata such as the page title, links to styles, and scripts:

				
					<head>
  <title>Моя первая веб-страница</title>
  <meta charset="UTF-8">
</head>

<body> Tag

The <body> tag contains all the visible content of the web page:

				
					<body>
  <h1>Привет, мир!</h1>
  <p>Это мой первый параграф.</p>
</body>

Main Tags for Structuring Content
Headings (<h1> – <h6>)

Headings are used to create titles of different levels:

				
					<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>

Paragraphs (<p>)

Paragraphs are used to create text:

				
					<p>Это пример параграфа.</p>

Links (<a>)

Links are used to navigate to other pages or resources:

				
					<a href="https://www.example.com">Перейти на Example</a>

Images (<img>)

Images are added using the <img> tag, which does not have a closing tag:

				
					<img decoding="async" src="image.jpg" alt="Описание изображения">

Common Mistakes

Incorrect Tag Closing

Each opening tag (except for self-closing tags) must have a corresponding closing tag:

				
					<p>Paragraph text</p>

Missing Required Attributes

Some tags require mandatory attributes. For example, the <img> tag requires the src attribute:

				
					<img decoding="async" src="image.jpg" alt="Image description">

Using Deprecated Tags

Do not use deprecated tags such as <center> and <font>. Instead, use CSS for styling.

Missing <meta charset="UTF-8"> Tag

The <meta charset="UTF-8"> tag is essential for correctly displaying special characters and different languages on a webpage.

				
					<head>
  <meta charset="UTF-8">
</head>

Conclusion

In this lesson, we covered the basic HTML tags and their proper usage. Understanding the fundamentals of HTML is the first step in creating web pages. Avoid common mistakes and stay updated with current standards.

Test Assignment

Create a simple web page containing the following elements:

A first-level heading with the text “My First Web Page”.
A paragraph with a description.
A link to your favorite website.
An image with a description.

				
					<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My First Web Page</title>
</head>
<body>
  <h1>My First Web Page</h1>
  <p>This is a description of my first web page. I am learning to create HTML markup.</p>
  <a href="https://www.example.com">Go to Example</a>
  <img decoding="async" src="image.jpg" alt="Image description">
</body>
</html>

Check your work for errors and make sure the page is displayed correctly in the browser.