Что такое HTML простыми словами и для чего он используется

6 мая 2025

Что такое HTML простыми словами и для чего он используется

15 мин

У каждой страницы в интернете есть структура: абзацы, заголовки и подзаголовки, таблицы, изображения. За то, чтобы элементы страницы отображались в браузере пользователя, отвечает разметка HTML. Разберем, как она устроена, является ли языком программирования, из чего состоит и как может использоваться.

Что такое HTML

HTML (HyperText Markup Language) — язык гипертекстовой разметки документов. Он говорит браузеру, как «рисовать сайты»: здесь будет таблица, там — подзаголовок, тут — абзац текста.

К примеру, можем сохранить в блокнот или другой редактор под названием gitverse.html следующий код:

<h1> GitVerse </h1>
<p> Российская платформа для работы с исходным кодом </p>
<ul>
  <li>Умный AI-помощник</li>
  <li>код-ревью</li>
 <li>публичные и приватные репозитории</li>
</ul>

html

Далее необходимо нажать на файл, выбрать «Открыть с помощью…» и указать браузер (например, Google Chrome). Появится веб-страница:

Мы написали первый HTML-код. В нем использованы теги:

<h1> </h1> — для выделения заголовка;
<p> </p> — для обозначения абзаца;
<ul> <li></li> </ul> — для создания списка.

На самом деле структура веб-страниц в интернете сложнее. В ней есть сотни абзацев и списков, ссылки, заголовки и подзаголовки, таблицы, изображения и многое другое. Кроме этого, у страницы должна быть определенная структура. Код из примера выше нужно обернуть в теги <html>, <head>, <body> и т.д.

Писать код в блокноте или текстовом редакторе неудобно. Поэтому разработчики используют IDE (Integrated Development Environment) — программы, которые упрощают написание, отладку, тестирование кода. Например, GigaIDE. Скачать ее можно бесплатно.

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

Открыть GigaIDE, выбираем «File —> New —> HTML File». Назвать файл можно gitverse.html.

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

Запустить и проверить код в браузере можно прямо из среды разработки, что удобно. Необходимо нажать на сохраненный файл, выбрать «Open In —> Browser» и указать браузер.

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

Почему он появляется? Все просто. Браузер не знает, как прочитать текст, ведь мы не дали ему «инструкцию» — кодировку utf-8. GigaIDE подсвечивала код зеленым и предупреждала разработчика. Необходимо внести изменения в код и «дать инструкцию браузеру». Также стоит добавить элементы для правильной структуры.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
<h1> GitVerse </h1>
<p> Российская платформа для работы с исходным кодом </p>
<ul>
  <li>Умный AI-помощник</li>
  <li>код-ревью</li>
 <li>публичные и приватные репозитории</li>
</ul>
 </body>
</html>

html

Остается скопировать код в файл и открыть в браузере («Open In —> Browser»).

При открытии в браузере появляется корректная веб-страница.

Посмотреть, как выглядит HTML-код и гипертекст сложных страниц (например, главной gitverse.ru), можно с помощью «Инструментов разработчика» в браузере.

Для чего нужен HTML

С помощью HyperText Markup Language можно:

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

HyperText Markup Language — это всегда больше, чем теги и кнопки для навигации по web-странице. К примеру, по клику на кнопку с тегом <button> </button> и типом «submit» срабатывает событие onSubmit (это уже JavaScript). Запускается функция, которая сабмитит форму (в том числе проверяет, заполнены ли поля).

Структура HTML-страницы важна для SEO-продвижения. Ошибкой считается неправильная вложенность, когда после главного заголовка <h1> </h1> идет <h3> </h3>.

Парсеры (веб-пауки, краулеры) ходят по веб-страницам, ищут информацию по определенным HTML-тегам и «складывают» в базу. Так появляются каталоги компаний, базы для холодного обзвона, сервисы сравнения цен и т.д.

Основные HTML-теги

Существует более 100 HTML-тегов. С выпуском нового стандарта HyperText Markup Language появляются новые. К примеру, в HTML5 появились элементы:

<article>;
<aside>;
<audio>;
<canvas>;
<command>.

Исключены <acronym>, <basefont>, <center>, <dir>, <font>, <frame> и некоторые другие.

Среди основных HTML-тегов:

<a> </a> — создает гипертекстовые ссылки;
<body> </body> — сдержит видимую часть документа;
<article> </article>— указывает на независимую часть документа или сайта (статья в блоге);
<h1> </h1>, <h2> </h2>, <h3> </h3> — создает подзаголовки первого, второго, третьего уровней;
<input> — создает поле формы;
<button> </button> — делает кнопку;
<ol> </ol> — генерирует нумерованный список, каждый элемент которого обременен тегами <li> </li>;
<ul> </ul> — создает ненумерованный (маркированный) список;
<div> </div> — генерирует контейнер (в него можно положить контент);
<table> </table> — делает таблицу со строками (<tr> </tr>), ячейками (<td> </td>) и заголовком (<th></th>).

Изменим код выше и добавим форму с полями и кнопкой:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример веб-страницы</title>
 </head>
<body>
<h1> GitVerse </h1>
<p> Российская платформа для работы с исходным кодом </p>
<ul>
  <li>Умный AI-помощник</li>
  <li>код-ревью</li>
 <li>публичные и приватные репозитории</li>
</ul>
<div>
<form>
<label for="email" class=""> E-mail </label>
<input> <label for="password" class="">Пароль</label>
<input>
<button type="submit">Войти </button>
</form>
</div>
 </body>
</html>

html

HTML-файлы и браузеры

Как браузер отрисовывает web-страницу при помощи HTML-файлов? Вот что происходит «под капотом» после ввода запроса и клика на Enter.

Браузер ищет IP-адрес сервера в кэше, а если не находит, идет в кэш операционной системы. Если нет и там — на локальные хосты, на рекурсивные сервера провайдера, в кэш корневого DNS и, наконец, на NS-сервер. Таким образом, не каждый клик на Enter после запроса означает автоматическое обращение к серверу того же Google или Яндекса. Если запись обнаруживается в кэше, ее возвращают браузеру, и начинается парсинг. Если нет, то идет по цепочке выше, пока конечный веб-сервер не принимает запрос и не отдает страницу браузеру.

Браузер получает HTML-файл с http-заголовками, в которых указаны:

тип контента (content-type);
длина (content-length);
заголовки для кэширования.

Когда длина страницы больше нуля, браузер пытается ее обработать. Парсинг начинается с <DOCTYPE>: так браузер понимает, как интерпретировать страницу (HTML, XHTML).

Затем создается DOM (Document Object Model) — объектная модель документа. На этом этапе все элементы на веб-странице — это просто набор байтов в соответствии с кодировкой utf-8.

Далее происходит токенизация — разбиение на смысловые блоки. Так появляются <html>, <head>, <body>.

Токены собирают в узлы — node (ноды). Есть специальный алгоритм, который отвечает за приоритетность загрузки. Например, самый высокий приоритет — у шрифтов, а самый низкий — у изображений. Именно благодаря этой особенности браузера пользователи часто могли видеть, как при медленном интернет-соединении текст страницы подгружается, а картинок еще нет. Приоритеты скриптов зависят от расположения <script>, <defer>, <async>.

К примеру, <defer> в html-коде — прямое указание браузеру: «Строй DOM-дерево и загружай скрипт в фоновом режиме. Когда построено DOM-дерево, запускай скрипт». Атрибут <async> означает, что скрипт абсолютно независим: ни страница, ни остальные скрипты не ждут асинхронных.

Затем браузер строит CSSOM — CSS Object Model. Последовательность приблизительно такая же: байты —> символы —> токены —> абстрактное синтаксическое дерево.

Когда работа завершена, браузер (вернее сказать, Rendering Engine) вызывает событие DOMContentLoaded и сообщает, что построено DOM-дерево. Когда все ресурсы загрузились, срабатывает Load. Это важно, чтобы программист мог работать с элементами на странице.

Далее Rendering Engine строит Render Tree, запускает layout для расположения элементов на странице, point с вычислением цвета пикселя, composite для отрисовки слоев на странице.

Наконец, пользователь видит главную страницу gitverse.ru или любого другого ресурса в Firefox, Safari, Opera, Google Chrome.

Что можно и нельзя сделать на HTML

Сайт на «голом хтмл» похож на ресурсы 2000-х годов. Для примера возьмем часть главной страницы gitverse.ru с информацией про GigaIDE Desktop. Вот так она выглядит без подключения CSS-стилей.

HyperText Markup Language предоставляет некоторые возможности стилизации:

сделать начертание курсивным;
изменить цвет текста или фона;
выделить фразы жирным шрифтом;
расставить заголовки и подзаголовки и т.д.

Чтобы сайт выглядел интерактивным (анимации, переходы, прокрутки), нужны CSS и JavaScript. Без них не обходится современная веб-разработка.

Подключаем CSS-стили (Cascading Style Sheets) — и часть страницы выглядит более приятной для пользователя.

Хтмл-страница после подключения стилей CSS

HTML-код — это каркас страницы. Но только на такой разметке нельзя реализовать многие элементы интерактива, к которым привык пользователь:

слайдеры и карусели;
анимации при наведении на меню;
изменение внешнего вида курсора;
появление элементов (бесконечная прогрузка).

Наконец, все элементы на странице «безжизненны»: по клику на кнопку максимум можно перейти по ссылке. Валидация формы, появление всплывающих окон, работа счетчиков, слайдеры и многие другие функции реализуют с использованием JavaScript.

Основы верстки на HTML

Базовая структура html-страницы выглядит таким образом:

<!DOCTYPE html>
<html lang="ru">
   <head>
      <meta charset="UTF-8">
      <title>Это пример страницы от GitVerse</title>
   </head>
   <body>
      <p>
         <b>
            Здесь будет текст про GitVerse жирным шрифтом, <i> тут пишем курсивным</i>.
         </b>
      </p>
   </body>
</html>

html

Чтобы сверстать макет, который пришел от дизайнера, необходимо визуально разделить страницу на блоки. Например, в случае с первым экраном https://gitverse.ru/ это могут быть:

<header> </header> — для меню-списка, в котором находятся кнопки «Для образования», «GigaCode», «Обзор»;
<main> </main> — для самой главной страницы.

В <main> </main> будет находиться <section> </section>, где будут располагаться блоки с контентом.

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

требования SEO-оптимизации страниц под поисковые системы;
адаптацию блоков под мобильные устройства;
отображение будущих CSS-стилей в различных браузерах (IE 11, Safari 17, Safari on iPhone 14, Chrome on Galaxy S23);
необходимость подключения интерактивных элементов и т.д.

Плюсы и минусы HTML

У HyperText Markup Language есть преимущества и недостатки. С одной стороны, для полноценной веб-разработки языка разметки мало. С другой стороны, это база, на основе которой работают другие инструменты. Мы не можем применить CSS-стиль к элементу, которого не существует (как не можем повесить на него обработчика событий).

Плюсы HTML:

возможность использовать бесплатно;
простота синтаксиса;
совместимость с любым браузером;
наличие тегов и атрибутов;
поддержка сообщества, появление новых версий;
отсутствие сложных скриптов и «тяжелых» элементов;
доступность изучения (первую страницу можно создать буквально в «Блокноте»).

Минусы:

веб-разработка не ограничивается знанием html-разметки, поэтому нужно осваивать дополнительные инструменты (CSS, библиотеки и фреймворки для frontend-разработки);
структура больших страниц с бесконечными <div> или другими блоками может выглядеть сложночитаемой;
статичность, отсутствие логики и интерактивных элементов;
сложность адаптации созданного сайта на мобильных устройствах.

Считать ли HTML языком программирования?

В названии «HyperText Markup Language» есть слово «язык». Но это не язык программирования (ЯП), а язык гипертекстовой разметки.

ЯП (JavaScript, C#, C++, PHP, Python, Go, Java, Scala и т.д.) содержит набор лексических, синтаксических и семантических правил, определяющих внешний вид программы и действия, которые выполнит исполнитель (обычно — ЭВМ). Язык программирования — это набор однообразных инструкций для интерпретатора/компилятора/компьютера/программиста. При использовании ЯП программисты работают с переменными, циклами, функциями, объектами, классами, операторами и т.д. Набор инструментов в HyperText Markup Language значительно меньше.

Формально у него есть синтаксис, семантика, лексика, и это сближает его с ЯП. Но при этом HyperText Markup Language не может обеспечить обработку данных: максимум отобразит элементы. Если говорить упрощенно, с помощью языка разметки нельзя даже сложить два числа, не то что создать сложное банковское приложение или высоконагруженный сервис.

Поэтому HTML можно назвать языком программирования только формально и в определенном контексте — с тем же успехом, что CSS, XML и SQL.