HTML: структура веб-страницы

HTML — это скелет любой веб-страницы. Бэкенд-разработчик должен понимать его структуру, чтобы знать, что именно рендерит сервер и как шаблонизатор формирует ответ.

Почему это важно: Когда вы пишете API или серверные шаблоны, вы генерируете HTML. Без понимания его структуры невозможно отладить рендеринг, настроить SEO-мета-теги или разобраться, почему форма отправляет не те данные.

Главная идея

HTML описывает содержимое страницы через вложенные теги. Браузер читает HTML сверху вниз и строит DOM — дерево элементов, с которым потом работает JavaScript.

Как это выглядит на практике

Пользователь вводит URL в браузере
Браузер отправляет GET-запрос на сервер
Сервер возвращает HTML-документ
Браузер парсит HTML и строит DOM-дерево
Браузер запрашивает CSS и JS файлы, указанные в HTML
Страница рендерится на экране

Примеры кода

Минимальная 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>
  <header>
    <nav>
      <a href="/">Главная</a>
      <a href="/about">О нас</a>
    </nav>
  </header>
  <main>
    <h1>Добро пожаловать</h1>
    <p>Это основной контент страницы.</p>
  </main>
  <footer>
    <p>&copy; 2024</p>
  </footer>
</body>
</html>

Форма отправки данных на сервер

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

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

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

<!-- Атрибут name определяет ключ в params -->
<!-- Сервер получит: { email: '...', password: '...' } -->

Что происходит под капотом

DOCTYPE говорит браузеру использовать стандартный режим рендеринга, а не quirks mode
Тег содержит мета-информацию, которую браузер не показывает пользователю напрямую
Семантические теги (header, main, nav, footer) помогают поисковикам и скринридерам понять структуру
Атрибут name в input определяет ключ параметра, который сервер получит при отправке формы
Атрибут action формы определяет URL, а method — HTTP-метод запроса

Типичные ошибки и заблуждения

«
годится для всего» — семантические теги (article, section, nav) лучше для SEO и доступности
«HTML — это не программирование» — но ошибки в HTML напрямую ломают работу бэкенда (формы, мета-теги, CSRF-токены)
«Бэкендеру не нужен HTML» — серверный рендеринг, email-шаблоны и отладка форм требуют его понимания

Ключевые выводы

HTML описывает структуру, а не внешний вид — за стили отвечает CSS
Формы — главный мост между фронтом и бэкендом, name определяет ключи параметров
Мета-теги в влияют на SEO, кодировку и отображение на мобильных

Термины урока

{:term=>"DOM", :definition=>"Document Object Model — древовидное представление HTML-документа в памяти браузера"}

{:term=>"Семантический тег", :definition=>"HTML-тег, который несёт смысловое значение (article, nav, main) в отличие от div/span"}

{:term=>"Атрибут name", :definition=>"Имя поля формы, которое становится ключом параметра при отправке на сервер"}

Связь с работой backend-разработчика

Каждый раз, когда сервер рендерит шаблон (ERB, Jinja, Blade), он генерирует HTML. Понимание его структуры помогает отлаживать формы, настраивать SEO, правильно вставлять CSRF-токены и строить email-шаблоны.

Мини-разбор реальной ситуации

Разработчик заметил, что форма регистрации не отправляет поле «телефон» на сервер. Оказалось, у input не было атрибута name. Браузер просто игнорирует поля без name при отправке формы — данные туда не попадают. Добавление name="phone" решило проблему за секунду.

Что запомнить

HTML = структура страницы, CSS = стили, JS = поведение
Формы отправляют данные на сервер через action + method
Атрибут name обязателен для полей, которые должны попасть в params

Итог

HTML — язык разметки, который описывает содержимое веб-страницы. Для бэкенд-разработчика критически важно понимать формы, семантическую структуру и мета-теги — это напрямую влияет на работу серверного кода.