Как браузер получает страницу

Как браузер получает страницу

Когда пользователь вводит адрес сайта и нажимает Enter, браузер устанавливает соединение и запрашивает документ. Этот документ – обычный текстовый файл на языке разметки HTML. Именно этот текст становится основой страницы.

Браузер не получает «готовую картинку сайта». Он получает текст с тегами, которые объясняют структуру. HTML – это язык описания структуры, а не внешний вид страницы.

Браузер читает HTML сверху вниз (последовательный разбор). Если в начале допущена ошибка, она может повлиять на всё ниже. После получения HTML браузер строит объектную модель документа – древовидную структуру.

Схема: клиент отправляет HTTP-запрос, сервер возвращает HTTP-ответ
Александр
Идём дальше!
Как браузер получает страницу

Что именно получает браузер

В HTML-файле нет цветов, шрифтов, анимаций – только текст и обозначения в угловых скобках (теги). Теги бывают открывающими и закрывающими и формируют структуру документа.

Без тегов текст был бы сплошным набором символов без структуры. HTML структурирует информацию так, чтобы её понимали и люди, и программы (например, программы чтения текста вслух).

Браузер создаёт «дерево документа»: каждый тег – элемент дерева. Важно правильно соблюдать вложенность. Нарушение вложенности (например, заголовок внутри абзаца) ведёт к неожиданным результатам.

Визуализация древовидной структуры документа (DOM)
Мария
Без тегов вообще был бы сплошной текст – понятно.
Как браузер получает страницу

Последовательность обработки документа

Браузер обрабатывает HTML строго сверху вниз. Он не знает заранее, что внизу документа. Если в начале указана неправильная кодировка, текст ниже может отображаться некорректно.

При ошибке браузер старается интерпретировать её разумно, но это может привести к неожиданному виду страницы. Если структура нарушена в начале, последствия могут проявиться далеко ниже по коду.

Неправильно (заголовок внутри абзаца):

<p>Текст абзаца <h2>Заголовок внутри</h2> ещё текст.</p>

Правильно (абзац и заголовок — соседние блоки):

<p>Текст абзаца.</p> <h2>Заголовок раздела</h2> <p>Ещё текст.</p>
Александр
Запомнил, буду аккуратнее с порядком в коде.
Как браузер получает страницу

Как формируется отображение страницы

После построения модели HTML браузер обрабатывает стили (если они подключены). Стили описывают внешний вид, но работают поверх структуры, а не вместо неё. Браузер создаёт модель оформления, объединяет её со структурой и формирует схему отображения.

Если структура HTML неправильная, даже красивые стили не помогут: поисковики и программы чтения не поймут документ. Структура всегда первична.

Дмитрий
Структура первична – ок, принял.
Как браузер получает страницу

Роль HTML в современном интернете

HTML отвечает за смысловую организацию: заголовки, списки, навигацию. Это важно для отображения и для доступности. Поисковые системы ориентируются на структуру; при использовании нейтральных контейнеров без смысла им сложнее определить тему.

Хорошо написанный HTML – инвестиция в будущее проекта. Мы начинаем обучение с понимания структуры.

Правильная семантическая структура страницы: <header> (шапка), <main> (основной контент с <section> и <article>), <footer> (подвал). Один <main> на страницу, логичная иерархия заголовков h1–h6.

Проверьте понимание

Задание 1. Восстановите процесс работы браузера

Перетащите этапы в правильном порядке (сверху вниз).

Пользователь вводит адрес страницы Браузер отправляет запрос на сервер Сервер возвращает HTML-документ Браузер последовательно читает документ сверху вниз Формируется объектная модель документа Подключаются и анализируются стили оформления Формируется итоговая схема отображения Страница отображается на экране

Задание 2. Выберите все неверные утверждения

Задание 3. Если в начале документа указана неправильная кодировка, что может произойти?

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

Объявление типа документа

Каждый документ начинается с <!DOCTYPE html>. Эта строка сообщает браузеру, что документ по современному стандарту HTML. Без неё браузер может перейти в режим совместимости (quirks mode).

Отсутствие этой строки может привести к непредсказуемому поведению. Объявление должно быть самой первой строкой в файле.

Подробнее здесь.

Результат отображения страницы в браузере: стандартный режим и режим совместимости
Структура HTML-документа

Корневой элемент документа

После DOCTYPE идёт корневой элемент <html>. У него важен атрибут lang: он нужен программам чтения вслух и поисковым системам. Для русской страницы – lang="ru".

Даже такие детали влияют на качество проекта.

Александр
Хорошо, дальше.
Структура HTML-документа

Разделение на служебную и видимую часть

Внутри <html> два блока: <head> и <body>. head – служебная информация (кодировка, title, стили), она не отображается. body – весь видимый контент.

Чёткое разграничение служебной и пользовательской информации – основа аккуратной разметки.

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

Обязательные элементы в <head>

В <head> обязательно: кодировка (обычно UTF-8), метатег viewport для мобильных, заголовок <title>. Без кодировки текст может отображаться искажённо. Адаптация к мобильным сегодня обязательна.

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Название страницы</title>
Структура HTML-документа

Минимальный корректный каркас документа

Каркас включает DOCTYPE, корневой элемент, head и body. Это фундамент любой страницы. Структура всегда должна предшествовать наполнению.

