Мегафон

Меняем кодировку страниц. Кодировка HTML-страницы

Позже ASCII была расширена (изначально она не использовала все 8 бит), поэтому появилась возможность использовать уже не 128, а 256 (2 в 8 степени) различных символов, которые можно закодировать в одном байте информации.
Такое усовершенствование позволило добавлять в кодировку ASCII символы национальных языков разных стран, помимо уже существующей латиницы.
Вариантов расширенной кодировки ASCII существует очень много по причине того, что языков в мире тоже немало. Думаю, что многие из вас слышали о такой кодировке, как KOI8 (Код Обмена Информацией, 8 бит) — это тоже расширенная кодировка ASCII . KOI8 включала в себя цифры, буквы латинского и русского алфавита, а также знаки пунктуации, спецсимволы и псевдографику.

Кодировка ISO

Организация Международных стандартов (International Standards Organization) создала диапазон кодировок для различных алфавитов/языков.

Кодировки серии ISO 8859 Кодировка Описание
ISO 8859-1 (Latin-1) Расширенная латиница, включающая символы большинства западноевропейских языков (английский, датский, ирландский, исландский, испанский, итальянский, немецкий, норвежский, португальский, ретороманский, фарерский, шведский, шотландский (гэльский) и частично голландский, финский, французский), а также некоторых восточноевропейских (албанский) и африканских языков (африкаанс, суахили). В Latin-1 отсутствуют знак евро и заглавная буква Ÿ. Эта кодовая страница считается кодировкой по умолчанию для HTML-документов и сообщений электронной почты. Также этой кодовой странице соответствуют первые 256 символов Юникода.
ISO 8859-2 (Latin-2) Расширенная латиница, включающая символы центральноевропейских и восточноевропейских языков (боснийский, венгерский, польский, словацкий, словенский, хорватский, чешский). В Latin-2, как и в Latin-1, отсутствуют знак евро.
ISO 8859-3 (Latin-3) Расширенная латиница, включающая символы южноевропейских языков (мальтийский, турецкий и эсперанто).
ISO 8859-4 (Latin-4) Расширенная латиница, включающая символы североевропейских языков (гренландский, эстонский, латышский, литовский и саамские языки).
ISO 8859-5 (Latin/Cyrillic) Кириллица, включающая символы славянских языков (белорусский, болгарский, македонский, русский, сербский и частично украинский).
ISO 8859-6 (Latin/Arabic) Символы, используемые в арабском языке. Символы других языков с письмом на основе арабского не поддерживаются. Для корректного отображения текста в кодировке ISO 8859-6 требуется поддержка двунаправленного письма и контекстно-зависимых форм символов.
ISO 8859-7 (Latin/Greek) Символы современного греческого языка. Может использоваться также для записи древнегреческих текстов в монотонической орфографии.
ISO 8859-8 (Latin/Hebrew) Символы современного иврита. Используется в двух вариантах: с логическим порядком следования символов (требует поддержки двунаправленного письма) и с визуальным порядком следования символов.
ISO 8859-9 (Latin-5) Вариант Latin-1, в котором редко используемые символы исландского языка заменены на турецкие. Используется для турецкого и курдского языков.
ISO 8859-10 (Latin-6) Вариант Latin-4, более удобный для скандинавских языков.
ISO 8859-11 (Latin/Thai) Символы тайского языка.
ISO 8859-13 (Latin-7) Вариант Latin-4, более удобный для балтийских языков.
ISO 8859-14 (Latin-8) Расширенная латиница, включающая символы кельтских языков, таких как шотландский (гэльский) и бретонский.
ISO 8859-15 (Latin-9) Вариант Latin-1, в котором редко используемые символы заменены на необходимые для полной поддержки финского, французского и эстонского языков. Кроме того, в Latin-9 был добавлен знак евро.
ISO 8859-16 (Latin-10) Расширенная латиница, включающая символы южноевропейских и восточноевропейских (албанский, венгерский, итальянский, польский, румынский, словенский, хорватский), а также некоторых западноевропейских языков (ирландский в новой орфографии, немецкий, финский, французский). Как и в Latin-9, в Latin-10 был добавлен знак евро.

Для документов на английском и большинстве других западноевропейских языков, широко поддерживается кодирование ISO-8859-1 .

