- Атрибут language
- Синтаксис
- Значения
- Значение по умолчанию
- Валидация
- Типы тегов
- HTMLElement: lang property
- Value
- Examples
- Specifications
- Browser compatibility
- Found a content problem with this page?
- HTML DOM Element lang
- Related Pages:
- Syntax
- Property Value
- Return Value
- Browser Support
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- How to set HTML lang attribute in Next.js
- How to change the lang attribute in NextJS
- Locales
- Default locale
- Multiple domains for multiple languages
- The «domains» property
- Switch between different locales
- Using Next.js Link
- Conclusion
Атрибут language
Атрибут language указывает язык написания скрипта. Данный атрибут осуждается, а вместо него следует применять type , который указывает MIME-тип для определенного языка.
Синтаксис
Значения
Атрибут language не чувствителен к регистру и может принимать одно из четырех значений.
JavaScript язык программирования JavaScript. К этому значению часто еще присоединяют номер версии, например — JavaScript1.3. JScript Разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах. VBS
VBScript Язык программирования VBScript основанный на Visual Basic. Является детищем Microsoft и поддерживается преимущественно браузером Internet Explorer.
Значение по умолчанию
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
HTMLElement: lang property
The HTMLElement.lang property gets or sets the base language of an element’s attribute values and text content.
The language code returned by this property is defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47). Common examples include «en» for English, «ja» for Japanese, «es» for Spanish and so on. The default value of this attribute is unknown . Note that this attribute, though valid at the individual element level described here, is most often specified for the root element of the document.
This also only works with the lang attribute and not with xml:lang .
Value
Examples
// this snippet compares the base language and // redirects to another URL based on language if (document.documentElement.lang === "en") window.location.href = "Some_document.html.en"; > else if (document.documentElement.lang === "ru") window.location.href = "Some_document.html.ru"; >
Specifications
Browser compatibility
BCD tables only load in the browser
Found a content problem with this page?
This page was last modified on Apr 7, 2023 by MDN contributors.
Your blueprint for a better internet.
HTML DOM Element lang
The lang property sets or returns the value of an element’s lang attribute.
The lang attribute specifies the element’s language code, like «en» for English, «es» for Spanish, or «fr» for French.
Related Pages:
Syntax
Property Value
Return Value
Browser Support
element.lang is supported in all browsers:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
How to set HTML lang attribute in Next.js
Changing the lang attribute on the HTML element could be useful to let search engines know what language is your content written in. The HTML lang attribute is used to indicate the language of the document. This can be used by browsers to display content in a way that is more appropriate for the user’s language. It can also be used by some search engines to index and rank results based on the user’s language preference. The HTML tag is also used to declare the character encoding of the document. This is important for ensuring that text is displayed correctly when viewed in different languages. The lang attribute is very important to be specified so you don’t risk your search index ranking.
How to change the lang attribute in NextJS
Since Next.Js is a React framework, it does not work the same way since there is no HTML file to edit, when you first create the next application with the command npx create-next-app it doesn’t automatically set the lang attribute to English. lang attribute is not set to the web page or pages by next.js Next.js makes it easy to make your application support multiple languages and allows us to change the lang attribute from the next.config.js file. You only need to change the i18n (i18next) property inside the next configuration file
/** @type */ const nextConfig = . i18n: locales: ["en"], defaultLocale: "en", >, > module.exports = nextConfig
Locales
A list of the locales that are supported by your application, if your application only supports the English language, then you only need to add the English ISO language code. Or if your application supports multiple languages like English as well as Spanish, then you have to add both of them to the list, for example:
const nextConfig = . i18n: locales: ["en", "esp"], defaultLocale: "en", >, >
Not the lang attribute has been added by Next.js Language attribute added next.js
Default locale
The defaultLocale property of the Next.js configuration file accepts only a string, which is the default ISO language code that your application supports. If your application has a default language of French, then your default locale value should be like this:
const nextConfig = . i18n: locales: ["en", "fr"], defaultLocale: "fr", // default lang fr >, >
If you don’t know the language code that you want, here is a list of all the language codes that you can use.
Multiple domains for multiple languages
If your website has multiple domain names for different languages, then you can use another property that Next.js provides, which is the domains property.
The «domains» property
The domains property is a list of domains for specific languages. For example, if you have a domain with the name «example.com» and you want it to have the English language, and you also have another domain for the french language which is «example.fr» then setting the domains would be very useful. Example
/** @type */ const nextConfig = i18n: locales: ["en", "fr"], defaultLocale: "en", domains: [ /** * the domain example.com will * have english language */ domain: "example.com", defaultLocale: "en-US", >, /** * the domain example.fr will * have french language */ domain: "example.fr", defaultLocale: "fr", >, domain: "example.nl", defaultLocale: "nl-NL", /** * Other locales in the list * will be redirected to this domain */ locales: ["nl-BE"], >, ], >, > module.exports = nextConfig
In the example above, the main domain which is «example.com» will have a lang attribute set to «en» which means it will have the English language. «example.fr»(s) HTML lang attribute will be set to «fr» (french language). «example.nl»(s) HTML lang attribute will be set to «nl» (dutch language) also any locales in the locales list will be redirected to this domain, in this case, the «nl-BE» locale will be redirected to the «example.nl» domain.
Switch between different locales
We can switch between different locales in Next.js by using the Next.js router. Let’s say you want to redirect the user to the home page / but with a different locale, here is how to do it
const changeLocale = () => router.push( "/todo", <>, locale: locale ? (locale === "en" ? "fr" : "en") : "en" > ) >
Using Next.js Link
Link href="/todo" locale=router.locale ? (router.locale === "en" ? "fr" : "en") : "en"> > button>Change localebutton> Link>
Conclusion
The blog post showed how to set up Next.js and add multiple languages. It is an easy process that can be used to make applications support more than one language. If you are looking for an easy way to include multiple languages in your application, Next.js is a great option. That’s it, if you found this blog post valuable, make sure to share it with other cool developers.