<!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></body> </html>

Проверьте понимание

Задание 4. Соберите минимальный каркас документа

Расположите строки в правильном порядке (перетаскивайте карточки).

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Страница</title> </head> <body> </body> </html>

Задание 5. Что обязательно должно присутствовать в корректном документе?

Задание 6. В этом коде нарушена структура. Что не так?

<!DOCTYPE html> <html lang="ru"> <body> <head> <meta charset="UTF-8"> <title>Страница</title> </head> </body> </html>
Семантические элементы

Почему раньше всё делали через универсальные контейнеры

Раньше использовали контейнеры <div> без смыслового значения – только для группировки и оформления. Со временем стало ясно: поисковики не могли определить, где основное содержимое. Семантический тег сообщает, какую роль играет содержимое.

Дмитрий
Раньше везде div – а сейчас есть header, main и всё такое, да?
Семантические элементы

Основные семантические элементы страницы

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

Схема страницы с подписями семантических элементов
Правильная семантика в body
Семантические элементы

Шапка, навигация и основной контент

header – шапка страницы или раздела. nav – навигация. main – основной контент, должен быть один на странице; его нельзя помещать в header, footer или article. Программы чтения могут переходить к main, минуя навигацию.

Семантические элементы

Тематические разделы и самостоятельные публикации

section – тематический раздел (например «О компании»). article – самостоятельная публикация (новость, запись блога), имеющая смысл вне контекста страницы. Правильный выбор элемента повышает логическую ясность документа.

Семантические элементы

Почему нельзя игнорировать семантику

Универсальные контейнеры для всего создают проблемы с поддержкой и SEO. Для людей с ограничениями зрения семантика критична. Игнорирование семантики делает сайт менее доступным. Семантика – фундамент качественного проекта.

Проверьте понимание

Задание 7. Соотнесите элемент и его назначение

header
nav
main
section
article
footer

Задание 8. Страница блога: список статей, навигация по категориям. Что использовать?

Для навигации:

Для каждой статьи:

Для списка последних статей:

Задание 9. Почему структура из вложенных div считается плохой практикой?

Заголовки и иерархия

Что такое заголовки и зачем они нужны

Заголовки определяют структуру текста и формируют иерархию. Они нужны не для размера шрифта, а для уровня важности. В HTML шесть уровней (h1–h6). Правильная иерархия усиливает смысловую структуру документа. Программы чтения позволяют перемещаться по заголовкам.

Уровни заголовков от h1 до h6
Заголовки и иерархия

Главный заголовок страницы

Главный заголовок (h1) отражает основную тему; обычно он один на страницу. Несколько h1 запутывают структуру. Главный заголовок должен быть единственным центром структуры. Внешний вид регулируется оформлением, а не логическими элементами.

Заголовки и иерархия

Иерархия и последовательность

После h1 должен идти h2, затем h3. Перепрыгивание через уровни (например, h1 → h4) нарушает структуру. Структура должна быть постепенной и последовательной. Оформление можно изменить, структуру – нет.

Мария
Продолжить – всё логично.
Заголовки и иерархия

Влияние заголовков на доступность и поиск

Заголовки важны для поисковиков и для навигации программами чтения. Пользователи часто «сканируют» страницу по заголовкам. Хорошо сформулированные заголовки повышают вовлечённость.

Заголовки и иерархия

Структура важнее внешнего вида

Использовать заголовки только ради размера шрифта – ошибка. Внешний вид можно изменить независимо от структуры. Заголовок – это прежде всего смысл, а не стиль. Грамотная иерархия – фундамент качественного документа.

Проверьте понимание

Задание 10. Что нарушено в этой разметке?

<h1>О компании</h1><h3>Наша история</h3><h2>Наши услуги</h2>

Задание 11. Можно ли использовать h1 только ради размера текста?

Почему? (выберите один ответ)

Задание 12. Постройте правильную иерархию (перетащите в нужном порядке)

h1 → Главная тема h2 → Раздел 1 h3 → Подраздел 1.1 h3 → Подраздел 1.2 h2 → Раздел 2

Итоговый тест

10 вопросов. Минимум 80% (8 из 10) для перехода к практике.

1. Сколько элементов <main> допустимо на странице?

2. Можно ли перейти с h1 сразу к h4?

3. Для самостоятельного поста блога лучше использовать:

4. Где размещаются meta-теги?

5. Что получает браузер от сервера?

6. Браузер читает HTML:

7. Элемент <head> должен идти:

8. Семантический тег – это:

9. Заголовки в HTML нужны в первую очередь для:

10. Что важнее для доступности?

Практика: Портфолио (60 мин)

Создайте файл index.html с одностраничным лендингом «Портфолио»:

  • <!DOCTYPE html>, <html lang="ru">
  • В <head>: meta charset, viewport, title «Портфолио – Фамилия Имя»
  • <header> с логотипом и <nav> с ≥3 ссылками (можно якоря #projects)
  • <main>: ≥2 <section> – «О себе» (h1 + абзацы) и «Проекты» (≥2 <article>, в каждом h2, описание, <img> с alt)
  • <footer>, минимум один список ul/ol (контакты или навыки)
  • Один h1 на странице, логичная иерархия h2/h3

Загрузите ваш index.html для автоматической проверки: