html lang en что это значит
Html lang en что это значит
Глобальный атрибут lang помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователем должны быть написаны редактируемые элементы. Атрибут содержит единственный “языковой тег” ( language tag ) в формате, определённом в Tags for Identifying Languages (BCP47).
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Если значение атрибута — пустая строка ( lang=»» ), язык устанавливается, как неизвестный. Если тег языка недействителен согласно BCP47, он устанавливается, как недействительный.
Подробный синтаксис BCP47 достаточно подробен, чтобы отмечать специфичные языковые диалекты, но в большинстве случаев его использование намного проще.
Языковой тег состоит из языковых вложенных тегов, разделённых дефисом, где каждый вложенный тег указывает на определённое свойство языка. 3 наиболее распространённых вложенных тега:
Подтег скрипта предшествует подтегу региона, если присутствуют оба тега — ru-Cyrl-BY — это русский язык, написанный кириллицей, на котором разговаривают в Беларуси.
Чтобы найти правильный подтег кода языка, используйте the Language Subtag Lookup.
Даже если указан атрибут lang, то он может не учитываться, поскольку атрибут xml:lang имеет приоритет над lang.
Объявление языка в 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 может относится к обоим вариантам. Дополнительно, разметка направления текста применяет к тексту целый ряд различных значений, в то время, как язык является простым переключателем, который не соответствует поставленным задачам.
Зачем использовать атрибут языка?
Intended audience: шифровальщики HTML (используя редакторы или скрипты), разработчики скриптов (PHP, JSP, и т.д.), и каждый, кто задается вопросом, почему он должен использовать языковые атрибуты в HTML.
Question
Почему я должен использовать атрибут языка на веб-страницах?
Quick answer
Определение языка вашего контента позволяет автоматически сделать ряд вещей, от изменения внешнего вида и поведения страницы, к добыванию информации, изменению способа работы приложения. Некоторые из языковых программ работают на уровне документа в целом, некоторые работают с соответствующими отмеченными фрагментами документа.
Лучше всего добавить информацию о языке к вашему контенту сейчас для того, чтобы пожинать плоды тогда, когда появятся новые разработки. Это легко сделать при создании контента, но сложнее модернизировать позже.
Details
Здесь перечислены некоторые из случаев, в которых информация о языке полезна в данный момент, однако, так как спецификации и браузеры развиваются, то в будущем может быть много дополнительных программ для установки информации о языке.
Стилизация страниц
Например, возможно, потребуется изменить шрифты и межстрочный интервал, чтобы разместить различные алфавиты, кавычки сгенерированные с помощью стиля могут отличаться языком, ударение, возможно, надо будет выразить способами, которые зависят от языка, и т.д.
Следующий пример показывает, как можно было бы установить определенный шрифт для встроенного Арабского текста на странице.
Other typographic and layout features that are affected by language include line-breaking, justification, and case conversion, and more are coming as the specifications develop.
Выбор шрифта
Клиентские приложения могут использовать (и используют) информацию о языке для выбора соответствующих языку шрифтов, что улучшает общее впечатление пользователя от страницы.
Например, на странице закодированной в Unicode, текст на Упрощенном Китайском, Традиционном Китайском, Японском, и Корейском языках может разделять ту же самую точку кода для идеографических символов, но люди, которые говорят на этих языках ожидают глифы, которые используются для небольших изменений от языка к языку. При отсутствии явного стиля, примененного автором контента, некоторые браузеры автоматически назначают соответствующие шрифты согласно к языку контента. Иллюстрации на рисунке ниже показывают как повлияет на текст тот факт, если мы ничего не будем менять, но при наличии значения языкового атрибута в таких браузерах как Firefox или Internet Explorer.
Поиск
Хотя автоматическое определение языка обычно используется крупными поисковиками для определения языка ресурсов, внутренняя разметка страницы может использоваться для улучшения качества результатов поиска, которые основанные на лингвистических предпочтениях пользователя.
Программы для проверки орфографии и грамматики
Средства разработки могут приспосабливать проверки правописания и грамматики, которые базируются на языке контента, или игнорировать контент, который не написан языком программы, которая проверяет правописание. Это может значительно повысить эффективность при проверке орфографии.
Перевод
Инструменты для перевода могут использовать языковые атрибуты для определения страниц или разделов текста на определенном языке и автоматически настроить рабочий процесс или защитить текст от изменений переводчиком в инструментах для перевода.
Программы для чтения нетекстового контента
Информация о языке помогает синтезаторам речи и переводчикам Брайля выдавать полезные результаты. Эти приложения должны знать могут ли они выдавать результат в тексте, или же, возможно, им необходимо переключиться на другой языковой режим.
Анализаторы и скрипты
Отметка контента информацией о языке также позволяет специфическую языковую обработку.
Например, скрипт или таблица стилей XSLT могут использоваться для различных вещей, включая:
Имейте в виду, что при создании информации вы не всегда знаете, как позже люди захотят ее обработать.
By the way
За последние годы увеличилась польза отметки языка, так как технология прогрессировала, и будет улучшаться по мере продвижения вперед. Во многих случаях эти программы могут и не быть вам важными, когда вы впервые разрабатываете свой контент, но с течением времени их значение может возрасти. Тем не менее, в настоящее время мы сталкиваемся с круговой проблемой. Люди, которые не видят приложений с информацией о языке не обеспечивают такой информацией свой контент. Приложения, связанные с языком разворачиваться медленно, пока эта информация не будет широко применяться к контенту. Этот цикл может быть нарушен авторами контента, которые назначают информацию о языке как само собой разумеющееся. Чем больше будет правильно отмеченного контента, тем более полезными и всепроникающими станут такие программы. Как правило, очень легко добавить информацию о языке и это не несет никаких санкций.
Базовая структура HTML-документа с объяснением каждой строчки
Под катом — разбор каждой строчки
Обычно, когда я начинаю новый проект, я либо копирую HTML-структуру последнего сайта, который я создал, либо перехожу к HTML5 Boilerplate и копирую их шаблон. Недавно я не начал новый проект, но мне пришлось документировать структуру, которую мы используем на работе для сайтов, которые мы строим. Таким образом, простое копирование и вставка не были вариантом, я должен был понять, какой выбор был сделан. Поскольку я потратил довольно много времени на исследование и создание структуры, я решил поделиться ею с вами.
Разбор каждой строки
Общее
Для олдскульщиков, нам не нужны никакие другие doc types, которые вы выучили наизусть. Этот будет единственным и неповторимым. Несмотря на то, что сегодня нет других реальных вариантов, он должен присутствовать по соображениям совместимости.
Этот атрибут объявляет кодировку символов документа. Если оставить его выключенным, определенные символы могут отображаться некорректно в некоторых браузерах.
Вот как Safari отображает мое имя с метатегом charset и без него.
Manuel Matuzović — Manuel Matuzović
Мета-тег области просмотра позволяет нам изменять ширину области просмотра, что необходимо для адаптивного веб-дизайна. width = device-width устанавливает ширину области просмотра равной ширине экрана. initial-scale управляет уровнем масштабирования при первой загрузке страницы.
Я не уверен, что установка initial-scale = 1 по-прежнему необходима. Кажется, я где-то читал, что это нужно только для Safari на viewport должен появляться в документе как можно раньше, чтобы обеспечить правильную визуализацию документа.
Параметр shrink-to-fit = no больше не нужен, начиная с iOS 9.3.
Заголовок, описание, соцмедиа
Уникальное название страницы. Он отображается во многих местах, например, на вкладке браузера, в результатах поиска, когда вы сохраняете страницу в качестве закладки и т.д.
Я режу горчицу при поддержке модуля JS. Если браузер поддерживает модули JavaScript, это означает, что это браузер, который поддерживает современный JavaScript, такой как модули, синтаксис ES 6, выборка и т. Д. Я отправляю большую часть JS только этим браузерам и использую класс js в CSS, если стили компонента отличается, когда JS активен.
Print CSS для сайта.
Уникальное описание страницы, например, отображаемое на страницах результатов поиска. Он может быть любой длины, но поисковые системы усекают фрагменты до
Уникальное название страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.
Уникальное описание страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.
Изображение, отображаемое, когда вы делитесь ссылкой на страницу в социальных сетях, приложениях чата или других сайтах, которые очищают URL-адреса.
В идеале это должно быть квадратное изображение с важным содержанием, размещенным в центре квадрата в прямоугольнике с соотношением сторон 2:1. Это гарантирует, что изображение будет хорошо смотреться на карточках с изображениями прямоугольной и квадратной формы.
Вот как это изображение будет выглядеть в Twitter и WhatsApp.
Правила для Twitter: изображения для этой Card поддерживают соотношение сторон 2:1 с минимальными размерами 300×157 или максимальными 4096×4096 пикселей. Размер изображений не должен превышать 5 МБ. Поддерживаются форматы JPG, PNG, WEBP и GIF.
Описание изображения. Не используйте этот метатег, если изображение носит чисто декоративный характер и не содержит значимой информации. Программы чтения с экрана игнорируют изображение, если мы не предоставляем замещающий текст.
Необязательное свойство Open Graph, но рекомендуется. Он определяет естественный язык страницы.
Канонический URL страницы. Обязательное свойство для допустимых страниц Open Graph.
Иконки и адресная строка
theme-color предоставляет браузерам цвет CSS для настройки отображения страницы или окружающего пользовательского интерфейса.
Поддерживаемые браузеры: Chrome, Brave и Samsung Internet на Android.
Значок 32 × 32 пикселя для устаревших браузеров. Он должен находиться в корне вашего веб-сайта.
Большинство современных браузеров поддерживают значки SVG. Преимущества favicon.svg в том, что он выглядит лучше при масштабировании, потому что это векторное, а не растровое изображение, и мы можем добавлять HTML и CSS в SVG, что означает, что мы можем поддерживать темный режим.
Фавикон на моем сайте в светлом режиме.
Фавикон на моем сайте в тёмном режиме.
Значок 180 × 180 пикселей устройства Apple будут использовать, если вы добавите страницу на главный экран.
Используйте элемент canonical ссылки, чтобы предотвратить проблемы SEO, вызванные дублированием контента, указав исходный источник для страниц, доступных по нескольким URL-адресам.
Это не абсолютный минимум, но это то, что мне нужно на большинстве сайтов, которые я создаю. Подводя итог, я добавил к этому сообщению несколько тегов, которые нам, вероятно, больше не нужны, а также некоторые другие, которые могут вам понадобиться время от времени. Если вы хотите узнать больше об элементе head и его дочерних элементах, ознакомьтесь с фантастическим репозиторием HEAD Джоша Бучи.
Штуковины, которые нам больше не нужны
По словам Андрея Ситника, для последних версий Windows этого больше не требуется.
Начиная с IE11, режимы документов устарели и больше не должны использоваться, кроме как на временной основе.
Начиная с IE11, режим Edge является предпочтительным режимом документа; он представляет собой высочайшую поддержку современных стандартов, доступных для браузера.
Начиная с Safari 12, нам больше не нужен отдельный вариант значка для закрепленных вкладок.
Другие примечательные элементы
RSS-канал для вашего сайта.
Отключите автоматическое определение и форматирование телефонных номеров.
Запретите Twitter использовать информацию о вашем сайте в целях персонализации.
Облачные серверы от Маклауд быстрые и безопасные.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Работа с языком в 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 селекторы для автоматического применения различных стилей при изменении языка контента. Следующая статья рассматривает различные способы того, как это сделать.