Модуль 1: HTML — Структура веб‑страницы

В этом модуле вы освоите базовую разметку HTML: узнаете, как устроен каркас документа, какие теги бывают, как использовать атрибуты, семантические элементы и создавать формы.

Подготовительный этап (0.1–0.2): установка редактора (VS Code), браузеров (Chrome/Firefox), Git и GitHub, публикация «Hello, World!» на GitHub Pages.

1.1 Введение в HTML. Базовый каркас документа

HTML (HyperText Markup Language) описывает структуру документа. Основные строительные блоки — элементы (теги) и их атрибуты.

Элемент — пара тегов (открывающий/закрывающий) и содержимое: <p>Текст</p>.
Атрибут — дополнительная информация для элемента: <a href="/about" target="_blank">О нас</a>.
Структура документа: <!DOCTYPE html>, <html>, <head>, <body>.

Как браузер отображает HTML

Браузер парсит HTML в дерево DOM (Document Object Model). Каждый элемент становится узлом со своими атрибутами и детьми. Скрипты и стили воздействуют на DOM, изменяя разметку и внешний вид без перезагрузки страницы.

Пустые (void) элементы

Некоторые теги не имеют содержимого и закрывающего тега: <br>, <img>, <input>, <meta>, <link>. Их нельзя «вкладывать» в себя что‑то.

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

id — уникальный идентификатор узла (якоря, JS‑хуки).
class — группировка элементов для CSS/JS.
data‑* — пользовательские данные в разметке (доступ через dataset).
aria‑* — улучшение доступности (скринридеры).
hidden, title, tabindex — управляют отображением/подсказками/фокусом.

Пути к файлам

Абсолютные: https://site.ru/page — всегда с протоколом/доменом.
Относительные: about.html, ../img/cat.png — относительно текущего файла.
От корня: /images/icon.ico — от корня сайта.

Экранирование символов

&lt; → < (меньше),  &gt; → > (больше),  &amp; → &,  &quot; → "

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Моя первая страница</title>
    <meta name="description" content="Краткое описание страницы" />
    <link rel="icon" href="/images/icon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/styles.css" />
  </head>
  <body>
    <header><h1>О себе</h1></header>
    <main>
      <p>Привет! Это моя первая HTML‑страница.</p>
    </main>
    <footer>© 2025</footer>
    <script src="/js/script.js"></script>
  </body>
</html>

Важно: <meta name="viewport"> обеспечивает адаптивность. Атрибут lang="ru" у <html> помогает SEO и ассистивным технологиям.

Частые мета‑теги

<meta name="robots" content="index, follow" />
<meta name="author" content="Имя автора" />
<meta property="og:title" content="Заголовок для соцсетей" />

Практика

Создайте index.html с корректным доктайпом, lang, charset, viewport.
Подключите внешний CSS/JS, добавьте осмысленный <title> и description.

1.2 Работа с текстовым контентом

Текст — основа контента. Важно соблюдать иерархию заголовков и семантику.

Заголовки и абзацы

<h1> — главный заголовок страницы (один на страницу). Далее структурируйте разделы h2, подпункты h3 и т.д. Абзацы набирайте в <p>, перенос строки <br> используйте только для поэтических/адресных записей.

<h1>Главный заголовок страницы</h1>
<h2>Подраздел</h2>
<p>Обычный абзац текста с <strong>важным</strong> словом и <em>акцентом</em>.</p>

Правило одно H1: на странице должен быть один <h1>. Заголовки идут по порядку: h1 → h2 → h3 …

Списки

<ul>
  <li>Маркированный пункт</li>
  <li>Ещё пункт</li>
</ul>
<ol>
  <li>Нумерованный пункт</li>
  <li>Ещё пункт</li>
</ol>
<dl>
  <dt>Термин</dt>
  <dd>Определение</dd>
</dl>

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

Блочные (например, div, p, section) занимают всю ширину и начинаются с новой строки. Строчные (span, a, em) текут внутри строки и не разрывают поток.

Пробелы и переносы

Браузер схлопывает последовательности пробелов в один. Для отображения «как есть» используйте CSS white-space или тег <pre> для фрагментов кода.

Инлайн‑элементы

<strong> — логически важное
<em> — акцент/интонация
<span> — универсальный инлайн‑контейнер

Практика

Добавьте на страницу «О себе» разделы с заголовками, абзацами, маркированным и нумерованным списками, а также списком определений.

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

Ссылки

<a> создаёт гиперссылки. Внутренние ссылки ведут на страницы сайта, внешние — на другие домены. Для перехода к секции используйте якоря по id.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Внешняя ссылка</a>
<a href="/about.html">Внутренняя страница</a>
<a href="#contacts">Прокрутка к секции на странице</a>
<a href="mailto:hi@example.com">Написать письмо</a>
<a href="tel:+79001234567">Позвонить</a>

Безопасность: для внешних ссылок с target="_blank" добавляйте rel="noopener noreferrer".

Изображения

Подбирайте формат по задаче: фотографии — JPEG/WebP; графика с прозрачностью — PNG/WebP; иконки/логотипы — SVG.

<figure>
  <img src="/images/cat.png" alt="Милый котёнок" width="400" height="300" loading="lazy">
  <figcaption>Наш талисман — котёнок</figcaption>
</figure>

Адаптивные изображения

<img 
  src="/images/photo-800.jpg" 
  srcset="/images/photo-400.jpg 400w, /images/photo-800.jpg 800w, /images/photo-1200.jpg 1200w" 
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Пейзаж" width="600" height="400" loading="lazy">

alt — обязательный описательный текст (доступность/SEO)
width/height — помогают браузеру резервировать место и избегать «скачков» верстки

Практика

Соберите меню из 4 ссылок (включая якорь и mailto) и вставьте 2 изображения: обычное и адаптивное с srcset.

1.4 Семантическая разметка

Семантические теги описывают смысл блоков: поисковики и ассистивные технологии лучше понимают структуру, пользователям проще навигация.

<header>
  <nav>Меню</nav>
</header>
<main>
  <article>
    <header><h1>Заголовок статьи</h1></header>
    <section aria-labelledby="s1">
      <h2 id="s1">Основной контент</h2>
      ...
    </section>
    <footer>Автор и дата</footer>
  </article>
  <aside>Боковая колонка</aside>
</main>
<footer>Подвал</footer>

Лендмарки доступности

<header>, <footer> — могут быть у страницы и у статьи/секции
<main> — только один на странице, основной контент
<nav> — группы ссылок (меню/хлебные крошки)
<aside> — боковой/вспомогательный контент
<article> — самостоятельный, самодостаточный блок (статья, карточка)

Если подходящего тега нет — используйте <div> (блочный) или <span> (строчный) и при необходимости ARIA‑атрибуты.

Практика

Преобразуйте страницу «О себе» в семантический макет с header, nav, main, article, aside, footer.

1.5 Формы

Формы позволяют собирать данные от пользователя и отправлять их на сервер.

Базовая форма

<form action="/submit" method="post" autocomplete="on">
  <label for="name">Имя</label>
  <input id="name" type="text" name="name" required autocomplete="name">

  <label for="email">Email</label>
  <input id="email" type="email" name="email" required autocomplete="email">

  <label for="pwd">Пароль</label>
  <input id="pwd" type="password" name="password" minlength="6" autocomplete="new-password">

  <fieldset>
    <legend>Подписка</legend>
    <label><input type="checkbox" name="news" checked> Новости</label>
    <label><input type="radio" name="plan" value="basic" checked> Базовый</label>
    <label><input type="radio" name="plan" value="pro"> Pro</label>
  </fieldset>

  <label for="bio">О себе</label>
  <textarea id="bio" name="bio" rows="4"></textarea>

  <label for="city">Город</label>
  <select id="city" name="city">
    <option value="msk">Москва</option>
    <option value="spb">Санкт‑Петербург</option>
  </select>

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

GET vs POST

GET — параметры в URL (для поиска/фильтров, небезопасно для паролей).
POST — данные в теле запроса (по умолчанию для форм с личными данными).

Доступность: связывайте подписи и поля через for/id; не используйте placeholder вместо label. Применяйте встроенную валидацию: required, minlength, pattern. Атрибуты autocomplete улучшают UX.

Практика

Сделайте форму обратной связи: имя, email, тема, сообщение, чекбокс согласия, кнопка отправки. Попробуйте GET и POST.

1.6 Доступность (A11y) и ARIA

Доступность — это про то, чтобы интерфейсом могли пользоваться люди с разными возможностями и устройствами. Следуйте стандартам WCAG, используйте нативную семантику и дополняйте её ARIA, когда это необходимо.

Фокус и клавиатурная навигация

Порядок табуляции следует логике документа. Не используйте tabindex > 0, предпочитайте нативный порядок.
Кнопки должны быть <button>, а не <div role="button">. Если всё же нужен кастом — добавляйте role, tabindex="0", обрабатывайте клавиши Enter/Space.
Добавляйте ссылку «пропустить к содержимому» в самом начале: <a class="skip-link" href="#content">К основному содержимому</a>.

ARIA-атрибуты и лендмарки

role для уточнения роли, когда нет подходящего тега.
aria-label, aria-labelledby, aria-describedby — альтернативные/связанные подписи.
aria-expanded, aria-controls — состояние раскрывающихся областей.
aria-live="polite|assertive", aria-busy — живые области и загрузка.

<button aria-expanded="false" aria-controls="acc-1" id="acc-btn-1">Развернуть</button>
<section id="acc-1" role="region" aria-labelledby="acc-btn-1" hidden>
  <p>Скрываемый контент</p>
</section>

Формы и ошибки

Каждое поле связано с <label for>. Не используйте placeholder вместо метки.
Ошибки сообщайте текстом, связывайте с полем через aria-describedby, фокусируйте первую ошибку.

<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-err" required>
<p id="email-err" role="alert" hidden>Введите корректный email</p>

Контраст и медиа

Контраст текста к фону: минимум 4.5:1 для обычного текста.
У изображений обязателен осмысленный alt (декоративным — пустой alt="").
Для иконок SVG: добавляйте role="img" и aria-label при необходимости.

Правило: Сначала используйте семантические теги. ARIA — только если нельзя иначе.

1.7 SEO для HTML

Title/Description: уникальные на страницу; title ≈ 50–60 знаков, description ≈ 140–160.
Заголовки: один h1, далее иерархия h2–h3.
Open Graph/Twitter: корректные превью при шаринге.
Canonical: укажите канонический URL, чтобы избежать дублей.
Structured Data: JSON‑LD для статей, курсов, хлебных крошек (см. в <head>).
robots.txt / sitemap.xml: помогайте поисковикам индексировать сайт.
Core Web Vitals: LCP, CLS, INP влияют на ранжирование — оптимизируйте критический рендеринг и изображения.

<link rel="canonical" href="https://example.com/page" />
<meta property="og:title" content="Заголовок" />
<meta property="og:description" content="Описание" />
<meta property="og:image" content="https://example.com/preview.jpg" />

1.8 Адаптивные изображения и ретина

Используйте правильные форматы и отдавайте изображения под размер экрана и плотность пикселей. Указывайте явные width/height для предотвращения CLS.

<picture>, `srcset` и плотности

<picture>
  <source type="image/avif" srcset="/img/hero@1x.avif 1x, /img/hero@2x.avif 2x">
  <source type="image/webp" srcset="/img/hero@1x.webp 1x, /img/hero@2x.webp 2x">
  <img src="/img/hero@1x.jpg" srcset="/img/hero@2x.jpg 2x" sizes="(max-width: 768px) 100vw, 1200px" alt="Обложка" width="1200" height="600" loading="lazy" decoding="async" fetchpriority="high">
</picture>

SVG и иконки

Для одноцветных иконок используйте SVG‑спрайты, меняйте цвет через CSS.
Добавляйте aria-hidden="true" декоративным иконкам.

Фоновые изображения и ретина в CSS

.hero {
  background-image: image-set(
    url('/img/hero-bg@1x.jpg') 1x,
    url('/img/hero-bg@2x.jpg') 2x
  );
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

Подсказка: Для LCP‑изображения используйте fetchpriority="high" и не лените загрузку.

Практика

Замените изображения на главной на AVIF/WebP с ретина‑вариантами, добавьте width/height и корректные alt.

Итоговый проект модуля 1

Сверстайте главную страницу портфолио без стилей. Обязательные секции: «Обо мне», «Навыки», «Проекты», «Контакты»; шапка с меню, подвал. Используйте семантические теги и добавьте форму обратной связи.

Структура: <header>, <nav>, <main> с 3–4 <section>, <footer>
Доступность: корректные alt у изображений, иерархия заголовков
Проверка: валидируйте документ на W3C Validator

Модуль 1: HTML — Структура веб‑страницы

1.1 Введение в HTML. Базовый каркас документа

Как браузер отображает HTML

Пустые (void) элементы

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

Пути к файлам

Экранирование символов

Частые мета‑теги

Практика

1.2 Работа с текстовым контентом

Заголовки и абзацы

Списки

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

Пробелы и переносы

Инлайн‑элементы

Практика

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

Ссылки

Изображения

Адаптивные изображения

Практика

1.4 Семантическая разметка

Лендмарки доступности

Практика

1.5 Формы

Базовая форма

GET vs POST

Практика

1.6 Доступность (A11y) и ARIA

Фокус и клавиатурная навигация

ARIA-атрибуты и лендмарки

Формы и ошибки

Контраст и медиа

1.7 SEO для HTML

1.8 Адаптивные изображения и ретина

<picture>, srcset и плотности

SVG и иконки

Фоновые изображения и ретина в CSS

Практика

Итоговый проект модуля 1

<picture>, `srcset` и плотности