Содержание
- Что такое HTML: определение в одну фразу
- HTML — язык программирования или язык разметки
- Что такое HTML в информатике и где его место в веб-разработке
- Что такое HTML-файл и что это за формат: расширение .html и .htm
- Чем открыть HTML-файл: браузер, блокнот, редактор кода
- Почему HTML-файл не открывается в браузере и как это исправить
- Почему не открывается код HTML: типичные причины
- Как пользоваться HTML: минимальный пример документа
- Структура HTML-документа: head, body, теги и атрибуты
- Базовые элементы HTML: заголовки, списки, ссылки, изображения
- Зачем нужен HTML: возможности и ограничения
- Преимущества и недостатки HTML
- Что дальше: HTML в связке с другими технологиями
- Частые вопросы
HTML: что это такое простыми словами
Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.
Материал редакции Зерокодера. Счёт по выдаче снят собственным прогоном 20 сентября 2026 года; цитаты источников приведены дословно. Обновлено: сентябрь 2026.
HTML — это язык гипертекстовой разметки, с которого начинается создание любой веб-страницы. Так формулирует Карьерная Платформа hh.ru. Что это такое простыми словами: HTML — набор команд в угловых скобках, которые объясняют браузеру, где заголовок, где абзац, где картинка и куда ведёт ссылка. Это не программа, которая что-то вычисляет, а разметка: она расставляет смысловые метки в тексте, а браузер превращает их в видимую страницу. Файл с расширением .html — обычный текстовый документ, его можно открыть в блокноте и прочитать глазами.
Мы скачали топ-10 Яндекса по запросу «html что это такое»: текст отдали 8 из 10. Медиана объёма читаемого текста топа — 2959 слов. Метку 2026 года несут 6 из 8 прочитанных страниц.
Что такое HTML: определение в одну фразу
HTML — язык гипертекстовой разметки, описывающий структуру веб-страницы. Определение из обзора на hh.ru звучит так: «HTML — это язык гипертекстовой разметки, с которого начинается создание любой веб-страницы».
Разберём слова по отдельности. Гипертекст — текст, внутри которого есть переходы: нажали на фразу, попали на другую страницу. Разметка — система пометок, которые не меняют сам текст, но задают его роль: это заголовок, это список, это ссылка. HTML-документ хранит только структуру и смысл. Цвета, шрифты, отступы и анимации задают другие технологии, подключаемые к тому же файлу.
В документации MDN разметку сравнивают с конструктором: у каждого элемента есть своя анатомия, элементы вкладываются друг в друга, а часть из них пустая — им не нужен закрывающий тег.
HTML — язык программирования или язык разметки
Прямой ответ: HTML — язык разметки, не язык программирования. В нём нет переменных, условий, циклов и функций. Он не умеет считать, сравнивать значения и принимать решения. Он только описывает, что где находится на странице.
Отсюда практическое следствие: выучить HTML проще, чем любой язык программирования, потому что учить нужно не логику вычислений, а словарь тегов и правила их вложения. В обзоре на hh.ru прямо разбирают этот вопрос отдельным разделом — «Чем HTML отличается от языков программирования».
При этом HTML умеет принимать чужой код. В Википедии указано: «В HTML можно встроить язык программирования JavaScript с помощью тега <script>». Логика живёт в JavaScript, а HTML остаётся каркасом, к которому эта логика крепится. Подробнее о втором языке — в статье JavaScript: что это и как включить в браузере.
Что такое HTML в информатике и где его место в веб-разработке
В информатике HTML разбирают как пример формального языка разметки: у него есть спецификация, синтаксис и правила интерпретации. Спецификации разрабатывает и публикует W3C — по формулировке Skillbox Media, «международная некоммерческая организация, основанная Тимом Бернерсом-Ли в 1994 году». Там же сказано: «Именно W3C разрабатывает и публикует спецификации HTML — документы, в которых описано, как должны работать теги, какие атрибуты допустимы и как браузеры должны интерпретировать код».
В веб-разработке HTML занимает нижний уровень стека из трёх технологий:
| Технология | За что отвечает | Что будет без неё |
|---|---|---|
| HTML | Структура и смысл: заголовки, абзацы, списки, ссылки, картинки | Страницы нет вообще |
| CSS | Внешний вид: цвета, шрифты, сетка, отступы | Текст идёт сплошным потоком |
| JavaScript | Поведение: реакции на клики, расчёты, загрузка данных | Страница статична |
Историю языка Википедия отсчитывает так: «Язык гипертекстовой разметки HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986 — 1991 годах в стенах ЦЕРНа в Женеве в Швейцарии». В блоге Skillfactory указана другая дата предложения технологии — 1989 год, а Skillbox Media пишет, что первая версия появилась в 1991-м. Расхождение объяснимо: речь о разных событиях — идее, первом описании и публикации.
Дальше версии сменяли друг друга. Википедия фиксирует: «Первым общедоступным описанием HTML был документ „Теги HTML“, впервые упомянутый в Интернете Тимом Бернерсом-Ли в конце 1991 года», и в нём «описываются 18 элементов, составляющих первоначальный, относительно простой дизайн HTML». В учебнике на GitBook уточняется: «Он опубликовал первую версию HTML в 1991 году, состоящую из 18 тегов HTML». Сегодня, по тому же источнику, «согласно Справочнику HTML Element Reference от Mozilla Developer Network, в настоящее время существует 140 тегов HTML, хотя некоторые из них уже устарели».
Что такое HTML-файл и что это за формат: расширение .html и .htm
HTML-файл — текстовый документ с расширением .html или .htm, внутри которого лежит разметка страницы. Расширения .html и .htm означают одно и то же: второе осталось от старых систем, где длина расширения ограничивалась тремя знаками. Оба варианта открываются браузером одинаково.
Что внутри файла:
- текст страницы;
- теги — команды в угловых скобках;
- атрибуты — уточнения внутри тега;
- ссылки на внешние файлы: стили, скрипты, картинки.
Формат не бинарный: файл читается любым текстовым редактором. Это и плюс, и источник путаницы — новичок открывает .html двойным щелчком, видит готовую страницу и не понимает, где код. Код там же, просто браузер его не показывает, а исполняет.
Чем открыть HTML-файл: браузер, блокнот, редактор кода
Инструмент выбирают по задаче. Посмотреть страницу — браузер. Прочитать или поправить код — текстовый редактор.
| Чем открыть | Что увидите | Когда подходит |
|---|---|---|
| Браузер (Chrome, Firefox, Safari) | Готовую отрисованную страницу | Посмотреть результат |
| Блокнот, «Текстовый редактор» | Исходный код как обычный текст | Быстрая правка, первый опыт |
| Редактор кода (VS Code и аналоги) | Код с подсветкой и подсказками | Постоянная работа |
| Инструменты разработчика в браузере | Структуру документа и стили элементов | Разбор чужой страницы |
Про последний пункт журнал «Код» даёт конкретный совет: «Чтобы убедиться, что структура действительно есть, откройте инструменты разработчика в браузере (например, в Chrome правая кнопка мыши → „Посмотреть код“ или клавиша F12)».
Ещё один способ — редакторы сайтов. В том же источнике отмечено: «В Tilda или шаблонах для „1С-Битрикс“ можно вставить блок с HTML-кодом». Так разметку правят без выгрузки файла на диск.
Почему HTML-файл не открывается в браузере и как это исправить
Причина почти всегда одна из пяти. Проверять стоит по порядку.
- Файл открылся, но показал код. Браузер получил не тот тип содержимого. Такое бывает, если файл отдаёт сервер с неверным заголовком или если расширение потерялось. Переименуйте файл, добавив .html, и откройте заново.
- Открылся не тот файл. В папке лежат несколько похожих документов, и двойной щелчок попал не в нужный. Сверьте имя.
- Файл открывается в другой программе. Система запомнила ассоциацию с редактором. Выберите «Открыть с помощью» и укажите браузер.
- Файл повреждён или пуст. Размер нулевой или содержимое оборвано при копировании. Откройте в блокноте и проверьте, есть ли внутри текст.
- Путь к файлу содержит недопустимые символы. Переименуйте папки и файл латиницей без пробелов.
Отдельный случай — страница на сервере отдаёт ошибку. Тогда дело не в файле, а в настройках хостинга или в правах доступа.
Почему не открывается код HTML: типичные причины
Код не открывается реже, чем страница, и причины у этого другие.
- Файл сохранён в формате документа. Редактор вроде Word добавит своё расширение и служебную разметку. Сохраняйте как «обычный текст».
- Кодировка подобрана неверно. Тогда вместо текста видны ромбы и вопросительные знаки. В документации MDN указано: «
<meta charset="utf-8">— этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков». Строка должна стоять в начале документа. - Файл скачан как архив или ссылка ведёт на страницу-обёртку. Проверьте расширение после скачивания.
- Редактор не понимает расширение. Откройте файл через меню «Файл → Открыть».
- Код лежит внутри другого кода. Если HTML вставлен в шаблон системы управления сайтом, часть тегов могла быть вырезана фильтром.
Как пользоваться HTML: минимальный пример документа
Минимальный документ состоит из декларации, головы и тела. В обзоре на hh.ru сказано: «<!DOCTYPE html> — не тег, а декларация, которая говорит браузеру: „Это современный HTML5-документ“». В Skillbox Media та же мысль: декларация «в самом начале файла — она сообщает браузеру, что перед ним HTML5-документ».
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Первый абзац текста.</p>
<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
</ul>
<a href="https://example.com">Ссылка</a>
<img src="picture.png" alt="Описание картинки">
</body>
</html>
Порядок работы такой: создайте текстовый файл, вставьте код, сохраните с расширением .html, откройте браузером. Правки вносите в редакторе и обновляйте страницу клавишей F5. Так выглядит и код простой страницы в блоге Яндекс Практикума: там приведён пример с <html>, <head>, <title> и <body>.
Структура HTML-документа: head, body, теги и атрибуты
Документ делится на две части. В <head> лежит служебная информация: кодировка, заголовок вкладки, подключённые стили и скрипты. В <body> — всё, что видит человек.
Термины, без которых не читается ни один учебник:
- Тег — команда в угловых скобках. В блоге Яндекс Практикума сказано: «Команда — это тег, состоящий из имени, расположенного между символами „меньше“ и „больше“». Журнал «Код» формулирует короче: «Тег — это инструкция в угловых скобках:
<p>— сделай абзац,<h1>— оформи заголовок,<img>— вставь картинку». - Атрибут — уточнение внутри открывающего тега. Адрес ссылки, путь к картинке, язык документа.
- Элемент — тег вместе с содержимым и закрывающим тегом.
Про закрывающие слеши есть послабление. В блоге Skillfactory отмечено: «В стандарте HTML5 использование закрывающего слеша в одиночных тегах необязательно». То есть <img> и <img /> браузер поймёт одинаково.
Сколько тегов учить? В Skillbox Media сказано: «На практике большинство задач решается 15–20 базовыми тегами». В Яндекс Практикуме приводят другую цифру: «Существует более 100 HTML-элементов, нужно знать их семантику, где именно их применять». Противоречия нет: базовый набор мал, полный словарь велик, а между ними — рабочий минимум.
Базовые элементы HTML: заголовки, списки, ссылки, изображения
Четыре группы элементов закрывают почти любую страницу.
Заголовки. В учебнике на GitBook указано: «Заголовки имеют 6 уровней в HTML» и «Они варьируются от <h1> до <h6>, где h1 — заголовок наивысшего уровня, а h6 — самый низкий». В блоге Skillfactory добавлено правило: «Заголовок типа <h1> используют обычно один раз, потому что он основной». В обзоре на hh.ru отмечено, что заголовки «задают иерархию разделов на странице, что важно как для пользователей, так и для поисковых систем».
Списки. Маркированный <ul>, нумерованный <ol>, каждый пункт — <li>. Списки задают перечислениям структуру, которую видно и человеку, и поисковой машине.
Ссылки. Тег <a> с атрибутом href. Это и есть гипертекст: переход с одной страницы на другую.
Изображения. Тег <img> с путём к файлу и атрибутом alt — текстовым описанием на случай, если картинка не загрузится.
| Элемент | Что делает | Пример |
|---|---|---|
<h1>–<h6> |
Заголовки шести уровней | <h1>Название статьи</h1> |
<p> |
Абзац текста | <p>Текст</p> |
<ul>, <ol>, <li> |
Списки: маркированный, нумерованный, пункт | <ul><li>Пункт</li></ul> |
<a> |
Ссылка | <a href="...">Перейти</a> |
<img> |
Изображение | <img src="..." alt="..."> |
<table> |
Таблица | Строки и ячейки |
Про таблицы журнал «Код» приводит пример разметки с шапкой «Название, Описание, Цена» и строкой товара — так данные выстраиваются в сетку.
Зачем нужен HTML: возможности и ограничения
HTML нужен, чтобы страница вообще существовала. Браузер получает файл и по меткам строит документ: понимает, что это заголовок, а это список, куда ведёт ссылка и где стоит картинка. Без разметки останется сплошной текст без структуры.
Что HTML умеет:
- задавать структуру и иерархию разделов;
- связывать страницы ссылками;
- вставлять изображения, таблицы, формы;
- подключать стили и скрипты;
- встраивать видео и аудио — это одна из возможностей HTML5, по формулировке GitBook: «Одной из наиболее ожидаемых особенностей HTML5 является поддержка встраивания аудио и видео»;
- нести семантику — теги вроде
<header>и<article>объясняют роль блока.
Что HTML не умеет:
- считать и хранить данные;
- менять содержимое без перезагрузки;
- оформлять внешний вид — это работа CSS;
- реагировать на действия пользователя — это работа JavaScript.
Про семантику журнал «Код» пишет: «Это особенно важно для SEO, доступности (a11y) и поддержки кода в будущем». То есть правильные теги влияют не на внешний вид, а на то, как страницу читают поисковые системы, программы для незрячих и другие разработчики.
Преимущества и недостатки HTML
Сравнение с другими технологиями удобно свести в таблицу.
| Критерий | HTML | CSS | JavaScript |
|---|---|---|---|
| Тип языка | Разметка | Стилевой язык | Язык программирования |
| Что описывает | Структуру и смысл | Внешний вид | Поведение |
| Есть ли логика | Нет | Нет | Да |
| Порог входа | Низкий | Низкий | Средний |
| Работает без двух других | Да, страница откроется | Нет, без HTML нечего оформлять | Нет, без HTML некуда встроиться |
Преимущества HTML:
- простой синтаксис, понятный без опыта программирования;
- текстовый формат, читаемый в блокноте;
- поддержка всеми браузерами;
- стандарт, который развивает W3C;
- долговечность: в журнале «Код» отмечено, что «HTML существует с 90-х и пережил десятки модных технологий».
Недостатки HTML:
- не описывает внешний вид;
- не содержит логики;
- требует CSS и JavaScript для полноценной страницы;
- часть тегов устарела и не поддерживается современными браузерами;
- совместимость со старыми версиями браузеров непредсказуема. В блоге Skillfactory сказано: «иногда бывает сложно предугадать реакцию старых браузеров (Internet Explorer версии 8 и более ранней) на новые теги».
Отдельная строка — версии. Википедия фиксирует ключевые даты: «HTML 5.1 начал разрабатываться 17 декабря 2012 года», «Рекомендован к применению с 1 ноября 2016 года», «HTML 5.2 был представлен 14 декабря 2017 года», «HTML 5.3 был представлен 24 декабря 2018 года». В Skillbox Media и GitBook сходятся на том, что крупнейшим обновлением стало внедрение HTML5 в 2014 году, а современный веб в основном опирается на этот стандарт.
Что дальше: HTML в связке с другими технологиями
Освоив разметку, логично двигаться к оформлению и логике. HTML остаётся фундаментом: любой фреймворк в итоге отдаёт браузеру тот же размеченный документ. О том, как устроен популярный инструмент для интерфейсов, — в статье React: что это и как работает.
Для практики полезно разобрать чужую страницу через инструменты разработчика: там видно, какие теги использованы и как вложены элементы. Это быстрее, чем читать справочник подряд.
Частые вопросы
HTML что это такое простыми словами?
HTML — язык гипертекстовой разметки, набор команд в угловых скобках, которые объясняют браузеру, где на странице заголовок, где абзац, где картинка и куда ведёт ссылка. Он не считает и не принимает решений, а только расставляет смысловые метки. Браузер читает эти метки и строит видимую страницу. Файл с такой разметкой можно открыть в блокноте и прочитать глазами.
HTML что это в информатике?
В информатике HTML разбирают как формальный язык разметки: у него есть спецификация, синтаксис и правила интерпретации. Спецификации разрабатывает и публикует W3C. В веб-разработке HTML занимает нижний уровень стека и отвечает за структуру, тогда как CSS оформляет внешний вид, а JavaScript добавляет поведение.
HTML что это за формат файла и чем его открыть?
Это текстовый формат с расширением .html или .htm, внутри которого лежит разметка страницы. Открыть его можно браузером — тогда вы увидите готовую страницу, либо блокнотом и редактором кода — тогда увидите исходный текст. Расширения .html и .htm равнозначны. Для разбора чужой страницы удобны инструменты разработчика в браузере.
Почему html файл не открывается в браузере?
Чаще всего файл открылся в другой программе или потерял расширение при сохранении. Проверьте имя файла, выберите «Открыть с помощью» и укажите браузер. Если вместо страницы виден код, значит браузер получил неверный тип содержимого. Если файл пуст или оборван, его придётся восстановить из копии.
Почему не открывается код html?
Код не читается, когда файл сохранён как документ, либо когда подобрана неверная кодировка. Строка <meta charset="utf-8"> в начале документа задаёт кодировку, которая включает большинство символов известных языков. Если вместо текста видны ромбы, проблема именно в ней. Иногда файл скачан как архив или открыт редактором, который не понимает расширение.
