How to set html lang attribute in next.js

Internationalization Attributes

LANG

The LANG attribute specifies the language of an element’s attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language’s proper quotation marks when rendering the Q element.

The attribute value is case-insensitive, and should be specified according to RFC 1766; examples include en for English, en-US for American English, and ja for Japanese. Whitespace is not allowed in the language code.

Use of the LANG attribute also allows authors to easily change the style of text depending on the language. For example, a bilingual document may have one language in italics if rendered visually or a different voice if rendered aurally. The HTML of such a document might be as follows:

A document’s primary language may be set using the LANG attribute on the HTML element, or, alternatively, by using the Content-Language HTTP header.

DIR

The DIR attribute specifies the directionality of text—left-to-right (DIR=ltr, the default) or right-to-left (DIR=rtl). Characters in Unicode are assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly. For example, while English characters are presented left-to-right, Hebrew characters are presented right-to-left.

Unicode defines a bidirectional algorithm that must be applied whenever a document contains right-to-left characters. While this algorithm usually gives the proper presentation, some situations leave directionally neutral text and require the DIR attribute to specify the base directionality.

Text is often directionally neutral when there are multiple embeddings of content with a different directionality. For example, an English sentence that contains a Hebrew phrase that contains an English quotation would require the DIR attribute to define the directionality of the Hebrew phrase. The Hebrew phrase, including the English quotation, should be contained within a SPAN element with DIR=rtl.

Specifying the Scripting Language

While JavaScript is the default scripting language of the web, browsers can support any number of additional languages. For example, Internet Explorer also supports a scripting language derived from Visual Basic named VBScript. In order to specify the scripting language of choice, the <script> tag’s “type” attribute is used. Technically, “type” specifies the MIME type of the script. The following example uses “type” to specify JavaScript’s MIME type, “text/javascript”.

<script type="text/javascript">
  // JavaScript code here
</script>

In older versions of HTML it was necessary to specify a value for “type”. However, starting in HTML5, “type” defaults to “text/javascript”. This decision was made because the W3C realized that JavaScript is the only universally supported scripting language. Therefore, can be shortened in the following fashion.

<script>
  // JavaScript code here
</script>

The “language” Attribute

There is a second attribute, “language”, which can be used to specify the scripting language. Unlike “type”, the possible values for “language” were never standardized. This attribute has been for a long time now, but some people still use it. It should not be used under any circumstances.

Inline and External Scripts

The <script> tag allows code to either be embedded directly into HTML, or included from external script files. Inline scripts are created by placing code between <script> and </script> tags in an HTML file. The following code shows an example inline <script>.

<script>
  // Inline JavaScript code here
</script>

Inline scripts are a quick and easy way to add code to web pages. However, large scripts can also lead to cluttered HTML files. The alternative approach is to include code in external script files. The external files are referenced via a URL specified by the “src” attribute. The following example shows how external script files are included. In this example, the external script file is named external.js, and is located in the same directory as the HTML file. Also, note that the closing </script> tag is still required.

<script src="external.js"></script>

In summary: Declaring language in HTML FAQs

Is it necessary to declare the language of an HTML page?

No, it is not strictly necessary to declare the language of an HTML page. However, it is highly recommended as it helps with preventing errors.

How do search engines handle your page if you do not declare its language?

If a page does not contain a language declaration, search engines will try to determine that page’s language on their own.

How do you use the lang attribute?

Just add the lang attribute to your HTML code, ideally at the top of the document.

How can you use multiple languages on your website?

You can set a lang attribute for every paragraph, stating the language you are using.

Anatomy of an Attribute

Attributes contain two parts: the attribute name and the attribute value. An attribute is always in this format: the attribute name, followed by an equal sign, followed by the attribute value which is contained in single or double (either is acceptable) quotation marks. This is shown below:

Correct Attribute Formats

name=»value»

name=’value’

The value can be almost anything within the scope of the attribute. There are several types of attributes, some requiring specialized formats to be of any use.

