02. Основы HTML

Что такое HTML

HTML (HyperText Markup Language) — это язык разметки, который описывает структуру веб-страницы. Он не выполняет вычисления, а лишь говорит браузеру, какие элементы и в каком порядке отображать.

Главная идея

HTML состоит из тегов. Каждый тег заключён в угловые скобки —

< >

. Обычно они парные:

<p>Текст</p>

Первый тег открывает элемент, второй — закрывает.

Структура HTML-документа


<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Добро пожаловать!</h1>
    <p>Это базовая структура HTML-документа.</p>
  </body>
</html>

Разбор по частям

```
<!DOCTYPE html>
```
— сообщает браузеру, что используется современный стандарт HTML5.
```
<html lang="ru">
```
— корневой элемент документа, внутри которого всё содержимое страницы.
```
<head>
```
— техническая информация: заголовок страницы, кодировка, метаданные.
```
<body>
```
— визуальная часть страницы, то, что видит пользователь.

Основные теги HTML

```
<h1>…<h6>
```
— заголовки.
```
<h1>
```
— самый важный,
```
<h6>
```
— самый мелкий.
```
<p>
```
— абзац (параграф).
```
<a href="https://example.com">
```
— ссылка.

<img src="photo.jpg" alt="Описание">

— изображение.

```
<ul><li>…</li></ul>
```
— маркированный список.
```
<ol><li>…</li></ol>
```
— нумерованный список.
```
<table>…</table>
```
— таблица.

Пример страницы «О себе»


<body>
  <h1>Алекс — начинающий веб-разработчик</h1>
  <img src="avatar.jpg" alt="Мой аватар" width="150">
  <p>Мне нравится создавать сайты и изучать новые технологии.</p>
  <h2>Мои навыки:</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <p>Мой GitHub: <a href="https://github.com/">github.com</a></p>
</body>

Атрибуты тегов

Теги могут иметь атрибуты — дополнительные параметры, влияющие на их поведение.

```
src
```
— путь к изображению.
```
alt
```
— альтернативный текст, если картинка не загрузится.
```
href
```
— адрес ссылки.
```
title
```
— подсказка при наведении.
```
target="_blank"
```
— открывать ссылку в новой вкладке.

Пример использования атрибутов


<a href="https://energetik.uz" target="_blank" title="Перейти на сайт">Перейти на Energetik.uz</a>

Семантические теги

Современный HTML поддерживает специальные теги, которые описывают смысловые блоки страницы:

```
<header>
```
— шапка сайта (логотип, меню).
```
<main>
```
— основное содержимое страницы.
```
<section>
```
— логический раздел (например, «О нас»).
```
<article>
```
— отдельная статья или запись блога.
```
<footer>
```
— подвал сайта (контакты, копирайт).

Пример с семантикой


<body>
  <header>
    <h1>ITspecialist</h1>
    <nav>
      <a href="#about">О проекте</a> |
      <a href="#courses">Курсы</a> |
      <a href="#contact">Контакты</a>
    </nav>
  </header><main>
    <section id="about">
      <h2>О проекте</h2>
      <p>ITspecialist — открытая платформа для изучения программирования.</p>
    </section>
  </main><footer>
    <p>© 2025 ITspecialist</p>
  </footer>
</body>

Практика

Создайте свой файл

about.html

и опишите в нём себя, добавив:

Заголовок
```
<h1>
```
с вашим именем.
Картинку с атрибутом
```
alt
```
Список навыков.
Ссылку на социальную сеть или GitHub.

Проверьте результат

Откройте страницу в браузере. Убедитесь, что изображение отображается, ссылки работают, а текст читается корректно.

Итоги урока

Теперь вы знаете:

Как устроен HTML-документ.
Какие бывают теги и как они работают.
Что такое атрибуты и семантическая разметка.