HTML · Урок 1

Введение в HTML

Первый шаг в веб-разработке: узнаем, из чего состоит любая страница, и создадим свой первый документ.

Что такое HTML

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

Любой сайт, который вы видите, — это HTML, «одетый» в стили (CSS) и оживлённый скриптами (JavaScript). Сравните с человеком:

HTML — скелет и органы: заголовки, тексты, картинки, кнопки.
CSS — внешность: цвета, шрифты, отступы, анимации.
JavaScript — мышцы и мозг: реакция на клики, логика поведения.

Из чего состоит тег

Строительный кирпичик HTML — тег. Чаще всего теги парные: открывающий и закрывающий, внутри между ними находится содержимое:

<p>Это абзац текста.</p>

Тег	Что делает
`<h1>–<h6>`	Заголовки от самого важного до самого мелкого
`<p>`	Абзац текста
`<a>`	Ссылка
`<img>`	Изображение (одиночный, без «пары»)
`<div>`	Универсальный блок-контейнер

💡

Одиночные теги (например, <img>, <br>) не имеют закрывающей части — им нечего «закрывать».

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

Любая страница начинается с одного и того же скелета. Создайте файл index.html и вставьте туда это:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <p>Мой первый HTML.</p>
  </body>
</html>

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

<!DOCTYPE html> — сообщает браузеру, что документ современный HTML5.
<html> — корневой элемент всей страницы.
<head> — служебные данные: кодировка, заголовок вкладки, подключение стилей. Здесь ничего не видно на странице.
<body> — то, что пользователь реально видит.

Живой пример

Вот что получится — это уже настоящая веб-страница:

Привет, мир!

Мой первый HTML.

⚠️

Когда сохраните файл, откройте его двойным кликом — он загрузится прямо в браузере по адресу file://. Хостинг для этого не нужен.

Комментарии в HTML

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

<!-- Это комментарий -->
<p>Пользователь видит только это.</p>
<!--
  Многострочный комментарий
  тоже допустим
-->

💡

Комментарием можно временно «выключать» куски разметки при отладке. Но помните: исходный код страницы виден в браузере — не пишите туда секреты.

Атрибут lang и язык документа

Атрибут lang сообщает браузеру и поисковикам, на каком языке написан документ. Это влияет на проверку орфографии, выбор шрифтов и озвучивание скринридерами:

<html lang="ru">   <!-- русская страница -->

ℹ️

Лучше указывать конкретный язык и страну, например lang="ru-RU" или lang="en-US". Если язык указан неверно, браузер может споткнуться о встроенный переводчик.

Анатомия URL

Любой адрес в интернете состоит из нескольких частей. Разберём на примере:

https://example.com:443/blog/post?page=2#comments
└──┘  └────────┘ └─┘ └───────┘ └──────┘ └──────┘
схема    домен   порт   путь    запрос   якорь

Часть	Что это
`https://`	схема (протокол). `https` — шифрованное соединение
`example.com`	домен — адрес сайта
`:443`	порт. Для https обычно 443, его не пишут
`/blog/post`	путь к ресурсу на сервере
`?page=2`	запрос: параметры после `?`
`#comments`	якорь: прокрутка к элементу с этим `id`

DevTools — инструменты разработчика

Самый полезный инструмент верстальщика встроен в каждый браузер. Открывается клавишей F12 или Ctrl+Shift+I.

Elements / Инспектор — смотреть и менять HTML и CSS на лету, экспериментировать без пересохранения файла;
Console — логи и ошибки JavaScript;
Network — какие файлы и как быстро загружаются;
Responsive mode — проверить вёрстку в размере телефона.

💡

Наведите курсор на элемент страницы и нажмите Ctrl+Shift+C — откроется именно этот элемент в инспекторе.

Структура проекта и имя index.html

Главную страницу сайта принято называть index.html — сервер отдаёт её по умолчанию, когда открывают корень сайта. Держите порядок и в папках:

my-site/
├── index.html       <!-- главная -->
├── about.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/

💡

Имена файлов — только латиницей, в нижнем регистре, без пробелов: about-us.html, а не «О Нас.html». Пробелы в адресе кодируются и ломают вёрстку на части серверов.

Мета-теги: charset, viewport, description

В <head> живут невидимые настройки документа. Три самых важных мета-тега:

<meta charset="UTF-8">   <!-- кодировка, без неё кириллица сломается -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Краткое описание страницы">

ℹ️

charset ставят первым, viewport обязателен для телефонов, а description поисковики нередко показывают в сниппете результатов под названием страницы.

Текст: абзацы, переносы и линии

За абзац отвечает <p>. Внутри одного абзаца перенос вручную — это <br>, а тему отделяют горизонтальной линией <hr>:

<p>
  Первая строка,<br>
  вторая строка того же абзаца.
</p>

<hr>   <!-- разделитель между блоками -->

<p>Новый смысловой блок.</p>

⚠️

Не ставьте по <br> для отступов между абзацами — для этого существуют CSS-отступы. <br> нужен только внутри текста.

Валидность и стандарты W3C

Стандарты интернета пишет консорциум W3C. Его валидатор проверяет HTML на ошибки — разметка с ошибками может работать, но вести себя непредсказуемо в разных браузерах:

validator.w3.org — официальная проверка кода;
Проверяйте открытые теги, вложенность и атрибуты;
Валидный HTML с осмысленной семантикой = лучший поиск.

💡

Ошибку «страница сломалась» чаще всего видно глазами в DevTools: браузер сам подсвечивает неправильно закрытые теги в инспекторе.

Блочные и строчные элементы

Блочные теги существуют отдельной строкой и тянутся на всю ширину, строчные живут внутри строки как слова:

<div>Первый блок</div>   <!-- каждый на своей строке -->
<div>Второй блок</div>

<p>Текст со <span>строчным</span> вкраплением.</p>

💡

Всем тегам алгоритмам важно: p, div, заголовки — блочные; a, span, strong, code — строчные. CSS меняет это поведение через display.

Глобальные атрибуты: title и hidden

Некоторые атрибуты работают у любого тега. title даёт подсказку, hidden прячет элемент:

<p title="Подсказка при наведении">Наведите курсор</p>
<div hidden>Этого не покажем</div>

<abbr title="Гипертекстовая разметка">HTML</abbr>

Вложенные списки

Списки вкладываются друг в друга — получается иерархия, как в меню или оглавлении:

<ul>
  <li>HTML
    <ul>
      <li>Теги</li>
      <li>Атрибуты</li>
    </ul>
  </li>
</ul>

ℹ️

Вложенный список всегда живёт внутри <li>, а не «между» пунктами — иначе структура ломается.

Иерархия заголовков

Заголовки образуют дерево смысла. Одно <h1> на страницу, ниже <h2>, затем <h3>:

<h1>Статья</h1>
  <h2>Введение</h2>
    <h3>Цели курса</h3>
  <h2>Итоги</h2>

⚠️

Не перепрыгивайте уровни: с h1 сразу на h3 — плохо для доступности и SEO. И не используйте заголовки ради «жирного текста».

Кодировка UTF-8

Первый тег документа — <meta charset>. Без него браузер угадывает кодировку и часто ошибается — на странице «кракозябры»:

<meta charset="UTF-8">

💡

Сохраняйте файлы редактором тоже в UTF-8 (это почти всегда по умолчанию). Если текст «сломался» — проверьте и тег, и кодировку сохранения.

Ленивая загрузка изображений

Картинки вне первого экрана грузить сразу незачем — браузер подтянет их, когда прокрутишь до них:

<img src="photo.jpg" alt="Фото" loading="lazy">

ℹ️

Первому экрану loading="lazy" не ставят: эта картинка видна сразу, отложенная загрузка только задержит её.

Формы: базовые поля

Тег <form> и поля <input> собирают данные пользователя. Вспомогательный материал про формы увидим в следующих уроках, а вот каркас:

<form action="/send" method="post">
  <input name="email" type="email">
  <button type="submit">Отправить</button>
</form>

Чекбоксы и радиокнопки

Чекбокс — несколько «да/нет», радиокнопка — один из группы:

<label><input type="checkbox"> Согласен</label>

<label><input type="radio" name="opt" value="a"> Вариант А</label>
<label><input type="radio" name="opt" value="b"> Вариант Б</label>

ℹ️

Радиокнопки объединяются общим name — можно выбрать одну. Чекбокс с тем же name просто передаст массив отмеченных значений.

Валидация форм без JS

Браузер сам подскажет о незаполненном обязательном поле или неверном e-mail:

<input type="email" required>
<input type="text" minlength="3" maxlength="20">
<input type="number" min="1" max="10">

label и доступность форм

<label> связывает надпись и поле. Клик по надписи фокусирует поле — большая кнопка нажимаемости:

<label for="name">Имя</label>
<input id="name" type="text">

<!-- или вложенный вариант без for/id -->
<label>Имя<input type="text"></label>

Кнопки: <button>

Внутри формы у кнопки три режима: submit (по умолчанию), reset и button (просто кнопка):

<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>
<button type="button">Нейтральная</button>

⚠️

Тип submit у кнопки в форме «по умолчанию» — случайный Enter в поле отправки «провалит» форму. Не дайте удивиться чужим кнопкам без type.

Якорная навигация

Ссылка с # прокручивает к элементу с соответствующем id:

<a href="#contacts">К контактам</a>
...
<section id="contacts">Контакты</section>

💡

href="#top" с id="top" у <body> — классическая «стрелка наверх» без единой строчки JS.

HTML-сущности

Спецсимволы записываются символом &, кодом и точкой с запятой. Главные — угловые скобки:

<p>Тег начинается с &lt; (это символ <).</p>

Сущность	Что даёт
`<`	<
`>`	>
`&`	&
`©`	©
` `	неразрывный пробел

Как ускорить работу с кодом

Советы, которые экономят часы с первого дня живут в редакторе VS Code:

Наберите ! и Tab — готовая каркас HTML;
Ctrl+Shift+F — поиск по всем файлам;
Расширения Prettier — автоперенос и выравнивание;
Emmet: ul>li*3, затем Tab — сгенерирует список из трёх пунктов.

Тренировка

Откройте отредактируйте свой index.html и попробуйте:

Сменить заголовок во вкладке (тег <title>) на свою фамилию.
Добавить второй абзац и заголовок <h2>.
Посмотреть, чем <h1> отличается от <h6> по размеру.

ℹ️

Если что-то сломалось — не страшно. Браузер очень терпим к ошибкам и всё равно попытается показать страницу. Валидность проверяют сервисом W3C Validator.

Отметить пройденным

Следующий урок: Теги и атрибуты →