Введение в HTML

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

Представьте веб-страницу как здание. HTML — это каркас: стены, перегородки, двери, окна. Без каркаса нет здания. CSS — это покраска и отделка. JavaScript — это электричество и кнопки, которые делают здание удобным.

HTML работает через теги — специальные команды в угловых скобках. Каждый тег говорит браузеру, как обработать содержимое:

• <h1>Заголовок</h1> — это заголовок первого уровня
• <p>Абзац</p> — это параграф
• <a href="...">Ссылка</a> — это ссылка

Теги всегда идут парами: открывающий <p> и закрывающий </p>. Содержимое находится между ними.

Как создать первую страницу:

• Создайте файл index.html
• Напишите базовую структуру
• Откройте файл в браузере

HTML5 — актуальная версия стандарта. Все современные браузеры поддерживают его полностью.

HTML — как каркас здания. Каждый тег — это элемент конструкции: стена (div), дверь (a), окно (img). Без каркаса нет здания, но каркас сам по себе выглядит аскетично — для красоты нужен CSS.

**Самый простой:**

<!DOCTYPE html>
<html>
  <head>
    <title>Моя страница</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый HTML-документ.</p>
  </body>
</html>

Минимальный HTML-документ:DOCTYPE, html, head, body — базовая структура любой страницы.

**Простой:**

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Добро пожаловать</h1>
    <p>Это мой первый сайт.</p>
    <p>Здесь будет контент.</p>
  </body>
</html>

Добавили lang="ru" и meta charset — правильные атрибуты для русскоязычной страницы.

**Реальный пример:**

<!-- Сохраните как index.html и откройте в браузере -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Портфолио</title>
</head>
<body>
  <h1>Иван Иванов</h1>
  <p>Веб-разработчик</p>
  <h2>Мои проекты</h2>
  <p>Первый проект — это сайт-визитка.</p>
</body>
</html>

Реальный пример: добавили viewport для мобильных устройств и структурировали контент.

**Неправильно:** Забыть <!DOCTYPE html>

**Почему:** Без DOCTYPE браузер переключается в режим совместимости (Quirks Mode) и страница может отображаться неправильно.

**Правильно:** Всегда начинайте файл с <!DOCTYPE html> — это первая строка любого HTML-документа.

**Неправильно:** Путать HTML и браузер

**Почему:** HTML — это файл с текстом. Браузер — программа, которая читает HTML и показывает страницу.

**Правильно:** HTML — код. Браузер — инструмент для просмотра результата.

**Неправильно:** Думать, что HTML — это язык программирования

**Почему:** HTML не имеет переменных, условий, циклов. Это язык разметки — он описывает структуру, но не логику.

**Правильно:** HTML описывает структуру. Для поведения нужен JavaScript.

• HTML — язык разметки, а не программирования
• Каждый HTML-документ начинается с <!DOCTYPE html>
• Теги обычно идут парами: открывающий и закрывающий
• HTML задаёт структуру, CSS — внешний вид, JS — поведение
• Файл сохраняется с расширением .html

Назад: Это первый урок раздела HTML — предварительные знания не требуются.

Вперёд: В следующем уроке (H2) вы изучите подробную структуру HTML-документа: head, body и вложенность тегов.

• MDN: HTML
• WHATWG: HTML Living Standard