В HTML ISO-8859-1 является кодировкой по умолчанию (в XHTML и в HTML5 кодировкой по умолчанию является UTF-8).
При использовании кодировки страницы, отличной от ISO-8859-1, вам необходимо указать это в теге .

Для HTML4: Для HTML5:

Примером ANSI-кодировки является всем известная Windows-1251 .

Windows-1251 выгодно отличается от других 8 битных кириллических кодировок (таких как CP866 и ISO 8859-5) наличием практически всех символов, использующихся в русской типографике для обычного текста (отсутствует только знак ударения). Она также содержит все символы для других славянских языков: украинского, белорусского, сербского, македонского и болгарского.
Ниже приведены десятичные значения символов кодировки Windows-1251 .

Для отображения символов таблицы в HTML-документе воспользуйтесь следующим синтаксисом:

&# + код + ;

Кодировка Windows-1251 (CP1251) .0 .1 .2 .3 .4 .5 .6 .7 .8 .9 .A .B .C .D .E .F
8.

9.

A.

B.

C.

D.

E.

F.
Ђ
402
Ѓ
403

201A
ѓ
453

201E

2026

2020

2021

20AC

2030
Љ
409

2039
Њ
40A
Ќ
40C
Ћ
40B
Џ
40F
ђ
452

2018

2019

201C

201D

2022

2013
-
2014

2122
љ
459

203A
њ
45A
ќ
45C
ћ
45B
џ
45F

A0
Ў
40E
ў
45E
Ј
408
¤
A4
Ґ
490
¦
A6
§
A7
Ё
401
©
A9
Є
404
«
AB
¬
AC
­
AD
®
AE
Ї
407
°
B0
±
B1
І
406
і
456
ґ
491
µ
B5

B6
·
B7
ё
451

2116
є
454
»
BB
ј
458
Ѕ
405
ѕ
455
ї
457
А
410
Б
411
В
412
Г
413
Д
414
Е
415
Ж
416
З
417
И
418
Й
419
К
41A
Л
41B
М
41C
Н
41D
О
41E
П
41F
Р
420
С
421
Т
422
У
423
Ф
424
Х
425
Ц
426
Ч
427
Ш
428
Щ
429
Ъ
42A
Ы
42B
Ь
42C
Э
42D
Ю
42E
Я
42F
а
430
б
431
в
432
г
433
д
434
е
435
ж
436
з
437
и
438
й
439
к
43A
л
43B
м
43C
н
43D
о
43E
п
43F
р
440
с
441
т
442
у
443
ф
444
х
445
ц
446
ч
447
ш
448
щ
449
ъ
44A
ы
44B
ь
44C
э
44D
ю
44E
я
44F
Кодировки стандарта UNICODE

Юникод (англ. Unicode) — стандарт кодирования символов, позволяющий представить знаки почти всех письменностей мира, и специальных символов. Представляемые в юникоде символы кодируются целыми числами без знака. Юникод имеет несколько форм представления символов в компьютере: UTF-8, UTF-16 (UTF-16BE, UTF-16LE) и UTF-32 (UTF-32BE, UTF-32LE). (Англ. Unicode transformation format - UTF).
UTF-8 — это в настоящее время распространённая кодировка, которая нашла широкое применение в операционных системах и веб-пространстве. Текст, состоящий из символов Unicode с номерами меньше 128 (область с кодами от U+0000 до U+007F), содержит символы набора ASCII с соответствующими кодами. Далее расположены области знаков различных письменностей, знаки пунктуации и технические символы. Под символы кириллицы выделены области знаков с кодами от U+0400 до U+052F, от U+2DE0 до U+2DFF, от U+A640 до U+A69F.

Кодировка UTF-8 является универсальной и имеет внушительный резерв на будущее. Это делает ее наиболее удобной кодировкой для использования в интернете.



Please enable JavaScript to view the

Задаём набор символов

Мета-тег

Нужно добавить на каждую страницу (или в шаблон шапки) специальный мета-тег, сообщающий браузеру о том, какой набор символов ему использовать для отображения текстов. Тег этот стандартный и выглядит обычно так:

(вариант для HTML 5)

Надо вставить его в раздел — лучше в самое начало, сразу после открывающего :

Мета-тег кодировки

Через.htaccess (если ничего не помогает)

Обычно первых двух вариантов достаточно и браузеры отображают текст как надо . Но с некоторыми из них могут быть проблемы и поэтому можно прибегнуть к помощи файла.htaccess .

