Как создать HTML-файл index.html и открыть его в браузере

Чтобы создать HTML-файл, откройте любой текстовый редактор, вставьте в него разметку и сохраните документ с расширением .html, например под именем index.html, в кодировке UTF-8. Чтобы открыть файл в браузере, дважды щёлкните по нему или перетащите его в окно Chrome.

Ниже готовый шаблон, шаги для Блокнота Windows, TextEdit на Mac и VS Code, пять способов открыть страницу и три ошибки, из-за которых вместо страницы видно код или ромбики. Если HTML для вас пока просто аббревиатура, начните с разбора что такое язык разметки HTML.

CheckroiПодборка курсов по HTML208 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Что такое HTML-файл и почему его называют index.html

HTML-файл устроен как обычный текстовый документ. От файла .txt его отличает только расширение: увидев .html, система отдаёт документ браузеру, и тот рисует по тегам страницу вместо того, чтобы показать текст как есть.

Имя index.html выбирают не по традиции. Веб-сервер, получив адрес, который заканчивается на «/», ищет в папке файл с этим именем и отдаёт его первым. В документации nginx у директивы index значение по умолчанию index.html (описание модуля ngx_http_index_module), у Apache то же самое у DirectoryIndex (документация mod_dir).

Про строчные буквы и пробелы предупреждает и MDN: на сервере Index.html и index.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>
    <h1>Привет, это моя первая страница</h1>
    <p>Файл называется index.html и лежит в папке site.</p>
</body>
</html>

Что делает каждая строка:

• <!DOCTYPE html> сообщает браузеру, что перед ним современный HTML;
• lang="ru" задаёт язык страницы, по нему работают переносы и озвучка экранного диктора;
• <meta charset="UTF-8"> объявляет кодировку. Сам файл тоже должен быть сохранён в UTF-8, иначе строка соврёт браузеру (подробности в справке MDN по тегу meta);
• viewport нужен, чтобы на телефоне страница не открывалась мелкой копией десктопной;
• <title> задаёт текст на вкладке браузера;
• внутри <body> всё, что видит человек: заголовки, абзацы с тегом p, списки, таблицы.

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

Как создать HTML-файл в Блокноте Windows

Блокнот уже стоит в системе, ставить ничего не придётся. Перед первым файлом стоит включить показ расширений: без него Windows прячет «.txt» в конце имени, и ошибку не видно.

1. Откройте Проводник. В Windows 11 нажмите «Вид» → «Показать» → «Расширения имён файлов», в Windows 10 на вкладке «Вид» поставьте флажок «Расширения имён файлов» (справка Microsoft).
2. Создайте папку для сайта, например site на рабочем столе.
3. Запустите Блокнот через поиск в меню «Пуск» и вставьте шаблон из предыдущего раздела.
4. Выберите «Файл» → «Сохранить как» и откройте папку site.
5. В поле «Тип файла» выберите «Все файлы», в поле имени впишите index.html.
6. Проверьте поле «Кодировка»: там должно стоять UTF-8. Нажмите «Сохранить».

Есть способ без окна сохранения. Щёлкните правой кнопкой в папке, выберите «Создать» → «Текстовый документ» и переименуйте его в index.html. Windows переспросит, точно ли менять расширение. Соглашайтесь. Потом откройте файл Блокнотом через «Открыть с помощью» и вставьте код.

Создать файл из терминала

Тем, кто не боится командной строки, хватит одной команды. Она создаёт пустой файл, код потом вставляется в любом редакторе:

• Windows, PowerShell: New-Item index.html (параметры команды в справке PowerShell);
• macOS и Linux, Терминал: touch index.html.

Команда создаст файл в той папке, где сейчас открыт терминал. Перейти в папку сайта можно командой cd и путём к ней.

Как сделать страницу на Mac в TextEdit

TextEdit по умолчанию работает с форматированным текстом и сохраняет документы в RTF. Для HTML его нужно перевести в простой текст, иначе в файл попадёт служебная разметка Apple.

