Загрузка...

Кодировка в HTML

Ссылки на фавикон говорят браузеру, какую крошечную картинку показать на вкладке. Charset отвечает на более фундаментальный вопрос: как браузеру превратить байты вашего HTML-файла в буквы, которые люди могут читать? Когда кодировка неверна, персидский, арабский, латиница с диакритикой, китайский и emoji часто превращаются в mojibake — искажённые последовательности, которые выглядят сломанными, хотя остальная разметка в порядке.

Что означает charset

Набор символов (и его кодировка) сопоставляет байты на диске с символами. HTML-файлы — это потоки байтов. Без правильного правила декодирования браузер может угадать неверно. Объявление UTF-8 в head — современная веб-привычка, которая делает многоязычный текст и символы надёжными в редакторах, на серверах и в браузерах.

Прямой ответ

Поставьте <meta charset="UTF-8"> ближе к началу head — в идеале в первых 1024 байтах файла, чтобы браузер рано узнал кодировку. UTF-8 — кодировка, которую следует использовать почти для всех новых страниц. Также сохраните сам HTML-файл как UTF-8 в редакторе. Объявление и сохранение файла должны совпадать; одно без другого всё равно даёт сломанные символы.

Объявление, сохранение и язык — разные задачи

📊 Кодировка против языка против заголовка

Piece Job
meta charset Как байты декодируются в символы
Editor save as UTF-8 Как ваш инструмент записывает эти байты на диск
html lang На каком человеческом языке содержимое страницы
title text Слова на ярлыке вкладки (не переключатель кодировки)

Многоязычная демонстрация UTF-8

Один короткий документ показывает charset в действии. Meta идёт первой в head, затем title, затем текст тела, смешивающий разные письменности.

UTF-8 charset в head

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charset demo</title>
</head>
<body>
<p>Hello — سلام — مرحبا — 你好 — 🙂</p>
</body>
</html>

Читаем образец

  • <meta charset="UTF-8"> стоит рано в head, до большей части остального содержимого
  • lang="en" называет основной язык для инструментов; он не заменяет charset
  • Абзац включает латиницу, персидский, арабский, китайский и emoji — всё корректно при UTF-8, когда файл сохранён правильно
  • Если эти символы ломаются, проверьте кодировку сохранения, прежде чем переписывать структуру HTML

Почему charset ставят рано

Браузеры начинают читать файл сверху. Если charset появляется только после огромного блока текста или скриптов, часть символов уже могла быть интерпретирована с неверной догадкой. Держите meta ближе к открытию head. В стартовых блоках head из предыдущих сессий charset намеренно был первым именно по этой причине.

Mojibake: симптом несоответствия

Mojibake выглядит как случайная пунктуация, обрывки латиницы или символы-заменители там, где должны быть настоящие слова. Частые причины: объявить UTF-8, пока файл сохранён в устаревшей кодировке, или опустить charset и надеяться, что браузер угадает верно. Исправляйте пару кодировок — meta плюс сохранение файла — а не «чините» буквы бесконечным перенабором.

lang — это не charset

Атрибут lang на html (и иногда на отдельных элементах) помогает скринридерам, переносам и поисковым инструментам понять язык. Charset отвечает за декодирование байтов. Обычно нужны оба: lang для языковой идентичности, charset для кодировки. Не удаляйте charset только потому, что уже задали lang="fa" или lang="ar".

Серверы и реальные деплои (заметка для начинающих)

Продакшен-серверы также могут отправлять charset в заголовке Content-Type HTTP. В этом курсе сначала освойте HTML meta и привычку сохранять в UTF-8. Когда живой сайт расходится с вашей meta, попросите ментора проверить заголовки — но большинство локальных учебных проблем связаны с кодировкой сохранения в редакторе или отсутствующим тегом meta.

Практика в редакторе

  1. Создайте страницу с <meta charset="UTF-8"> в начале head.
  2. Добавьте предложение с неанглийскими буквами и одним emoji.
  3. Убедитесь, что строка состояния редактора показывает UTF-8, затем сохраните.
  4. Откройте страницу в браузере и подтвердите, что символы выглядят правильно.
  5. (Опционально, осторожно) Сохраните копию в устаревшей кодировке, откройте снова и наблюдайте mojibake — затем верните UTF-8, чтобы узнать этот режим сбоя.

Лёгкие ошибки

  • Забыть meta charset и полагаться на удачу браузера
  • Сохранить файл в устаревшей кодировке, объявив UTF-8
  • Поставить charset meta очень поздно в огромном head
  • Путать charset с видимым заголовком страницы или с lang
  • Считать проблемы emoji всегда «багами HTML», когда причина — кодировка
  • Чинить mojibake удалением lang вместо исправления сохранения UTF-8 + meta

Итог

  • Charset объявляет, как декодировать байты HTML-файла в символы
  • Используйте UTF-8 почти для всех новых страниц и ставьте meta charset рано в head
  • Сохраняйте файл как UTF-8, чтобы объявление и кодировка на диске совпадали
  • lang называет язык; charset называет кодировку — разные задачи
  • Mojibake обычно означает несоответствие кодировок, а не загадочный сбой тега

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
6
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Html Урок