Для этого в нём нужно прописать такую строчку:

AddDefaultCharset utf-8

Вот и всё. Если вы примените последовательно 3 этих способа задания кодировки на своём проекте, то вероятность того, что всё будет отображено как надо , близка к 100 %.

Как «увидеть», что скрывается за непонятными символами на сайте?

Если вы зашли на веб-страницу, видите «кракозябры» и хотите увидеть нормальный текст, то тут только два пути:

  • сообщить сайтовладельцу, чтобы всё настроил как следует
  • попытаться угадать кодировку самостоятельно. Делается это стандартными средствами браузеров. В Chrome, например, нужно в меню щёлкнуть «Инструменты => Кодировка» и из огромного списка выбрать подходящий набор символов (т.е. угадать).

К счастью, практически все современные веб-проекты делаются в кодировке UTF-8, которая является «универсальной» для разных алфавитов и поэтому всё менее и менее вероятно увидеть эти непонятные символы в Интернет.

7 ответов

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

Example Site

Консистенция помогает уменьшить ошибки и сделать код более читаемым.

Обратите внимание, что атрибут charset не учитывает регистр. Вы можете использовать UTF-8 или utf-8, однако UTF-8 более четкий, читаемый и более точный.

Кроме того, нет абсолютно никакой причины использовать любое значение, отличное от UTF-8, в атрибуте мета-charset или заголовке страницы. UTF-8 является кодировкой по умолчанию для веб-документов с HTML4 в 1999 году и единственным практическим способом создания современных веб-страниц.

Также вы не должны использовать HTML-объекты в UTF-8. Символы, подобные символу авторского права, должны быть напечатаны напрямую. Единственными сущностями, которые вы должны использовать, являются 5 зарезервированных символов разметки: меньше, больше, амперсанд, простой, двойной премьер. Сущностям нужен парсер HTML, который вы не всегда можете использовать в будущем, они вносят ошибки, делают ваш код менее читаемым, увеличивают размеры вашего файла и иногда неправильно декодируют в разных браузерах в зависимости от того, какие объекты вы использовали. Узнайте, как вводить/вставлять авторские права, торговую марку, открытую цитату, закрывать цитату, апостроф, em dash, en dash, bullet, Euro и любые другие символы, с которыми вы сталкиваетесь в своем контенте, и использовать эти фактические символы в своем коде. У Mac есть средство просмотра символов, которое вы можете включить в настройке системы клавиатуры, и вы можете найти, а затем перетащить нужные символы или использовать соответствующий инструмент просмотра клавиатуры, чтобы узнать, какие ключи нужно вводить. Например, товарный знак - Option + 2. UTF-8 содержит все символы и символы на каждом письменном человеческом языке. Поэтому нет никакого оправдания для использования - вместо em emash. Неплохая идея также изучить правила пунктуации и типографики... например, зная, что период проходит внутри закрытой цитаты, а не снаружи.

Использование тега для чего-то типа контента и кодировки иронично, поскольку, не зная этих вещей, вы не могли разобрать файл для получения значения метатега.

Нет, это не так. Браузер начинает синтаксический анализ файла в качестве кодировки по умолчанию браузера: UTF-8 или ISO-8859-1. Поскольку US-ASCII является подмножеством как ISO-8859-1, так и UTF-8, браузер может отлично читать в любом случае... это то же самое. Когда браузер встречает тег мета-кодировки, если кодировка отличается от того, что браузер уже использует, браузер перезагружает страницу в указанной кодировке. Вот почему мы помещаем мета-чарт-тег вверху, сразу после заголовка, перед чем-либо еще, даже заголовком. Таким образом, вы можете использовать символы UTF-8 в своем названии.

Это не совсем так. Если в документе есть только символы US-ASCII, вы можете сохранить его как US-ASCII и использовать его как UTF-8, потому что это подмножество. Но если есть символы Unicode, вы правы, вы должны сохранить как UTF-8 без спецификации.

Если вам нужен хороший текстовый редактор, который сохранит ваши файлы в UTF-8 я рекомендую Notepad ++.

На Mac используйте Bare Bones TextWrangler (бесплатно) из Mac App Store или Bare Bones BBEdit, который находится в Mac App Store за 39,99 $... очень дешево для такого отличного инструмента. В любом приложении есть меню в нижней части окна документа, где вы указываете кодировку документа, и вы можете легко выбрать "UTF-8 no BOM". И, конечно, вы можете установить это как значение по умолчанию для новых документов в настройках.