But beware: below are incorrect attribute formats that should be avoided. With HTML, you can use the first two under specific circumstances—I’ll explain those circumstances in —but it is wise and less confusing (to both browser and you) to avoid any such shortcuts. Besides, while HTML will let you get away with it, XHTML won’t; these shortcuts result in XML that’s not well-formed.

The third one is, arguably, the worst—the quotes don’t match, so the attribute doesn’t end when it’s supposed to. The fourth and fifth just make no sense to the browser, regardless of markup language.

Options for structuring multilingual websites

Figure: Multilingual websites — Author: Seobility — License: CC BY-SA 4.0

If a website contains pages and content in different languages, e.g. if a company operates internationally, there are various ways to structure it.

For example, you could purchase a country domain for each country, e.g. example.de, example.es, example.it etc.

Another option would be to host each language version on a subdomain, e.g. de.example.com, es.example.com, it.example.com, and so on.

Alternatively, you can create a subdirectory for each language, with the major version of the site remaining in the root directory, e.g. example.com/es/ or example.com/it/.

For dynamic pages, it is also possible to add a lang parameter for the respective language to the URL, e.g. example.com/products.php?lang=es.

The “defer” Attribute

As previously stated, <script> tags cause the browser to block the rest of the page while the script is processed. This can lead to problems if the script references DOM elements which haven’t finished loading yet. In this scenario, the DOM-related code is typically placed in an event handler such as window load or DOMContentLoaded. Another option is to postpone execution until the document has been parsed using the “defer” attribute. Like “async”, “defer” is a Boolean attribute that should only be used with external script files. The following example shows how “defer” works. This example requires an HTML file and a separate JavaScript file named defer.js. The HTML source is shown below.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>defer Example</title>
  <meta charset="utf-8" />
  <script src="defer.js" defer="defer"></script>
</head>
<body>
  <span id="message"></span>
</body>
</html>

The code for defer.js is shown below. If the “defer” attribute were not present, this code would fail because the DOM is not ready when the <span> element is accessed.

var span = document.getElementById("message");

span.textContent = "The DOM is ready for scripting!";

It is possible to specify both “async” and “defer” on the same <script> element. This is possible so that browsers that do not support “async” can fall back on the “defer” behavior instead of synchronous blocking. According to the specification, “defer” is overridden by “async”. Unfortunately, “defer” is also unsupported in Opera.

Core Attributes

ID

The ID attribute uniquely identifies an element within a document. No two elements can have the same ID value in a single document. The attribute’s value must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens («-«), underscores («_»), colons («:»), and periods («.»). The value is case-sensitive.

The following example uses the ID attribute to identify each of the first two paragraphs of a document:

The paragraphs in the example could have style rules associated with them through their ID attributes. The following Cascading Style Sheet defines unique colors for the two paragraphs:

The paragraphs in the initial example could also be used as a target anchor for links:

Note that old browsers do not support the ID attribute for link anchors. For compatibility, authors should use <>…</A> within the element instead of ID.

Since ID and A’s NAME attribute share the same name space, authors cannot use the same value for an ID attribute and an A element’s NAME attribute for different elements in the same document. Also note that while NAME may contain entities, the ID attribute value may not.

CLASS

The CLASS attribute specifies the element to be a member of one or more classes. Classes allow authors to define specific kinds of a given element. For example, an author could use <CODE CLASS=Java> when giving Java code and <CODE CLASS=Perl> when giving Perl code.

Unlike with the attribute, any number of elements can share the same class. An element may also belong to multiple classes; the CLASS attribute value is a space-separated list of class names. The value is case-sensitive.

Note that some older browsers do not support multiple classes. Such browsers typically ignore a CLASS attribute that specifies multiple classes.

The CLASS attribute is particularly useful when combined with style sheets. For example, consider the following navigation bar:

This example’s use of the CLASS attribute allows style rules to easily be added. The following Cascading Style Sheet suggests a presentation for the preceding example:

STYLE

The STYLE attribute allows authors to specify style rules inline for a single occurrence of an element. An example follows:

