Как добавить атрибут lang в html
Перейти к содержимому

Как добавить атрибут lang в html

  • автор:

Как добавить атрибут lang в html

Содержит всю страницу внутри — и метаданные, и контент.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Элемент открывает контейнер, в котором находится всё содержимое страницы. Это корневой, или родительский, элемент всего документа.

Пример

Скопировать ссылку «Пример» Скопировано

     .   .   DOCTYPE html> html> head> . head> body> . body> html>      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Тег ставят сразу после .

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

  • manifest — указывает URI (унифицированный идентификатор ресурса) манифеста, который сообщает браузеру, какие элементы страницы могут быть закэшированы.
  • title — добавляет всплывающую подсказку, которая появляется, когда курсор мыши задерживается в окне веб-страницы.
  • version — определяет версию шаблона HTML-документа, но необходимости в этом нет (устарел в HTML4.01; вышел из употребления с версии HTML5).
  • xmlns — необязательный для HTML5, но необходимый для XHTML-документов атрибут. Определяет пространство имён XML, в котором находится документ.
  • prefix — здесь прописывают open-graph разметку, типа . Это чтобы при репосте с сайта в VK, Facebook и другие соцсети передавались те заголовки, картинки и описания, которые мы укажем.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� В HTML есть атрибут lang , который подсказывает браузеру язык, на котором написан текст на странице. Если добавить lang в , браузер правильно отобразит текст и подберёт подходящую для этого языка пунктуацию. Например, в английском тексте будут такие кавычки “ ” , а в русском такие «» . Пишется так: lang = «en» .

Кроме того, атрибут lang позволяет браузеру понять, отличается ли язык страницы от языка вашей системы. Если да, то браузер предложит пользователю использовать онлайн-переводчик.

   .  html lang="ru"> . html>      

Коды всех языков

Язык Код
Абхазский ab
Азербайджанский az
Аймарский ay
Албанский sq
Английский en
Американский английский en-us
Арабский ar
Армянский hy
Ассамский as
Африкаанс af
Башкирский ba
Белорусский be
Бенгальский bn
Болгарский bg
Бретонский br
Валлийский cy
Венгерский hu
Вьетнамский vi
Галисийский gl
Голландский nl
Греческий el
Грузинский ka
Гуарани gn
Датский da
Зулу zu
Иврит iw
Идиш ji
Индонезийский in
Интерлингва (искусственный язык) ia
Ирландский ga
Исландский is
Испанский es
Итальянский it
Казахский kk
Камбоджийский km
Каталанский ca
Кашмирский ks
Кечуа qu
Киргизский ky
Китайский zh
Корейский ko
Корсиканский co
Курдский ku
Лаосский lo
Латвийский, латышский lv
Латынь la
Литовский lt
Малагасийский mg
Малайский ms
Мальтийский mt
Маори mi
Македонский mk
Молдавский mo
Монгольский mn
Науру na
Немецкий de
Непальский ne
Норвежский no
Пенджаби pa
Персидский fa
Польский pl
Португальский pt
Пуштунский ps
Ретороманский rm
Румынский ro
Русский ru
Самоанский sm
Санскрит sa
Сербский sr
Словацкий sk
Словенский sl
Сомали so
Суахили sw
Суданский su
Тагальский tl
Таджикский tg
Тайский th
Тамильский ta
Татарский tt
Тибетский bo
Тонга to
Турецкий tr
Туркменский tk
Узбекский uz
Украинский uk
Урду ur
Фиджи fj
Финский fi
Французский fr
Фризский fy
Хауса ha
Хинди hi
Хорватский hr
Чешский cs
Шведский sv
Эсперанто (искусственный язык) eo
Эстонский et
Яванский jw
Японский ja

Если после открывающего тега или перед закрывающим тегом < / html>нет комментария, но внутри есть заполненная конструкция . . . < / body>, теги и < / html>можно не писать.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Программисты не пишут стандартную разметку страницы руками. Для этого чаще всего используется плагин Emmet, который позволяет развернуть эту самую стандартную разметку по сочетанию клавиш ! → Tab. Альтернатива восклицательному знаку — html : 5 → Tab.

В стандартной разметке «от Emmet» есть и тег . Остаётся лишь дописать атрибут lang , если он вам нужен. И можно приступать к написанию разметки страницы.

