Как сделать русский язык html
Работа с языком в HTML (руководство)
Почему следует прочесть это руководство?
Информация о языке, используемом на странице важна для её доступности, стиля, функций поиска и по другим причинам. Кроме того, информация о языке, которая обычно передается между юзер-агентом и сервером, может быть использована для улучшения пользовательской навигации и локализуемости вашего сайта. Это руководство поможет вам воспользоваться преимуществами, доступными сегодня и в ближайшем будущем, с помощью корректного объявления информации о языке.
После прочтения руководства вы будете:
Целевая аудитория: XHTML/HTML и CSS кодеры, веб-разработчики (PHP, JSP, и т. д.), а также все, кому необходимо руководство по объявлению и использованию языковой информации в HTML. Предполагается, что вы имеете базовое знакомство с HTML и CSS.
Данное руководство объединяет и организует ссылки на статьи, которые, все вместе, помогут вам понять основные аспекты работы с языковой информацией при создании HTML и CSS.
В двух словах
Всегда добавляйте lang атрибут к тэгу html для того, чтобы установить язык по умолчанию вашей страницы.
Если это XHTML 1.x или HTML5 Polyglot документ, используемый, как XML, вам следует также использовать xml:lang атрибут (с тем же значением). Если ваша страница используется только, как XML, то просто используйте xml:lang атрибут.
Выбирайте тэги из списка IANA Subtag Registry и следуйте правилам синтаксиса BCP 47 при использовании структур более сложных, чем просто языковой тэг. Держите свои языковые теги как можно более короткими.
Используйте :lang свойство в CSS, чтобы применять стили, зависящие от языка вашего контента.
Зачем объявлять язык?
Эта часть руководства объясняет мотивы для дальнейшего чтения. Если вы спешите и просто хотите знать, что делать, без теории, то начните читать раздел Как объявить язык страницы или элемента.
Браузеры и другие приложения могут использовать информацию о языке контента для предоставления пользователям наиболее подходящей информации или предоставления информации пользователям наиболее подходящим образом. Чем больше контента будет размечено и размечено правильно, тем более полезными и распространенными такие приложения станут.
Зачем использовать атрибут языка? содержит примеры того, как языковая информация может быть полезной.
Как объявить язык страницы или элемента
Вам следует устанавливать язык текста на странице, используя языковые атрибуты. К сожалению, существует более, чем один атрибут, а также есть несколько вещей, которые необходимо прояснить. Этот раздел обсуждает различные варианты: те, которые следует использовать, и те, которых следует избегать (и почему).
Объявление языка в HTML предоставляет итоговую информацию о том, как объявлять язык, используя атрибуты.
HTTP заголовки, мета элементы и информация о языке описывает, как языковые метаданные отличаются от действительного языка текста, а также Content-Language, используемый в HTTP заголовках и мета элементах.
Работа с языковыми тэгами
В этом разделе рассматривается, как выбирать и создавать языковые теги, то есть значения, используемые для атрибутов языка.
Чтобы быть уверенным в том, что все юзер агенты понимают, какой язык вы имеете в виду, вам необходимо следовать стандартным подходам при предоставлении языковых значений. Вам, вероятно, потребуется рассмотреть, как относиться к диалектным различиям, например между американским и британским английским, которые содержат существенные различия в орфографии и произношении.
Языковые тэги в HTML и XML описывает синтаксис языковых тэгов, использующих спецификацию BCP 47.
Выбор языкового тэга предоставляет практическую информацию о том, как выбрать корректный тэг из тысяч доступных, для представления необходимого вам языка.
Установка языковых настроек браузера
Когда ваш браузер получает документ из Сети, он отправляет HTTP запрос на сервер. Вместе с запросом, браузер также посылает информацию о своих языковых настройках. Эти настройки могут влиять на то, какой контент будет отправлен вам обратно. Узнайте, как устанавливать и изменять эти настройки.
Использование информации о языке для стилизации документа
Вам зачастую необходимо применять различные стили для текста на различных языках (например, шрифт или высота строки, или, вероятно, различные стили выделения и так далее). Если вы задействуете атрибуты для определения языка контента, то вы сможете использовать некоторые мощные CSS селекторы для автоматического применения различных стилей при изменении языка контента. Следующая статья рассматривает различные способы того, как это сделать.
Как настроить кодировку сайта самостоятельно
В статье:
Разбираем, на что влияет кодировка, нужно ли указывать ее самостоятельно, и почему могут появиться так называемые «кракозябры» на сайте.
Зачем нужна кодировка
Кодировка (Charset) — способ отображения кода на экране, соответствие набора символов набору числовых значений. О ней сообщает строка Content-Type и сервер в header запросе.
Несовпадение кодировок сервера и страницы будет причиной появления ошибок. Если они не совпадают, информация декодируется некорректно, так что контент на сайте будет отображаться в виде набора бессвязных букв, иероглифов и символов, в народе называемых «кракозябрами». Такой текст прочитать невозможно, так что пользователь просто уйдет с сайта и найдет другой ресурс. Или останется, если ему не очень важно содержание:
Студентка списывала реферат с формулами, а на сайте слетела кодировка. Реальная история
Google рекомендует всегда указывать сведения о кодировке, чтобы текст точно корректно отображался в браузере пользователя.
Кодировка влияет на SEO?
Разберемся, как кодировка на сайте влияет на индексацию в Яндекс и Google.
«Тип используемой на сайте кодировки не влияет на индексирование сайта. Если ваш сервер не передает в заголовке кодировку, робот Яндекса также определит ее самостоятельно».
Позиция Google такая же. Поисковики не рассматривают Charset как фактор ранжирования или сигнал для индексирования, тем не менее, она косвенно влияет на трафик и позиции.
Если кодировка сервера не совпадает с той, что указана на сайте, пользователи увидят нечитабельные символы вместо контента. На таком сайте сложно что-либо понять, так что скорее всего пользователи сбегут, а на сайте будут расти отказы.
Пример страницы со слетевшей кодировкой
Поэтому она важна для SEO, хоть и влияет на него косвенно через поведенческие. Пользователи должны видеть читабельный текст на человеческом языке, чтобы работать с сайтом.
Виды кодировок
Существует довольно много видов, но сейчас распространены два:
Unicode Transformation Format — универсальный стандарт кодирования, который работает с символами почти всех языков мира. Символы могут занимать от 1 до 4 байт, такое кодирование позволяет создавать мультиязычные сайты.
Есть несколько вариантов — UTF-8, 16, 32, но чаще используют восьмибитное.
Windows-1251
Этот вид занимает второе место по популярности после UTF-8. Windows-1251 — кодирование для кириллицы, созданное на базе кодировок, использовавшихся в русификаторах операционной системы Windows. В ней есть все символы, которые используются в русской типографике, кроме значка ударения. Символы занимают 1 байт.
Выбор кодировки остается на усмотрение веб-мастера, но UTF-8 используют намного чаще — ее поддерживают все популярные браузеры и распознают поисковики, а еще ее удобнее использовать для сайтов на разных языках.
Как определить кодировку на сайте
Определить кодировку страницы своего или чужого сайта можно через исходный код страницы. Откройте страницу сайта, выберите «Просмотр кода страницы» (сочетание горячих клавиш Ctrl+U» в Google Chrome) и найдите упоминание «charset» внутри тега head.
На странице сайта используется кодировка UTF-8:
Указание кодировки в коде страницы
Узнать вид кодирования можно с помощью «Анализа сайта». Сервис проверяет в том числе и техническую сторону ресурса: анализирует серверную информацию, определяет кодировку, проверяет редиректы и другие пункты.
Фрагмент анализа серверной информации сайта
С помощью этого же сервиса можно проверить корректность указанного кодирования. Аудит внутренних страниц «Анализа сайта» проверяет кодировку сервера и сравнивает ее с той, которая указана на внутренней странице. Найденные ошибки Анализ покажет в результатах проверки, и вы сразу узнаете, где нужно исправить.
Отчет о технических данных
Кодировка сервера и страницы
Проверить кодировку еще можно через сервис Validator.w3, о котором писали в статье о проверке валидации кода. Нужная надпись находится внизу страницы.
Кодировка сайта в валидаторе
Если валидатор не обнаружит Charset, он покажет ошибку:
Ошибка указания кодировки
Но валидатор работает не точно: он проверяет только синтаксис разметки, поэтому может не показать ошибку, даже если кодирование указано неправильно.
Если кодировка не отображается
Если вы зашли на чужой сайт с абракадаброй, а вам все равно очень интересно почитать контент, то в Справке Google объясняют, как исправить кодирование текста через браузер.
О проблеме возникновения абракадабры на вашем сайте будут сигнализировать метрики поведения: вырастут отказы, уменьшится глубина просмотров. Но скорее всего вы и раньше заметите, что что-то пошло не так.
Главное правило — для всех файлов, скриптов, баз данных сайта и сервера должна быть указана одна кодировка. Ошибка может возникнуть, если вы случайно указали на сайте разные виды кодировки.
Яндекс советует использовать одинаковую кодировку для страниц и кириллических адресов структуры. К примеру, если робот встретит ссылку href=»/корзина» на странице с кодировкой UTF-8, он сохранит ее в этом же UTF-8, так что страница должна быть доступна по адресу «/%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D0%B0».
Где указать кодировку сайта
Если проблема возникла на вашем сайте, способ исправления зависит от вида сайта. Для одностраничника достаточно указать кодировку в мета-теге страницы, а для большого сайта есть разные варианты:
Кодировка в мета-теге
Добавьте указание кодировки в head файла шаблона сайта.
При создании документа HTML укажите тег meta в начале в блоке head. Некоторые браузеры могут не распознать указание кодировки, если оно будет ниже.
Мета-тег может выглядеть так:
В HTML5 они эквивалентны.
Тег кодировки в HTML
В темах WordPress обычно тег «charset» с кодировкой указан по умолчанию, но лучше проверить.
Кодировка в файле httpd.conf
Инструкции для сервера находятся в файле httpd.conf, обычно его можно найти на пути «/usr/local/apache/conf/».
Если вам нужно сменить кодировку Windows-1251 на UTF-8, замените строчку «AddDefaultCharset windows-1251» на «AddDefaultCharset utf-8».
Осторожнее: если вы измените в файле кодировку по умолчанию, то она изменится для всех проектов на этом сервере.
Убедитесь, что сервер не передает HTTP-заголовки с конфликтующими кодировками.
Кодировка документа
Готовые файлы HTML важно сохранять в нужной кодировке сайта. Узнать текущую кодировку файла можно через Notepad++: откройте файл и зайдите в «Encoding». Меняется она там же: чтобы сменить кодировку на UTF-8, выберите «Convert to UTF-8 without BOOM». Нужно выбрать «без BOOM», чтобы не было пустых символов.
Кодировка Базы данных
Выбирайте нужную кодировку сразу при создании базы данных. Распространенный вариант — «UTF-8 general ci».
Где менять кодировку у БД:
С новой БД проще, но если вы меняете кодировку у существующей базы, то у созданных таблиц и колонок заданы свои кодировки, которые тоже нужно поменять.
Для всех таблиц, колонок, файлов, сервера и вообще всего, что связано с сайтом, должна быть одна кодировка.
Проблема может не решиться, если все дело в кодировке подключения к базе данных. Что делать:
Если вы хотите указать Windows-1251, то пишите не «utf-8», а «cp1251» — обозначение для кодировки Windows-1251 у MySQL.
Чтобы установить UTF-8 по умолчанию, откройте на сервере my.cnf и добавьте следующее:
Вы когда-нибудь сталкивались с проблемами кодировки на сайте?
Объявление языка в HTML
Целевая аудитория: HTML кодеры, веб-разработчики (PHP, JSP, и т. д.), менеджеры веб-проектов, а также все, кто хочет лучше понимать, как объявлять язык текста на веб-странице.
Вопрос
Как установить язык содержимого моей HTML страницы?
Краткий ответ
Всегда используйте языковой атрибут тэга html для объявления языка по умолчанию на странице. Если страница содержит контент на другом языке, добавляйте языковой атрибут к элементам, окружающим этот контент.
Используйте lang атрибут для HTML страниц и xml:lang атрибут для страниц XML. Для XHTML 1.x и документов HTML5 Polyglot используйте оба атрибута вместе.
Используйте вложенные элементы для того, чтобы позаботиться о контенте и значения атрибутов для одинаковых элементов на разных языках.
Детали
Основы
Выбор корректного атрибута
Если ваш документ HTML (то есть обрабатывается, как text/html ), используйте lang атрибут для установки языка документа или блока текста. Например, следующий код установит французский языком по умолчанию:
Атрибут xml:lang не особо полезен для обработки HTML файлов, но он будет перекрывать значение lang атрибута каждый раз, когда вы обрабатываете документ, как XML. Атрибут lang разрешен синтаксисом XHTML и может быть распознан браузерами. Однако, когда используются другие синтаксические анализаторы XML (например, функция lang() в XSLT), вы не можете полагаться на то, что атрибут lang будет распознан.
Что, если содержимое элемента и значения его атрибутов на разных языках?
Иногда язык текста в атрибутах и язык непосредственно контента элемента различаются. Например, в правом верхнем углу этой статьи расположен список ссылок на другие переводы данной страницы. Текст ссылки отображает язык целевой страницы, но связанный title атрибут содержит подсказку на языке текущей страницы:
Вместо этого, перенесите языковой атрибут в другой элемент, как показано в данном примере, в котором span элемент наследует en язык по умолчанию, установленный у html элемента.
Что если нет подходящего элемента для того, чтобы прицепить атрибут языка?
Выбор значений языка
Чтобы быть уверенными, что юзер агенты распознают указанный вами язык, вам следует придерживаться стандартизированному подходу при указании значений атрибутов языка. Вам также необходимо подумать о том, как стандартизированно ссылаться на различные диалекты одного языка, например, такие, как американский и британский английский, которые существенно отличаются своим написанием и произношением.
Правила создания языковых атрибутов описываются IETF спецификацией, которая называется BCP 47. Помимо описания использования простых тэгов языка таких, как en (английский) или fr (французский), BCP 47 описывает, как сочетать языковые тэги, что позволяет вам указывать региональные диалекты, скрипты и другие варианты, относящиеся к данному языку.
Неофициальная утилита Language Subtag Lookup предоставляет удобный фронтенд инструментарий для IANA registry.
Дополнительная информация
Указание метаданных о языке аудитории
Это пример HTTP заголовка, объявляющего ресурс смесью английского, хинди панджаби языков:
Content-Language: en, hi, pa
Обратите внимание, что этот подход не сработает, если страница загружается с жесткого диска, CD или другого источника, не являющегося сервером. В настоящее время нет широко распространенного способа использования таких метаданных внутри страницы.
Различные вещи, которые не относятся к делу
Вероятно, стоит упомянуть ещё несколько моментов, которые не имеют отношения к этой дискуссии.
Первое, невозможно объявить язык с помощью CSS.
Третье, иногда люди предполагают, что информация о естественном языке может быть получена из кодировки символов. Тем не менее, кодировка символов не позволяет однозначно идентифицировать естественный язык. Должно быть взаимно однозначное сопоставление между кодировкой и языком, чтобы это сработало, а его нет. Одна кодировка может быть использована многими языками, например Latin 1 (ISO-8859-1) используется и французским, и английским, а ещё многими другими языками. В дополнение, кодировка может отличаться в рамках одного языка, например арабский может использовать ‘Windows-1256’ или ‘ISO-8859-6’ или ‘UTF-8’.
Все эти примеры кодировок спорны, так как весь контент сегодня должен быть создан в UTF-8, который охватывает все, кроме самых редких, языки.
В некоторых текстах, таких, как арабский и иврит, отображаемый текст читается в основном справа налево, хотя числа и иностранные термины отображаются слева направо. Необходима разметка, такая, как dir атрибут, для объявления right-to-left содержания. И в некоторых случаях разметка необходима для правильного отображения двунаправленного текста, но это невозможно сделать с помощью разметки языка.
То же самое относится к направлению текста. Как и в случае с кодировками, не всегда существует соответствие между языком и текстом, в том числе его направлением. Например, азербайджанский может быть записан справа налево (арабская письменность) и слева направо (латиница и кириллица), соответственно код языка az может относится к обоим вариантам. Дополнительно, разметка направления текста применяет к тексту целый ряд различных значений, в то время, как язык является простым переключателем, который не соответствует поставленным задачам.
Объявление языка в HTML
Целевая аудитория: HTML кодеры, веб-разработчики (PHP, JSP, и т. д.), менеджеры веб-проектов, а также все, кто хочет лучше понимать, как объявлять язык текста на веб-странице.
Вопрос
Как установить язык содержимого моей HTML страницы?
Краткий ответ
Всегда используйте языковой атрибут тэга html для объявления языка по умолчанию на странице. Если страница содержит контент на другом языке, добавляйте языковой атрибут к элементам, окружающим этот контент.
Используйте lang атрибут для HTML страниц и xml:lang атрибут для страниц XML. Для XHTML 1.x и документов HTML5 Polyglot используйте оба атрибута вместе.
Используйте вложенные элементы для того, чтобы позаботиться о контенте и значения атрибутов для одинаковых элементов на разных языках.
Детали
Основы
Выбор корректного атрибута
Если ваш документ HTML (то есть обрабатывается, как text/html ), используйте lang атрибут для установки языка документа или блока текста. Например, следующий код установит французский языком по умолчанию:
Атрибут xml:lang не особо полезен для обработки HTML файлов, но он будет перекрывать значение lang атрибута каждый раз, когда вы обрабатываете документ, как XML. Атрибут lang разрешен синтаксисом XHTML и может быть распознан браузерами. Однако, когда используются другие синтаксические анализаторы XML (например, функция lang() в XSLT), вы не можете полагаться на то, что атрибут lang будет распознан.
Что, если содержимое элемента и значения его атрибутов на разных языках?
Иногда язык текста в атрибутах и язык непосредственно контента элемента различаются. Например, в правом верхнем углу этой статьи расположен список ссылок на другие переводы данной страницы. Текст ссылки отображает язык целевой страницы, но связанный title атрибут содержит подсказку на языке текущей страницы:
Вместо этого, перенесите языковой атрибут в другой элемент, как показано в данном примере, в котором span элемент наследует en язык по умолчанию, установленный у html элемента.
Что если нет подходящего элемента для того, чтобы прицепить атрибут языка?
Выбор значений языка
Чтобы быть уверенными, что юзер агенты распознают указанный вами язык, вам следует придерживаться стандартизированному подходу при указании значений атрибутов языка. Вам также необходимо подумать о том, как стандартизированно ссылаться на различные диалекты одного языка, например, такие, как американский и британский английский, которые существенно отличаются своим написанием и произношением.
Правила создания языковых атрибутов описываются IETF спецификацией, которая называется BCP 47. Помимо описания использования простых тэгов языка таких, как en (английский) или fr (французский), BCP 47 описывает, как сочетать языковые тэги, что позволяет вам указывать региональные диалекты, скрипты и другие варианты, относящиеся к данному языку.
Неофициальная утилита Language Subtag Lookup предоставляет удобный фронтенд инструментарий для IANA registry.
Дополнительная информация
Указание метаданных о языке аудитории
Это пример HTTP заголовка, объявляющего ресурс смесью английского, хинди панджаби языков:
Content-Language: en, hi, pa
Обратите внимание, что этот подход не сработает, если страница загружается с жесткого диска, CD или другого источника, не являющегося сервером. В настоящее время нет широко распространенного способа использования таких метаданных внутри страницы.
Различные вещи, которые не относятся к делу
Вероятно, стоит упомянуть ещё несколько моментов, которые не имеют отношения к этой дискуссии.
Первое, невозможно объявить язык с помощью CSS.
Третье, иногда люди предполагают, что информация о естественном языке может быть получена из кодировки символов. Тем не менее, кодировка символов не позволяет однозначно идентифицировать естественный язык. Должно быть взаимно однозначное сопоставление между кодировкой и языком, чтобы это сработало, а его нет. Одна кодировка может быть использована многими языками, например Latin 1 (ISO-8859-1) используется и французским, и английским, а ещё многими другими языками. В дополнение, кодировка может отличаться в рамках одного языка, например арабский может использовать ‘Windows-1256’ или ‘ISO-8859-6’ или ‘UTF-8’.
Все эти примеры кодировок спорны, так как весь контент сегодня должен быть создан в UTF-8, который охватывает все, кроме самых редких, языки.
В некоторых текстах, таких, как арабский и иврит, отображаемый текст читается в основном справа налево, хотя числа и иностранные термины отображаются слева направо. Необходима разметка, такая, как dir атрибут, для объявления right-to-left содержания. И в некоторых случаях разметка необходима для правильного отображения двунаправленного текста, но это невозможно сделать с помощью разметки языка.
То же самое относится к направлению текста. Как и в случае с кодировками, не всегда существует соответствие между языком и текстом, в том числе его направлением. Например, азербайджанский может быть записан справа налево (арабская письменность) и слева направо (латиница и кириллица), соответственно код языка az может относится к обоим вариантам. Дополнительно, разметка направления текста применяет к тексту целый ряд различных значений, в то время, как язык является простым переключателем, который не соответствует поставленным задачам.