When the STYLE attribute is used, a default style sheet language must be specified for the document by setting the Content-Style-Type HTTP header to the media type of the style sheet language. The previous example could use the following META element in the document’s HEAD:

In most cases, use of the or attributes is a better choice than using STYLE since ID and CLASS can be selectively applied to different media and since they provide a separation of content and presentation that often simplifies maintenance.

TITLE

The TITLE attribute provides a title for an element and is commonly implemented as a «tooltip» on visual browsers. The attribute is most useful with A, AREA, LINK, and IMG elements, where it provides a title for the linked or embedded resource. Some examples follow:

TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. Examples:

Other Attributes

The core attributes are hardly the only attributes in (X)HTML, simply the most commonly used. Many of these others come with restrictions on them similar to the ones on the attributes. For example:

Numeric attributes should only contain numbers. In HTML, a non-numeric value will result in a validation error. This is not true with XHTML—XML DTDs do not allow for such a rule—but your page is still likely to act strangely.
Some, like the and attributes, require their contents to be in a specific format to be of any use.
Boolean attributes have a list of only one value, which gives you two choices: take it or leave it. Boolean means having one of only two possible values: true or false. In this case, including the attribute means true; omitting it means false. In (X)HTML, the values and names for boolean attributes are identical. For example, the attributes and , which are used in image maps and forms (respectively), would be written and . Their real values are their presence or absence.
And some, like , allow their contents to be simply a string of text.

The Attribute

There is an attribute that XHTML requires that HTML doesn’t have: (short for XML namespace). This attribute usually goes in the root element of an XML document (in this case, the start tag). The namespace serves as an identifier for an XML language, and almost all XML languages read by browsers have one. Examples are:

MathML: http://www.w3.org/1998/Math/MathML
SMIL: http://www.w3.org/TR/REC-smil
SVG: http://www.w3.org/2000/svg
XHTML: http://www.w3.org/1999/xhtml

This sets the namespace for an XML language, which is a means for the browser to identify which language is being used. Yes, this does mean that the Doctype isn’t quite sufficient and can even be done away with—but without a Doctype, good luck validating your markup and you can kiss almost all your character entity references goodbye.

Your First Webpage As An XHTML Document

<?xml version=»1.0″ encoding=»UTF-8″?>
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World</h1>
<p><strong>Welcome!</strong> This is my <em>first</em> webpage!</p>
<p>It’s a fairly simple webpage, but it <em>is</em> a complete webpage.</p>
</body>
</html>

Now that the namespace has been included, browsers can properly read this document if it was .xhtml, .xht, or .xml extension—with only one major exception: Internet Explorer. Only as of version 9 is Internet Explorer able to read XHTML. Saving a document written in XHTML with the .html or .htm extension causes the file to be read as HTML, which all versions of Internet Explorer can read. You may remember me talking about the vocabularies of the two markup languages being identical to allow a smooth transition back in . This is what I was talking about.

Common Mistakes When Implementing HTML Lang Tags

Here are some of the most common mistakes made while using the HTML lang attribute:

Using an incorrect language code. For example, using ch for China, instead of zh.
Common typos when writing lang tag syntax. For example, writing <html lan=”en”> instead of <html lang=”en”> for English and or <html lang=”tu”> instead of <html lang=”tr”> for Turkish.
Adding incorrect country codes such as using country code before the language. For example, <html lang=”bn-in”> is correct, while <html lang=”in-bn”> is incorrect. The language should always precede the country code. To view the full list of country codes, you can visit this resource.

Why is the HTML Lang Attribute Important and Useful?

The HTML lang attribute is crucial because it helps search engines like Google, Bing, Yandex, and others to return language-specific results on the SERP.

Image source: Reliablesoft

If you have several versions of a webpage for different regions or languages, you should inform the search engines about these versions. This will help the search engines display the best version of your site based on their language or location.

Here are some of the top reasons why the HTML lang tag is useful:

It helps the search engines understand the correct language of the webpage. This improves the quality of the search results because the search engines can return results based on the searcher’s linguistic preferences.
Browser extensions and other software such as translation tools can use the lang tag to display the information in the correct language.
Lang tags also let you vary the styling of the content by language. For example, you can set a specific font for a particular language. Besides, user agents can make automatic font selections based on the document’s language.
Screen readers, speech synthesizers, and Braille translators use the lang attribute to produce output from the text. In countries such as the UK, the government enforces the use of correct lang tags according to W3C Web Accessibility Guidelines.

What is the «content-language» Meta Tag?

The «content-language» tag is a meta tag in the <head> of an HTML document that states the language and country of that a page ‘s content is most relevant for.

The tag looks like this:

The content attribute is where you will define the language and country. So for American English, it would look like this:

When setting the language, follow the 2-letter ISO 639 language code, just as you would for the HTML language tag. Language should be followed by the country ‘s ISO 3166 code.

For example:

French in France: fr-fr
French in Canada: fr-ca
French in Belgium: fr-be
Spanish in Spain: es-es
Spanish in Mexico: es-mx

While Bing will also take a look at the <html> tag, but places a priority on the <meta> tag.

Dynamic Script Tag Injection

Dynamic script tag injection is a technique in which new <script> elements are created at runtime. When the new <script> is added to the page, its “src” URL is automatically downloaded and executed. The following code shows an example dynamic script tag injection. In the example, a new <script> element is created using the document.createElement() function. Next, the “src” attribute is set to the URL of the script file. Finally, the new element is added to the document’s head, causing the script to be downloaded and executed.

var script = document.createElement("script");

script.setAttribute("src", url);
document.head.appendChild(script);

Application

The <script> tag is not subject to the same origin policy. Web pages can exploit this freedom to request cross-site data. JSONP, a technique for making cross-site AJAX-like requests, makes extensive use of dynamic script tag injection. Under the JSONP model, each AJAX request is replaced by a script tag injection.

What is the HTML Lang Attribute?

The HTML lang attribute is used to determine the language of the text used on any webpage. This attribute’s primary purpose is to signal the language of the main document.

It is also used by online readers that change languages to display the correct pronunciation and accent of the webpage content.

The HTML lang tag is supported by commonly used web browsers such as Chrome, Internet Explorer, Firefox, Safari, and Opera.

Here is the syntax of the HTML lang attribute:

In the above syntax, language_code is used to specify the ISO language code.

For example, if the content language is English, then the language code should be “en”:

Similarly, if the content is in the French language, the language code should be:

In HTML 5, the lang attribute can be used with any HTML element like <p> and <h1>.

For example, if you have a webpage whose content is written in 4 different languages – English, French, Russian, and Spanish, then the correct lang codes can be specified like this:

In the above code, search engines can clearly understand the language of four different paragraphs and display them in the SERP whenever appropriate.

Moreover, screen readers can pick the correct language and pronunciation for better accessibility for visually impaired users.

Значения атрибута

Если значением атрибута является пустая строка , то язык устанавливается на неизвестный, а если значение атрибута недопустимо в соответствии с BCP47, он считается недействительным.
Полный синтаксис BCP47 достаточно сложен, чтобы указывать специфические языковые диалекты, но в большинстве случаях это не требуется.
Так предусмотрено указание через дефис (-) подверсии языка (версия языка: en-us, zh-gan; набор символов для написания: sr-Latn ‒ сербский-латиница).

Имеется три наиболее распространенных вида субтега:

Языковой субтег
Обязательный. Все языковые тэги должны начинаться с субтэга основного языка. 2-или-3-символьный код, который определяет базовый язык, обычно записываемый строчными буквами. Например, код языка для английского — en , а код для Бадеши — bdz .