1. Откройте TextEdit и выберите «Файл» → «Новый».
2. В меню «Формат» нажмите «Конвертировать в простой текст».
3. Вставьте шаблон и выберите «Файл» → «Сохранить».
4. Введите имя index.html. Если TextEdit предложит расширение .txt, нажмите «Использовать .html».

Чтобы TextEdit потом открывал такие файлы кодом, зайдите в «TextEdit» → «Настройки» → «Открытие и сохранение» и включите «Отображать файлы HTML в виде кода HTML, а не форматированного текста». Названия пунктов сверены по руководству пользователя TextEdit.

Шаблон страницы в VS Code за два нажатия

Блокнот годится для первого файла. Когда страниц станет больше одной, удобнее редактор кода: он подсвечивает теги, закрывает их сам и сохраняет файлы в UTF-8 без лишних вопросов. Горячие клавиши и расширения редактора разбирают на отдельных курсах по VS Code. Я бы начинал с бесплатного VS Code, сравнение с другими редакторами есть в обзоре редакторов кода для веб-разработки.

Скриншоты ниже сделаны в vscode.dev, браузерной версии VS Code. Редактор и подсказки там те же, отличается только окно сохранения: его рисует браузер.

1. Нажмите Ctrl+N (на Mac Cmd+N) или «Создать файл…» на стартовом экране.
2. Справа внизу в строке состояния щёлкните по надписи «Простой текст» и выберите HTML. Если сразу сохранить пустой файл как index.html, режим включится сам.
3. Наберите восклицательный знак. Редактор предложит «Сокращение Emmet», нажмите Tab.

Emmet развернёт «!» в полный каркас страницы. Поправьте в нём две вещи: lang="en" замените на lang="ru", а слово Document в теге title поменяйте на название своей страницы.

Сохраните файл через Ctrl+S (Cmd+S) под именем index.html. Чтобы видеть все файлы проекта в боковой панели, откройте не отдельный файл, а всю папку site через «Открыть папку». Тот же приём на примере Python разобран в инструкции как создать и запустить файл в VS Code.

Как разложить файлы сайта по папкам

Пока страница одна, хватает одного index.html. Как только появляются картинки, стили и вторая страница, файлы лучше сразу разложить по папкам. Так делают и в учебных проектах, и на настоящих сайтах:

site/
├── index.html      ← главная страница
├── about.html      ← вторая страница
├── css/
│   └── style.css   ← стили
└── images/
    └── cat.jpg     ← картинки

Три правила, которые избавят от половины ошибок новичка:

1. Все файлы сайта лежат внутри одной папки, и путь к ним пишется от неё: css/style.css, images/cat.jpg.
2. Имена файлов и папок пишутся латиницей и строчными буквами, слова разделяет дефис.
3. Ссылка со второй страницы на главную выглядит как <a href="index.html">На главную</a>. Как устроены ссылки и их атрибуты, разобрано в статье про гиперссылки.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Как открыть HTML-файл в браузере: 5 способов

Интернет для этого не нужен: браузер читает файл прямо с диска, и в адресной строке появляется file:/// вместо https.

Сочетание Ctrl+O для открытия файла с компьютера описано в списке быстрых клавиш Chrome. Там же есть Ctrl+U (на Mac Cmd+Option+U): он показывает HTML-код открытой страницы.

Если всё сохранено правильно, шаблон из начала статьи выглядит в Chrome так:

Браузер не следит за файлом. Поправили код и сохранили? Обновите вкладку клавишей F5 или Ctrl+R (на Mac Cmd+R). Без этого браузер покажет прошлую версию, и покажется, что правка не сработала.

Как вернуться к коду и поправить страницу

По двойному щелчку файл уходит в браузер, а браузер код не правит. Чтобы вернуться к разметке, файл нужно открыть редактором:

• Windows: правая кнопка по файлу → «Открыть с помощью» → «Блокнот» или VS Code;
• Mac: правая кнопка → «Открыть в программе» → TextEdit. Чтобы TextEdit показал разметку, включите настройку из раздела про Mac;
• VS Code: перетащите файл в окно редактора или откройте всю папку сайта.

Удобная схема для работы: редактор и браузер открыты рядом. Поправили строку, сохранили, переключились в браузер и нажали F5. Ctrl+U в браузере тоже показывает код, но только для чтения, исправить в нём ничего нельзя.

Как сохранить чужую веб-страницу в HTML

Обратная задача: скачать HTML готовой страницы, чтобы разобрать её вёрстку или прочитать без интернета. В Chrome нажмите Ctrl+S (Cmd+S), откроется окно «Сохранить страницу как…». Формат выбирается в поле типа файла:

Для изучения вёрстки берите «Веб-страница полностью». Сохранится то, что браузер получил в момент загрузки. Если часть блоков сайт подгружает скриптами, офлайн-копия может выйти неполной.

Частые ошибки и что с ними делать

Три проблемы ниже мы воспроизвели на том же шаблоне и сняли в Chrome. Каждая решается за минуту, если знать причину.

Браузер показывает код вместо страницы

Причина: файл на самом деле называется index.html.txt. Windows спрятала настоящее расширение, и браузер показывает его как обычный текст.

Решение: включите показ расширений (первый шаг в разделе про Блокнот) и переименуйте файл, удалив «.txt» в конце.

Вместо русских букв ромбики с вопросами

Причина: файл сохранён в кодировке Windows-1251 (в Блокноте она называется ANSI), а в коде стоит <meta charset="UTF-8">. Браузер верит строке в коде и читает байты не той таблицей.

Решение: откройте файл, выберите «Сохранить как» и поставьте в поле «Кодировка» UTF-8. Строку с charset не удаляйте. В нашей проверке Chrome угадал кириллицу и без неё, но угадывание зависит от браузера и его языка, а объявленная кодировка работает везде.

Страница открылась, но пустая

Причина обычно в незакрытом теге. Забытый </title> браузер считает продолжением заголовка вкладки, и весь текст страницы уезжает туда. Незакрытый комментарий <!-- прячет всё, что ниже него.

Решение: нажмите Ctrl+U и посмотрите, где подсветка кода обрывается или становится одного цвета. В VS Code щелчок по открывающему тегу подсвечивает его закрывающую пару. Если пары нет, подсвечивать нечего.

Картинка или стили не подключаются

Причина почти всегда в пути. В HTML он считается от папки, где лежит index.html, и учитывает регистр букв.

• Картинка лежит в site/images/cat.jpg? В коде пишите images/cat.jpg. Путь с диска вроде C:\Users\… сломается, как только сайт переедет на хостинг.
• Cat.JPG и cat.jpg на сервере считаются двумя разными файлами, хотя Windows их не различает.
• Пробел в имени файла ломает адрес. Назовите файл moj-kot.jpg, и проблема уйдёт.

Отдельный файл стилей подключается так же, по относительному пути. Как он устроен, разобрано в статье что такое CSS и как его использовать.

Где освоить HTML системно

Файл в Блокноте даёт одну страницу. Чтобы собрать сайт из нескольких страниц, подключить стили, сделать адаптивную вёрстку и выложить всё на хостинг, нужны HTML, CSS и немного JavaScript. Что ещё входит в работу, видно по разборам профессии HTML-верстальщика и пути во фронтенд-разработку.

Курсы ниже мы отобрали в каталоге курсов по HTML: от коротких вводных до программ с проектами в портфолио.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Frontend-разработчик: сайты на HTML/CSS/JavaScript Перейти на сайт курса	Coddy	9200 ₽	-	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Frontend-разработчик: сайты на HTML/CSS/JavaScript

  Coddy9200 ₽3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML