Содержание
Чтобы русский язык правильно отображался на веб-странице, нужно сделать две вещи: установить кодировку UTF-8 и указать язык страницы в атрибуте lang. UTF-8 — это универсальная кодировка, которая поддерживает все символы кириллицы, иероглифы, эмодзи и спецсимволы. Без правильной кодировки вместо русских букв вы увидите «кракозябры» (например, &C+&_$). Итак, минимальный корректный HTML-код для русской страницы выглядит так: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> .... Эти два элемента обязательны для любого сайта на русском, независимо от того, написан ли он на чистом HTML или сгенерирован CMS вроде Joomla.
Почему без кодировки не работает русский язык
Компьютер не понимает буквы, он понимает числа. Кодировка — это таблица соответствия: какой номер (байт) какой букве соответствует. Исторически существовало множество кодировок для кириллицы (Windows-1251, KOI8-R, CP866), и если открыть страницу в не той кодировке, буквы превращаются в абракадабру. UTF-8 — современный стандарт, который кодирует все символы всех языков мира, включая русский, и уже более десяти лет используется по умолчанию. Поэтому всегда используйте UTF-8.
Основные ошибки:
- Не указан
<meta charset="UTF-8">— браузер может угадать неверную кодировку. - Файл сохранён в кодировке ANSI (Windows-1251) или без BOM — даже если мета-тег есть, буквы могут отображаться неправильно.
- Сервер (хостинг) отдаёт страницу в кодировке, отличной от указанной в мета-теге — настройте .htaccess или конфигурацию сервера.
Пошаговая инструкция: делаем русскую HTML-страницу
- Откройте любой текстовый редактор (VS Code, Sublime Text, Notepad++). Не используйте обычный «Блокнот» Windows, если не хотите проблем с кодировкой (хотя можно, но нужно сохранять как UTF-8).
- Создайте базовую структуру HTML:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Моя первая страница на русском</title> </head> <body> <h1>Привет, мир!</h1> <p>Это текст на русском языке с кириллицей.</p> </body> </html>
- Сохраните файл с расширением
.htmlи в кодировке UTF-8. В VS Code это делается автоматически. В Sublime Text: File → Save with Encoding → UTF-8. В Notepad++: Кодировки → Преобразовать в UTF-8 (без BOM). - Откройте файл в браузере — русский текст должен отображаться корректно.
Атрибут lang="ru" не влияет на отображение букв, но нужен для SEO (поисковые системы понимают, что страница на русском), для скринридеров (незрячие пользователи) и для проверки орфографии в браузере. Он ставится в теге <html>.
| Элемент | Зачем нужен | Обязателен? |
|---|---|---|
| <meta charset="UTF-8"> | Отображение кириллицы (чтобы не было кракозябр) | Да |
| <html lang="ru"> | SEO, доступность, языковые проверки | Настоятельно рекомендуется (но не критично для отображения) |
Работа с русским языком в CMS и конструкторах
Если вы используете готовую CMS (например, Joomla или WordPress) или конструктор (SitePro.by, Tilda), вам не нужно заботиться о кодировке — система уже настроена на UTF-8. Однако важно проверить, что при создании сайта вы выбрали русский язык интерфейса и что база данных создана в кодировке utf8_general_ci (или utf8mb4_unicode_ci). В Joomla при установке вы можете выбрать язык по умолчанию — русский. При импорте контента из Excel или CSV убедитесь, что файл сохранён в UTF-8, иначе буквы превратятся в знаки вопроса.
Что делать, если русский текст всё равно отображается как кракозябры
Даже если вы всё сделали по инструкции, возможны проблемы. Вот алгоритм поиска.
- Проверьте мета-тег в исходном коде (Ctrl+U). Должно быть
<meta charset="UTF-8">. Если тег отсутствует или в нём указана другая кодировка (Windows-1251, ISO-8859-5) — исправьте. - Проверьте, в какой кодировке сохранён файл на сервере. Скачайте файл через FTP, откройте в нормальном редакторе (Notepad++ показывает кодировку в правом нижнем углу). Если файл сохранён в ANSI, конвертируйте в UTF-8 без BOM.
- Убедитесь, что сервер не принудительно отправляет заголовок Content-Type. Может быть настройка хостинга (например, hostpro) или файл .htaccess с директивой
AddDefaultCharset windows-1251. Добавьте строкуAddDefaultCharset UTF-8или удалите старую. Если вы не уверены, создайте файл .htaccess в корне сайта с содержимым:AddDefaultCharset utf-8. - Для динамических страниц (PHP) — добавьте в начало PHP-файла (до любого вывода) заголовок:
header('Content-Type: text/html; charset=utf-8');. Это касается только самописных скриптов, CMS обычно уже делают это.
Чаще всего проблема именно в сохранении файла на сервере или локально — многие новички используют Блокнот и не следят за кодировкой.
Почему важно указывать lang="ru" (даже если текст на русском)
Атрибут lang не влияет на визуальное отображение, но важен для:
- Поисковой оптимизации (SEO): поисковые системы (Google, Яндекс) понимают, на каком языке страница, и показывают её пользователям, ищущим на русском.
- Скринридеров: программы для незрячих читают текст с правильным произношением (русские звуки против английских).
- Автоматических переводчиков: Google Translate понимает, с какого языка переводить.
- Проверки орфографии в браузере: если вы пишете комментарий в форме, браузер проверяет русские слова по русскому словарю.
Если у вас многоязычный сайт, обязательно используйте атрибут lang для каждого варианта: <html lang="ru"> для русской версии, <html lang="en"> для английской.
Резюме от эксперта
Чтобы русский язык в HTML отображался корректно, нужно всего два действия: 1) установить кодировку UTF-8 через мета-тег в <head>; 2) сохранить файл в кодировке UTF-8 (без BOM). Атрибут lang="ru" — для SEO и доступности. Эта база работает для любого HTML-документа, будь то статическая страница, шаблон для CMS (Joomla, WordPress) или файл темы. Если вы используете конструктор, за вас всё уже настроили, но при вставке своего HTML-кода (блок «HTML-код» в SitePro.by или Tilda) не забывайте про кодировку. Удачной вёрстки!
