HTML: структура страницы

HTML - это скелет страницы. Если CSS - одежда, то HTML - кости. И да, иногда кости нужно подписывать семантикой, а не просто «всё div».

Минимальная страница

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MyApp</title>
  </head>
  <body>
    <h1>Привет, веб!</h1>
  </body>
</html>

<!doctype html> - говорит браузеру использовать современный стандарт. <html lang="ru"> - язык страницы (важно для SEO и screen readers). meta viewport - без него мобильные браузеры отображают страницу как десктопную, мелко.

Заголовки и текст

<h1>Главный заголовок (один на страницу)</h1>
<h2>Секция</h2>
<h3>Подсекция</h3>

<p>Параграф текста. Браузер добавляет отступы автоматически.</p>

<strong>Важный текст</strong> (жирный, семантически - акцент)
<em>Выделенный текст</em> (курсив, семантически - лёгкий акцент)

Не пропускай уровни: после `h1` идёт `h2`, потом `h3`. Не ставь `h4` сразу после `h1` - это нарушает структуру документа и мешает SEO и скринридерам.

Списки

<!-- Неупорядоченный (маркеры) -->
<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
</ul>

<!-- Упорядоченный (нумерация) -->
<ol>
  <li>Шаг 1</li>
  <li>Шаг 2</li>
</ol>

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

<a href="https://example.com">MyApp</a>
<a href="/course/sql">Курс SQL</a>
<a href="#section">Якорь на странице</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Внешняя ссылка (новая вкладка)
</a>

<img src="/images/logo.png" alt="Логотип BackendStart" width="200" />

alt - обязательный атрибут. Он описывает изображение для скринридеров и показывается, если картинка не загрузилась.

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

DOM-дерево семантической страницы: html в корне, head с meta и title, body с header, main и footer; в header вложен nav, в main - article

HTML5 предоставляет теги, которые описывают смысл контента:

<header>Шапка сайта (логотип, навигация)</header>
<nav>Навигация (меню со ссылками)</nav>
<main>Основной контент страницы (один на страницу)</main>
<article>Самостоятельная статья или запись</article>
<section>Тематическая секция контента</section>
<aside>Боковая панель (не основной контент)</aside>
<footer>Подвал сайта (контакты, ссылки)</footer>

Вместо «всё на div»:

<!-- Плохо -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

<!-- Хорошо -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

SEO: поисковики лучше понимают структуру. Доступность: screen readers озвучивают «навигация», «основной контент». И ты сам через месяц поймёшь разметку быстрее.

Таблицы

<table>
  <thead>
    <tr>
      <th>Имя</th>
      <th>Роль</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Иван</td>
      <td>Backend</td>
    </tr>
    <tr>
      <td>Анна</td>
      <td>Frontend</td>
    </tr>
  </tbody>
</table>

Таблицы - для табличных данных. Не для вёрстки (для этого есть Flexbox и Grid).

Формы (базовое)

<form action="/login" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <label for="pass">Пароль:</label>
  <input type="password" id="pass" name="password" required />

  <button type="submit">Войти</button>
</form>

label + for связывает текст с полем ввода - клик по тексту ставит фокус в поле. required - браузерная валидация (не заменяет серверную).

Атрибуты data-*

Для хранения данных в HTML-элементах:

<button data-id="42" data-action="delete">Удалить</button>

const btn = document.querySelector('button');
console.log(btn.dataset.id);     // "42"
console.log(btn.dataset.action); // "delete"

Мета-теги в head

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Обучающая платформа для бэкенд-разработчиков" />
  <title>BackendStart - Обучение бэкенду</title>

  <!-- Подключение стилей и шрифтов -->
  <link rel="stylesheet" href="/styles.css" />
  <link rel="icon" href="/favicon.ico" />

  <!-- Open Graph для соцсетей -->
  <meta property="og:title" content="BackendStart" />
  <meta property="og:description" content="Обучение бэкенд-разработке" />
  <meta property="og:image" content="/og-image.png" />
</head>

`meta description` - текст, который Google и Яндекс показывают в результатах поиска под заголовком. Длина: 150-160 символов. Если не указан - поисковик вырежет кусок текста сам.

Мини-задание

Сверстай страницу: header + nav + main + footer
В main сделай article с h2, параграфом и списком
Добавь таблицу с тремя столбцами
Добавь мета-теги: description, viewport, og:title
Проверь страницу через DevTools → Elements