Но если ваш веб-сервер обслуживает кодировку в HTTP-заголовке, который рекомендуется, оба [метатеги] бесполезны.

Это неверно. Конечно, вы должны установить кодировку в HTTP-заголовке, но вы также должны установить ее в атрибуте мета-charset, чтобы страница могла быть сохранена пользователем, из браузера на локальное хранилище, а затем снова открыта позже, и в этом случае единственным признаком кодирования, которое будет присутствовать, является атрибут мета-кодировки. Вы также должны установить базовый тег по той же причине... на сервере базовый тег не нужен, но при открытии из локального хранилища базовый тег позволяет странице работать так, как если бы она была на сервере, при этом все активы на месте и т.д., не сломанные ссылки.

AddDefaultCharset UTF-8

Или вы можете просто изменить кодировку определенных типов файлов следующим образом:

AddType text/html;charset=utf-8 html

Совет для обслуживания файлов UTF-8 и Latin-1 (ISO-8859-1) должен предоставить UTF-8 файлам текстовое расширение и латинские файлы "txt."

AddType text/plain;charset=iso-8859-1 txt AddType text/plain;charset=utf-8 text

Наконец, рассмотрите вопрос о сохранении ваших документов с окончанием строки Unix, а не в устаревших версиях DOS или (классической) линии Mac, которые не помогают и могут повредить, особенно по линии, поскольку мы все больше и больше получаем от этих устаревших систем. HTML-документ с допустимой кодировкой HTML5, UTF-8 и окончанием строки Unix - это хорошо выполненная работа. Вы можете делиться и редактировать, хранить, читать и восстанавливать и полагаться на этот документ во многих контекстах. Это lingua franca. Это цифровая бумага.

был введен с/для HTML5.

Как указано в документации, оба действительны. Однако предназначен только для HTML5 (и проще вводить/запоминать).

В свое время старый стиль неизбежно станет устаревшим в ближайшем будущем. Я буду придерживаться нового .

Там только один путь, но вверх. В техническом случае, что поэтапный отказ от старого (действительно, ДЕЙСТВИТЕЛЬНО быстрый)

Не оспаривая другие ответы, я думаю, что заслуживает упоминания следующее.

  • "длинная" (http-equiv) нотация и "короткая" равны, в зависимости от того, что наступит первым:
  • Заголовки веб-серверов будут перекрывать все теги ;
  • BOM (отметка байтового байта) переопределит все, и во многих случаях это повлияет на html 4 (и, возможно, на другие вещи тоже);
  • Если вы не объявляете какую-либо кодировку, вы, вероятно, получите текст в "резервной текстовой кодировке", которая определяется вашим браузером. Ни в Firefox, ни в Chrome это utf-8;
  • В отсутствие других подсказок браузер попытается прочитать ваш документ, как если бы он был в ASCII, чтобы получить кодировку, поэтому вы не можете использовать какие-либо странные кодировки (хотя utf-16 с BOM должен делать);
  • В то время как в спецификациях утверждается, что объявление кодирования должно быть в пределах первых 512 байт документа, большинство браузеров попытаются прочитать больше, чем это.

Вы можете протестировать, запустив echo "HTTP/1.1 200 OK\r\nContent-type: text/html; charset=windows-1251\r\n\r\n\xef\xbb\xbfприветпривет" | nc -lp 4500 и указав браузер на localhost:4500 . (Конечно, вы захотите изменить или удалить части. Часть спецификации \xef\xbb\xbf . Будьте осторожны с кодировкой вашей оболочки.)

Первая серьёзная проблема, с которой сталкиваются большинство новичков при , связана с набором символов (англ. character set ). Выражается эта проблема с кодировкой в, так называемых, «кракозябриках», которые мы получаем вместо указанных в HTML-файле символов. В данной статье я хочу остановиться на проблеме с кодировкой подробнее, постараться расставить всё по полочкам и дать варианты решения.

  • Что такое кодировка?
  • Кодировка файла (редактирование в Notepad++)
  • Кодировка отображения (просмотр в браузере)
  • Как указать кодировку HTML-страницы? (метатег charset)
  • Всё ещё есть проблема с кодировкой? (header charset в php)
Что такое кодировка?

Условно говоря, каждый символ (знак) состоит из кода и картинки . Здесь код - это уникальный идентификатор символа в наборе символов, который определяется выбранной кодировкой , а картинка - это визуальное представление символа, которое содержится в файле шрифта в соответствующей коду символа ячейке.

Другими словами, кодировка (англ. charset ) - это набор взаимосвязей кодов символов с их визуальными представлениями в шрифте.

Кодировка файла

HTML-страница представляет собой обычный текстовый файл, кодировка которого выбирается при его создании и/или сохранении на запоминающее устройство (жёсткий диск, флэшка и т.д.) .

В случае с Notepad++, кодировка нового документа задаётся в настройках текстового редактора. Выбираем в меню: Опции > Настройки… - и переходим на вкладку «Новый документ ». Здесь нас интересует секция «Кодировка ». По умолчанию, выбрана кодировка ANSI .

Напомню, что это кодировка, в которой будет храниться HTML-файл.

Впрочем, Вы всегда можете преобразовать кодировку HTML-страницы, используя соответствующие функции текстового редактора. Например, в Notepad++ для этого кликните пункт меню «Кодировки » и выберите нужное преобразование.

В данном случае файл был в кодировке ANSI и я преобразовал его в UTF-8 (без BOM) . О том, что такое этот BOM Вы можете прочитать в моей статье: PHP: как удалить BOM в WordPress - проследовав по .

Кодировка отображения

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

Например, если Вы сохранили HTML-страницу в кодировке ANSI и откроете её в браузере, вместо русских символов Вы можем получить, так называемые, «кракозябрики».

В данном случае нам надо убедиться, что кодировка файла совпадает с кодировкой отображения файла в браузере. Для этого в Firefox кликните иконку меню, а потом пункт «Кодировка ». Если такого у Вас нет, кликните пункт «Изменить » и добавьте элемент «Кодировка » в меню.

Как вы видите, браузер отображает файл в кодировке «Юникод » (например, UTF-8 ) , в то время как файл был сохранён в кодировке ANSI (например, Windows-1251 ) . Выбрав нужную кодировку, мы получим нужный нам результат.

В случае с Notepad++ также имеется возможность выбора кодировки отображения. Для этого кликните пункт меню «Кодировки », а потом нужный вариант используемой для отображения кодировки.

В данном случае я изменил кодировку отображения ANSI на UTF-8 (без BOM) .

Как указать кодировку HTML-страницы?

И так, мы уже разобрались с тем, что такое кодировка и в чём состоит отличие кодировки файла и кодировки отображения. Теперь нам нужно решить проблему с кодировкой, которая заключается в неправильной интерпретации браузером (или любым другим клиентом) кодировки HTML-страницы.

Почему возникают проблемы с кодировкой? Определить кодировку HTML-страницы не просто, а зачастую и не возможно, т.к. у того же браузера нет информации о ней или она указана неправильно.

Для того чтобы указать кодировку HTML-страницы используется специальный метатег. В HTML5 он имеет следующий урезанный вид:

В данном случае указана кодировка UTF-8 (Юникод) .

В более старых версиях HTML этот метатег имеет следующий вид:

Этот метатег создаёт HTTP-заголовок Content-Type , в котором указывается тип документа text/html и его кодировка Windows-1251 (ANSI) .

Лично я рекомендую использовать именно этот вариант, т.к. с ним будет меньше всего проблем. Главное чтобы такой метатег присутствовал в секции HEAD , и указанная в нём кодировка соответствовала кодировке файла. В большинстве случаев этого будет достаточно.

Всё ещё есть проблема с кодировкой?

В некоторых случаях указать метатег с кодировкой HTML-страницы будет недостаточно. Такая проблема может быть вызвана настройками самого сервера, на котором находится файл HTML-страницы. Дело в том, что сервер способен выдавать свой HTTP-заголовок Content-Type , который будет, условно говоря, иметь приоритет перед метатегом.

В данном случае эту проблему можно решить путём внесения изменений в настройки сервера. Я не буду вдаваться в детали данного вопроса и порекомендую лишь отключать всю эту перекодировку через файл .htaccess , например:

CharsetDisable Off

Также можно производить изменения HTTP-заголовка Content-Type и программными средствами. В том же PHP для этого используется функция header() , например: