HTML для начинающих: самостоятельный курс

HTML задаёт смысл и структуру страницы. Он не отвечает за цвета и анимацию — этим занимается CSS, а за поведение элементов отвечает JavaScript. Но без понятной HTML-разметки ни дизайн, ни поисковая оптимизация, ни доступность не будут надёжными.

Как проходить курс

Откройте любой редактор кода, создайте файл index.html и после каждой главы меняйте пример своими руками. Браузер покажет результат сразу: достаточно сохранить файл и обновить страницу.

HTML-справочник по тегам

Выберите отдельный материал, если нужно разобраться с конкретным элементом.

1. Первый HTML-документ

У современной страницы есть декларация типа документа, корневой элемент html, служебная часть head и видимое содержимое body.

<!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>Это моя первая веб-страница.</p>
  </body>
</html>

lang="ru" помогает браузерам и программам чтения с экрана выбрать язык. meta charset задаёт кодировку, а viewport нужен для нормального отображения на телефонах.

2. Элементы, теги и атрибуты

Большинство элементов состоит из открывающего тега, содержимого и закрывающего тега: <p>Текст</p>. Атрибуты уточняют элемент. Например, у ссылки атрибут href хранит адрес, а у изображения alt — текстовую замену.

<a href="/contacts/">Связаться с нами</a>
<img src="team.jpg" alt="Команда студии за рабочим столом">

Рабочий пример: связаться с нами. Ссылка выше остаётся кодом, чтобы его можно было скопировать и изучить.

Вкладывайте элементы логично: ссылка может содержать текст и изображение, но не стоит помещать интерактивную кнопку внутрь ссылки. Закрывайте теги в обратном порядке вложенности.

3. Текст и иерархия заголовков

На странице должен быть один главный заголовок h1. Последующие разделы строятся через h2, а вложенные — через h3. Выбирайте заголовок по смыслу, а не по размеру шрифта: размер настраивается CSS.

<h1>Разработка сайта</h1>
<p>Коротко объясняем задачу и результат.</p>
<h2>Этапы работы</h2>
<h3>Исследование</h3>
<p>Собираем требования и изучаем аудиторию.</p>

Для смысла внутри текста используйте strong для важности, em для смыслового акцента, blockquote для цитаты и code для фрагмента кода. Не используйте жирный шрифт вместо заголовка.

4. Ссылки и изображения

Внутренние ссылки ведут на страницы того же сайта, внешние — на другой сайт. Внешнюю ссылку, открывающуюся в новой вкладке, сопровождайте rel="noopener noreferrer".

<a href="/uslugi/">Все услуги</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Внешний источник
</a>

Рабочий пример: все услуги студии.

У содержательных изображений всегда есть понятный alt: он объясняет изображение тому, кто его не видит. Если картинка декоративная и не несёт информации, оставьте alt="". Не пишите «картинка» или имя файла.

<figure>
  <img src="chart.png" alt="График роста заявок с января по июнь">
  <figcaption>Динамика заявок за первое полугодие.</figcaption>
</figure>

5. Списки и таблицы

Список подходит для однотипных пунктов. ul используют, когда порядок не важен, ol — когда важна последовательность. Таблица нужна только для данных, которые удобно сравнивать по строкам и столбцам.

<ul>
  <li>Прототип</li>
  <li>Дизайн</li>
  <li>Разработка</li>
</ul>

<table>
  <caption>Сроки этапов</caption>
  <thead><tr><th scope="col">Этап</th><th scope="col">Срок</th></tr></thead>
  <tbody><tr><td>Прототип</td><td>5 дней</td></tr></tbody>
</table>

6. Семантическая структура страницы

Элементы header, nav, main, article, section, aside и footer описывают назначение частей страницы. Они помогают поисковикам, экранным дикторам и другим разработчикам быстрее понять документ.

<header>...логотип и навигация...</header>
<main>
  <article>
    <h1>Статья</h1>
    <section><h2>Первый раздел</h2>...</section>
  </article>
  <aside>Связанные материалы</aside>
</main>
<footer>Контакты и документы</footer>

div и span оставьте для группировки элементов, когда специального семантического тега нет. Они не сообщают смысл сами по себе.

7. Формы

Форма собирает данные посетителя. Каждый элемент управления должен иметь связанную подпись label; плейсхолдер не заменяет её, потому что исчезает во время ввода.

<form action="/send/" method="post">
  <label for="name">Ваше имя</label>
  <input id="name" name="name" autocomplete="name" required>

  <label for="email">Эл. почта</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <button type="submit">Отправить</button>
</form>

Проверка в браузере помогает пользователю, но не защищает сервер. Сервер обязан повторно проверять и очищать все данные, полученные из формы.

8. CSS, классы и адаптивность

CSS можно подключить отдельным файлом. Класс позволяет применить стиль к нескольким элементам, а идентификатор id должен быть уникальным в документе.

<link rel="stylesheet" href="styles.css">
<button class="button button--primary">Оставить заявку</button>

Адаптивность начинается с гибкой структуры: используйте относительные размеры, не задавайте фиксированную ширину там, где блок должен сжиматься, и проверяйте страницу на узком экране. HTML остаётся одним и тем же для телефона и компьютера; расположение меняет CSS.

9. Медиа и встраиваемый контент

Для видео применяйте video, для аудио — audio, для самостоятельной векторной графики — svg. Внешний контент можно разместить через iframe, но у него должен быть понятный title.

<video controls width="720" poster="preview.jpg">
  <source src="presentation.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

<iframe src="https://example.com/map" title="Карта проезда в офис" loading="lazy"></iframe>

10. Head: что видит браузер и поисковик

В head находятся служебные данные страницы. Уникальный title показывается во вкладке браузера и обычно становится заголовком сниппета в поиске. meta name="description" кратко объясняет содержание страницы. Заголовок h1 остаётся в body.

<title>Разработка интернет-магазина — Студия Али Велиева</title>
<meta name="description" content="Проектируем и разрабатываем интернет-магазины: каталог, оплата, интеграции и поддержка.">
<link rel="canonical" href="https://example.ru/uslugi/internet-magazin/">

11. Доступность: короткий чек-лист

У страницы есть язык, один h1 и последовательная структура заголовков.
У каждой ссылки есть понятное название; «нажмите здесь» не объясняет действие.
У изображений заполнен осмысленный alt или задан пустой alt="" для декора.
У полей формы есть label, а сообщения об ошибках объясняют, что исправить.
Все действия доступны с клавиатуры, а цвет не является единственным способом передать смысл.

12. Что изучать дальше

После HTML переходите к CSS: сеткам, типографике, состояниям элементов и адаптивным правилам. Затем изучайте JavaScript, чтобы добавлять интерактивность. Для практики сверстайте небольшую страницу услуги: заголовок, описание, изображение, список преимуществ, форму и подвал.

Если вам нужно понять связанные термины, посмотрите материалы о CMS, адаптивной вёрстке, метатегах и скорости сайта.

HTML для начинающих

Как проходить курс

HTML-справочник по тегам

1. Первый HTML-документ

2. Элементы, теги и атрибуты

3. Текст и иерархия заголовков

4. Ссылки и изображения

5. Списки и таблицы

6. Семантическая структура страницы

7. Формы

8. CSS, классы и адаптивность

9. Медиа и встраиваемый контент

10. Head: что видит браузер и поисковик

11. Доступность: короткий чек-лист

12. Что изучать дальше

Расскажите о проекте