Home page » HTML » 2. Теги

2. Теги

HTML (HyperText Markup Language) is a markup language used to create 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 indicates 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>
  <!-- Page content -->
</html>

<head> Tag

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

				
					<head>
  <title>My First Web Page</title>
  <meta charset="UTF-8">
</head>

<body> Tag

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

				
					<body>
  <h1>Hello, World!</h1>
  <p>This is my first paragraph.</p>
</body>

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

Headings are used to create titles of different levels:

				
					<h1>First-Level Heading</h1>
<h2>Second-Level Heading</h2>

Paragraphs (<p>)

Paragraphs are used to create text:

				
					<p>This is an example paragraph.</p>

Links (<a>)

Links are used to navigate to other pages or resources:

				
					
<a href="https://www.example.com">Go to 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="Image description">

Lists
Ordered Lists (<ol>)

The <ol> tag is used to create ordered (numbered) lists, and the <li> tag is used for list items.

				
					<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Unordered Lists (<ul>)

The <ul> tag is used to create unordered (bulleted) lists, and the <li> tag is used for list items.

				
					<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<div> Tag

The <div> tag is used as a container for grouping other elements and applying styles to them using CSS.

				
					<div>
  <h2>Heading in a container</h2>
  <p>Text inside the container.</p>
</div>

<span> Tag

The <span> tag is used to group text within other elements for applying styles.

				
					<p>This is <span style="color: red;">red</span> text.</p>

Common Mistakes

Incorrect Tag Closing

Each opening tag (except for self-closing ones) must have a corresponding closing tag.

				
					
<!-- Correct -->
<p>Paragraph text</p>

<!-- Incorrect -->
<p>Paragraph text

Missing Required Attributes

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

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

<!-- Incorrect -->
<img alt="Image description">

Missing Required Attributes

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

				
					<!-- Correct -->
<p style="text-align: center;">Centered text</p>

<!-- Incorrect -->
<center>Centered text</center>

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

Don’t forget to add the meta tag to specify the character encoding.

				
					<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.
An ordered list with three items.
An unordered list with three items.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 my favorite website</a>

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

    <h2>Ordered List</h2>
    <ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ol>

    <h2>Unordered List</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>

</body>
</html>

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