Субтеги письменности
Необязательный. Субтеги письменности должны быть использованы в качестве части языкового тэга только тогда, когда необходимо передать какую-то отличительную информацию через тэг. Обычно это случаи, когда один язык использует различные типы письма или когда контент был записан с помощью нетипичной для данного языка письменности (например, русский текст, написанный латиницей, будет иметь такой тег: ru-Latn). Субтеги письменности всегда состоят из четырёх букв, и должны идти после любых субтегов языка или диалекта и до всех других субтегов. Этот субтег определяет систему записи, используемую для языка, и всегда имеет длину 4 символа, причем первая буква заглавная. Например, французский, написаный шрифтом Брайле — а — японский, написанный с алфавитом катаканы. Если язык написан весьма типичным способом, например, английский в латинском алфавите, нет необходимости использовать этот субтег.

Субтеги региона
Необязательный. Этот субтег определяет диалект базового языка из определенного места и представляет собой либо 2 прописные буквы , соответствующие коду страны, либо 3 числа, соответствующие области, не относящейся к стране. Субтэги региона связывают выбранный вами субтэг языка с определённым регионом мира. Субтэги региона должны идти после всех субтэгов языка и письменности. Как и субтэги письменности, субтэги региона следует использовать только, если они вносят информацию, необходимую, чобы отличить этот языковой тэг от другого; если нет — отбрасывайте его. Например, может быть полезным отличием при проверке правописания, но субтэг региона в вряд ли полезен, если только вы намеренно не подчёркиваете, что это не японский, используемый в других частях мира. Есть 2 типа субтэгов региона: двухбуквенные коды и коды, состоящие из трёх цифр. Последние, как правило, определяют многонациональные регионы, а не конкретные страны. Например означает испанский, на котором говорят в Испании, тогда, как означает испанский, распространённый в Латинской Америке Субтег письменности предшествует региону, если присутствуют оба, например, является русским, написанным на кириллице, как говорят в Беларуси.

Даже если атрибут установлен, он нен учитывется, если установлен атрибут , т.к. он имеет больший приоритет.

Для CSS псевдо-класса два неправильных значения различаются, если их имена различны. Так, значение соответствует и , и , а вот значение не будет соответствовать .

Performance Considerations

All of the examples on this page have shown <script> tags placed in the document’s head. This can actually degrade performance because the rest of the page is blocked while the scripts are processed. Obviously, the “defer” and “async” attributes offer one solution. Unfortunately, they are not supported everywhere yet. A second option is to move <script> tags to the bottom of the <body> tag whenever possible ― this is usually fine as long as the script does not call document.write().

Using external script files instead of inline scripts is another technique that often improves performance. This leads to smaller HTML files, at the expense of creating additional HTTP requests. However, script files are often shared among multiple HTML pages, and can be cached by the browser. The overall result is a smaller HTML download without the additional server requests. Also remember that scripts can be downloaded dynamically after the page is loaded.

How to Implement Lang Attribute on Your Website

You can add the lang tag on a webpage by editing the source code.

You should always use the HTML element as a declaration to define language because HTML inherits all other elements on a page.

For example, if you wish to set French as the language of the entire webpage, then use this tag:

You can also specify the language of different paragraphs within a document. In this case, you need to use several HTML lang tags together.

Here is an example of a page having two different languages:

Moreover, if you want to specify the language of some content when there is no markup, use span, bdi or div.

Here is an example:

How to Choose Language Codes

You should always add the HTML lang attribute to set the default language of a webpage.

Browsers, search engines, and other apps can use this information to display information to the users most appropriately.

When dealing with several languages, you need help choosing the correct codes for every location.

Here is the complete list of ISO language codes for every location:

Language	ISO Code
Abkhazian	ab
Afar	aa
Afrikaans	af
Akan	ak
Albanian	sq
Amharic	am
Arabic	ar
Aragonese	an
Armenian	hy
Assamese	as
Avaric	av
Avestan	ae
Aymara	ay
Azerbaijani	az
Bambara	bm
Bashkir	ba
Basque	eu
Belarusian	be
Bengali (Bangla)	bn
Bihari	bh
Bislama	bi
Bosnian	bs
Breton	br
Bulgarian	bg
Burmese	my
Catalan	ca
Chamorro	ch
Chechen	ce
Chichewa, Chewa, Nyanja	ny
Chinese	zh
Chinese (Simplified)	zh-Hans
Chinese (Traditional)	zh-Hant
Chuvash	cv
Cornish	kw
Corsican	co
Cree	cr
Croatian	hr
Czech	cs
Danish	da
Divehi, Dhivehi, Maldivian	dv
Dutch	nl
Dzongkha	dz
English	en
Esperanto	eo
Estonian	et
Ewe	ee
Faroese	fo
Fijian	fj
Finnish	fi
French	fr
Fula, Fulah, Pulaar, Pular	ff
Galician	gl
Gaelic (Scottish)	gd
Gaelic (Manx)	gv
Georgian	ka
German	de
Greek	el
Greenlandic	kl
Guarani	gn
Gujarati	gu
Haitian Creole	ht
Hausa	ha
Hebrew	he
Herero	hz
Hindi	hi
Hiri Motu	ho
Hungarian	hu
Icelandic	is
Ido	io
Igbo	ig
Indonesian	id, in
Interlingua	ia
Interlingue	ie
Inuktitut	iu
Inupiak	ik
Irish	ga
Italian	it
Japanese	ja
Javanese	jv
Kalaallisut, Greenlandic	kl
Kannada	kn
Kanuri	kr
Kashmiri	ks
Kazakh	kk
Khmer	km
Kikuyu	ki
Kinyarwanda (Rwanda)	rw
Kirundi	rn
Kyrgyz	ky
Komi	kv
Kongo	kg
Korean	ko
Kurdish	ku
Kwanyama	kj
Lao	lo
Latin	la
Latvian (Lettish)	lv
Limburgish ( Limburger)	li
Lingala	ln
Lithuanian	lt
Luga-Katanga	lu
Luganda, Ganda	lg
Luxembourgish	lb
Manx	gv
Macedonian	mk
Malagasy	mg
Malay	ms
Malayalam	ml
Maltese	mt
Maori	mi
Marathi	mr
Marshallese	mh
Moldavian	mo
Mongolian	mn
Nauru	na
Navajo	nv
Ndonga	ng
Northern Ndebele	nd
Nepali	ne
Norwegian	no
Norwegian bokmål	nb
Norwegian nynorsk	nn
Nuosu	ii
Occitan	oc
Ojibwe	oj
Old Church Slavonic, Old Bulgarian	cu
Oriya	or
Oromo (Afaan Oromo)	om
Ossetian	os
Pāli	pi
Pashto, Pushto	ps
Persian (Farsi)	fa
Polish	pl
Portuguese	pt
Punjabi (Eastern)	pa
Quechua	qu
Romansh	rm
Romanian	ro
Russian	ru
Sami	se
Samoan	sm
Sango	sg
Sanskrit	sa
Serbian	sr
Serbo-Croatian	sh
Sesotho	st
Setswana	tn
Shona	sn
Sichuan Yi	ii
Sindhi	sd
Sinhalese	si
Siswati	ss
Slovak	sk
Slovenian	sl
Somali	so
Southern Ndebele	nr
Spanish	es
Sundanese	su
Swahili (Kiswahili)	sw
Swati	ss
Swedish	sv
Tagalog	tl
Tahitian	ty
Tajik	tg
Tamil	ta
Tatar	tt
Telugu	te
Thai	th
Tibetan	bo
Tigrinya	ti
Tonga	to
Tsonga	ts
Turkish	tr
Turkmen	tk
Twi	tw
Uyghur	ug
Ukrainian	uk
Urdu	ur
Uzbek	uz
Venda	ve
Vietnamese	vi
Volapük	vo
Wallon	wa
Welsh	cy
Wolof	wo
Western Frisian	fy
Xhosa	xh
Yiddish	yi, ji
Yoruba	yo
Zhuang, Chuang	za
Zulu	zu

You can select a language code based on your target location and add it to the webpage.

If you wish to find subtags for regional languages, you can use a Language Subtag Lookup tool.

Enter the primary location code of your target location, and the tool will automatically fetch all the related subtags for that location.