Что такое HTML и как работает веб

Знакомимся с языком, на котором написан весь интернет, и разбираемся, что происходит, когда вы открываете сайт.

HTML (HyperText Markup Language) — язык разметки, которым описывают структуру и содержимое веб-страницы.

Что значит «язык разметки»

HTML — это не язык программирования в привычном смысле: в нём нет переменных, циклов и условий. Его задача проще и важнее — разметить содержимое страницы. Вы как будто берёте обычный текст и расставляете пометки: «вот это заголовок», «это абзац», «а это ссылка». Браузер читает эти пометки и показывает страницу так, как вы задумали.

Представьте рукопись книги, которую вы отдаёте верстальщику. Вы помечаете: эту строку сделать названием главы, этот фрагмент — выделить курсивом, сюда вставить картинку. HTML — ровно такие пометки, только для веб-страницы, и расставляете их вы сами.

Как браузер показывает страницу

Когда вы вводите адрес сайта и нажимаете Enter, происходит примерно следующее:

  1. Браузер отправляет запрос на сервер — компьютер, где хранится сайт.
  2. Сервер присылает в ответ HTML-документ — обычный текстовый файл с разметкой.
  3. Браузер читает разметку и отрисовывает страницу: показывает заголовки крупным шрифтом, абзацы — обычным, ссылки — подчёркнутыми.

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

Три кита веба

HTML работает не в одиночку. У современной страницы три слоя, и каждый отвечает за своё:

ТехнологияЗа что отвечает
HTMLструктура и содержимое (текст, картинки, ссылки)
CSSоформление (цвета, шрифты, отступы, расположение)
JavaScriptповедение (реакция на клики, анимации, логика)

Хорошая аналогия — дом: HTML это стены и комнаты, CSS — обои и мебель, JavaScript — электричество и техника. Этот курс целиком про первый слой — фундамент, без которого остальное не имеет смысла.

Как выглядит HTML

Вот крошечная страница. Пока не разбираем каждую строчку — просто почувствуйте вид разметки:

<p>Привет! Это моя <strong>первая</strong> страница.</p>

В браузере это превратится в строку текста, где слово «первая» будет жирным. Угловые скобки <...> — это и есть пометки-теги, о которых мы подробно поговорим в следующих уроках.

Откуда взялся HTML

HTML придумал в 1991 году британский учёный Тим Бернерс-Ли, чтобы исследователи могли обмениваться документами и связывать их ссылками. Отсюда и слово «HyperText» в названии — «гипертекст», то есть текст со ссылками, по которым можно переходить. Именно эти ссылки превратили набор отдельных страниц во «всемирную паутину» (World Wide Web), которой мы пользуемся сегодня.

С тех пор язык много раз обновлялся. Современная версия называется HTML5 — её мы и изучаем. Хорошая новость для новичка: основы за десятилетия почти не менялись. Теги для абзаца, заголовка и ссылки, которые вы выучите в этом курсе, работают на миллиардах страниц и никуда не денутся.

Почему стоит начать именно с HTML

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

Итог

  • HTML — язык разметки: он описывает структуру и содержимое страницы, а не вычисления.
  • HTML-документ — это обычный текстовый файл; браузер читает его и отрисовывает страницу.
  • HTML, CSS и JavaScript вместе образуют веб: структура, оформление и поведение.
Проверьте себя
1. Что описывает HTML?
AЦвета и шрифты страницы
BСтруктуру и содержимое страницы
CЛогику и реакции на действия пользователя
DСкорость загрузки сайта
2. Чем по своей сути является HTML-документ?
AСкомпилированной программой
BБазой данных
CОбычным текстовым файлом с разметкой
DИзображением страницы
3. За что из перечисленного HTML НЕ отвечает?
AЗа абзацы и заголовки
BЗа ссылки и изображения
CЗа анимации и реакцию на клики
DЗа списки
Поддержать проект