�� Тегу можно добавить атрибут класса. Например, удобно при помощи JS добавлять класс в соответствии с операционной системой пользователя или по типу устройства, и, в зависимости от этого класса, менять поведение сайта. К примеру, на всех сайтах, где предусмотрены попапы, я подключаю скрипт, который проставляет класс . _ popup — opened для тега . Таким образом я могу добавлять дополнительные стили только тогда, когда попап открыт. К примеру, чтобы страница под попапом не прокручивалась, нужно добавить overflow : hidden для . Но во всё остальное время это свойство не нужно. Я пишу следующий блок кода:

 html._popup-opened body  overflow: hidden;> html._popup-opened body  overflow: hidden; >      

Попап открывается → скрипт добавляет класс _popup — opened для → срабатывает стиль для → попап закрывается → скрипт убирает класс → страница снова проматывается.

В общем, используй атрибут класса у для дополнительной, служебной информации.

Атрибут lang

Текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата. Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang . Браузер использует его значение для правильного отображения некоторых символов.

Синтаксис

lang="код языка"

Значения

Значение по умолчанию

Применяется к тегам

Пример

HTML5 IE Cr Op Sa Fx

    Атрибут lang   

Цитата на французском языке: Ce que femme veut, Dieu le veut.

Цитата на немецком: Der Mensch, versuche die Gotter nicht.

Цитата на английском: То be or not to be.

Результат данного примера показан на рис. 1. Для отображения типовых кавычек в примере используется стилевое свойство quotes , а само переключение языка и соответствующего вида кавычек происходит через атрибут lang , добавляемый к тегу .

Вид кавычек для разных языков

Рис. 1. Вид кавычек для разных языков

Объявление языка в HTML

Всегда используйте языковой атрибут тэга html для объявления языка по умолчанию на странице. Если страница содержит контент на другом языке, добавляйте языковой атрибут к элементам, окружающим этот контент.

Используйте lang атрибут для HTML страниц и xml:lang атрибут для страниц XML. Для XHTML 1.x и документов HTML5 Polyglot используйте оба атрибута вместе.

Используйте языковые тэги из IANA Language Subtag Registry . Вы можете найти тэги также с помощью Language Subtag Lookup.

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

Детали

Основы

Всегда используйте языковой атрибут элемента html . Он наследуется всеми другими элементами, и поэтому для текста в head элементе документа будет задан язык по умолчанию.

Обратите внимание, что предпочтительнее использовать html элемент, чем body , так как body элемент не включает в себя текст из head элемента.

Если у вас есть какой-либо контент на странице, язык которого отличается от заданного в языковом атрибуте элемента html , добавляйте языковые атрибуты к элементам окружающим такой контент. Это позволит вам отображать или обрабатывать его различным образом.

С некоторыми частями кода у вас могут возникнуть проблемы. Если у вас есть мультиязычный текст в элементе title , вы не сможете разметить текст, содержащий разные языки, потому что title атрибут поддерживает только символы, а не разметку. То же самое относится к нескольким языкам в значениях атрибутов. На текущий момент эффективное решение этой проблемы отсутствует.

Выбор корректного атрибута

Если ваш документ HTML (то есть обрабатывается, как text/html ), используйте lang атрибут для установки языка документа или блока текста. Например, следующий код установит французский языком по умолчанию:

Screen snap showing a tooltip containing the word

Если ваш код выглядит, как указано ниже, то атрибут языка указывает, что испанский — не только язык контента, но и title текста. Это, очевидно, некорректно.

Вместо этого, перенесите языковой атрибут в другой элемент, как показано в данном примере, в котором span элемент наследует en язык по умолчанию, установленный у html элемента.

Что если нет подходящего элемента для того, чтобы прицепить атрибут языка?

Если вы хотите указать язык контента, но вокруг него нет никакой разметки, используйте такой элемент, как span или div . Вот пример:

You’d say that in Chinese as 中国科学院文献情报中心.

Выбор значений языка

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

Правила создания языковых атрибутов описываются IETF спецификацией, которая называется BCP 47. Помимо описания использования простых тэгов языка таких, как en (английский) или fr (французский), BCP 47 описывает, как сочетать языковые тэги, что позволяет вам указывать региональные диалекты, скрипты и другие варианты, относящиеся к данному языку.

BCP 47 включает в себя, но выходит за рамки ISO списков кодов языков и стран. Чтобы найти подходящий код, вам нужно обратиться к IANA Language Subtag Registry .

Неофициальная утилита Language Subtag Lookup предоставляет удобный фронтенд инструментарий для IANA registry.

Для краткого, но достаточно тщательного ознакомления с синтаксисом тэгов BCP 47, читайте Языковые тэги в HTML и XML . Если необходима помощь в выборе корректного языкового тэга из множества возможных тэгов и комбинаций, смотрите Выбор тэга языка .

Дополнительная информация

Указание метаданных о языке аудитории

Если вы хотите создать метаданные, описывающие скорее язык целевой аудитории страницы, чем язык определенной части текста, реализуйте это с помощью отправки сервером информации в HTTP заголовке Content-Language . Если ваша целевая аудитория говорит более, чем на одном языке, HTTP заголовок позволяет вам использовать список языков, разделённых запятыми.

Это пример HTTP заголовка, объявляющего ресурс смесью английского, хинди панджаби языков:

Content-Language: en, hi, pa

Обратите внимание, что этот подход не сработает, если страница загружается с жесткого диска, CD или другого источника, не являющегося сервером. В настоящее время нет широко распространенного способа использования таких метаданных внутри страницы.

В прошлом многие люди использовали meta элемент с атрибутом http-equiv со значением Content-Language . Из-за давних путаниц и непоследовательных реализаций этого элемента HTML5 спецификация сделала его несоответствующим стандартам HTML, так что вам больше не следует использовать этот элемент.

Для обратной совместимости, HTML5 описывает алгоритм, с помощью которого язык контента может быть определён из HTTP или meta Content-Language информации при определённых условиях. Как бы то ни было, это только запасной механизм для случаев, когда языковой атрибут отсутствует у html тэга. Если вы используете атрибут языка для html , что следует делать всегда, подобные запасные пути бесполезны.

Для подробной информации о Content-Language в HTTP и meta элементах читайте HTTP и meta для информации о языке .

Различные вещи, которые не относятся к делу

Вероятно, стоит упомянуть ещё несколько моментов, которые не имеют отношения к этой дискуссии.

Первое, невозможно объявить язык с помощью CSS.

Второе, DOCTYPE , с которого должен начинаться любой HTML может содержать то, что выглядит для некоторых людей, как объявления языка. DOCTYPE в примере ниже содержит текст EN, что означает ‘English’. Это, тем не менее, указывает на язык schema (схемы), связанной с данным документом – это никоим образом не указывает на непосредственно язык самого документа.

Третье, иногда люди предполагают, что информация о естественном языке может быть получена из кодировки символов. Тем не менее, кодировка символов не позволяет однозначно идентифицировать естественный язык. Должно быть взаимно однозначное сопоставление между кодировкой и языком, чтобы это сработало, а его нет. Одна кодировка может быть использована многими языками, например Latin 1 (ISO-8859-1) используется и французским, и английским, а ещё многими другими языками. В дополнение, кодировка может отличаться в рамках одного языка, например арабский может использовать ‘Windows-1256’ или ‘ISO-8859-6’ или ‘UTF-8’.

Все эти примеры кодировок спорны, так как весь контент сегодня должен быть создан в UTF-8, который охватывает все, кроме самых редких, языки.

В некоторых текстах, таких, как арабский и иврит, отображаемый текст читается в основном справа налево, хотя числа и иностранные термины отображаются слева направо. Необходима разметка, такая, как dir атрибут, для объявления right-to-left содержания. И в некоторых случаях разметка необходима для правильного отображения двунаправленного текста, но это невозможно сделать с помощью разметки языка.

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

Дополнительные материалы

  • Приступаете к работе? Язык в Сети
  • руководство, Работа с языком в HTML
  • Ссылки по теме, Разработка HTML и CSS
    • Язык
    • Использование атрибутов для объявления языка
    • Выбор значений языка
    • Объявление изменений языка в документе

    Как указать/задать атрибут lang?

    Атрибут lang подставляется автоматически в зависимости от языка, который задан сайту. Если язык не выбран, атрибут не подставляется.

    Чтобы задать язык сайту, перейдите в Настройки сайта → Ещё → ЯЗЫК САЙТА → выберите доступный язык из списка → сохраните изменения и опубликуйте все страницы сайта.

    Доступные языки: русский, английский, украинский, казахский, немецкий, французский, испанский, итальянский, португальский, польский, китайский, латышский, японский.

    Похожие вопросы
    • Можно ли давать отдельный доступ пользователям к проектам?
    • Наблюдаются ли у вашего сервиса проблемы из-за блокировок Роскомнадзором?
    • Как сделать бэкап проекта на Тильде?
    • Выписался счёт для тарифа Бизнес на 15000 рублей без скидки. Почему?
    • Где находится Ваш ЦОД?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *