HTML Lang Codes

Last modified on: October 19, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="6bb2c7d7-c0ae-45ba-9448-9841702809ba">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>Language codes in HTML specify the language of the content on a web page, helping search engines and browsers understand the language used. These codes are important for accessibility, search engine optimization (SEO), and proper rendering of content.</p>
<h3>What are Language Codes?</h3>
<p>Language codes, also known as language tags, are standardized codes used to identify languages in web documents. They are defined by the <a target="_new" rel="noopener">IETF BCP 47</a> standard and typically consist of a language code and optionally a region code.</p>
<h3>How to Use Language Codes in HTML</h3>
<h4><code>lang</code> Attribute</h4>
<p>The <code>lang</code> attribute is used to specify the language of the document or parts of the document. It can be applied to the <code>&lt;html&gt;</code> tag for the entire document or to specific elements for parts of the document.</p>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Welcome&lt;/h1&gt;
  &lt;p lang="fr"&gt;Bonjour tout le monde!&lt;/p&gt;
  &lt;p lang="es"&gt;&iexcl;Hola a todos!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<ul>
<li><strong><code>lang="en"</code></strong>: Specifies that the document is in English.</li>
<li><strong><code>lang="fr"</code></strong>: Specifies that the content of the <code>&lt;p&gt;</code> tag is in French.</li>
<li><strong><code>lang="es"</code></strong>: Specifies that the content of the <code>&lt;p&gt;</code> tag is in Spanish.</li>
</ul>
<h3>Common Language Codes</h3>
<ol>
<li><strong>English</strong>: <code>en</code></li>
<li><strong>French</strong>: <code>fr</code></li>
<li><strong>Spanish</strong>: <code>es</code></li>
<li><strong>German</strong>: <code>de</code></li>
<li><strong>Chinese (Simplified)</strong>: <code>zh-CN</code></li>
<li><strong>Chinese (Traditional)</strong>: <code>zh-TW</code></li>
<li><strong>Japanese</strong>: <code>ja</code></li>
<li><strong>Korean</strong>: <code>ko</code></li>
<li><strong>Russian</strong>: <code>ru</code></li>
<li><strong>Arabic</strong>: <code>ar</code></li>
</ol>
<h3>Region Codes</h3>
<p>Region codes can be added to language codes to specify regional variations.</p>
<ol>
<li><strong>English (United States)</strong>: <code>en-US</code></li>
<li><strong>English (United Kingdom)</strong>: <code>en-GB</code></li>
<li><strong>French (Canada)</strong>: <code>fr-CA</code></li>
<li><strong>Spanish (Mexico)</strong>: <code>es-MX</code></li>
<li><strong>Spanish (Spain)</strong>: <code>es-ES</code></li>
</ol>
<h3>Complete List of Language Codes</h3>
<p>A complete list of language codes can be found in the <a target="_new" rel="noopener">IANA Language Subtag Registry</a> or the <a href="https://www.w3.org/International/articles/language-tags/" target="_new" rel="noopener">W3C Language Tags</a> documentation.</p>
<h3>Best Practices</h3>
<ol>
<li><strong>Set the <code>lang</code> Attribute for the <code>&lt;html&gt;</code> Element</strong>: This provides a default language for the entire document.</li>
<li><strong>Use Specific Language Codes</strong>: For multilingual websites, use specific language and region codes to improve clarity.</li>
<li><strong>Specify Language for Sections</strong>: For documents with multiple languages, specify the language for different sections to assist screen readers and search engines.</li>
</ol>
<h3>Example with Multiple Languages</h3>
<p>Here&rsquo;s an example of an HTML document with content in multiple languages:</p>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Multilingual Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1 lang="en"&gt;Welcome&lt;/h1&gt;
  &lt;p lang="en"&gt;This is an English paragraph.&lt;/p&gt;

&lt;h1 lang="es"&gt;Bienvenido&lt;/h1&gt;
  &lt;p lang="es"&gt;Este es un p&aacute;rrafo en espa&ntilde;ol.&lt;/p&gt;

&lt;h1 lang="fr"&gt;Bienvenue&lt;/h1&gt;
  &lt;p lang="fr"&gt;Ceci est un paragraphe en fran&ccedil;ais.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>Summary</h3>
<p>Using language codes in HTML helps ensure that content is correctly interpreted and displayed based on the language of the text. It enhances accessibility, improves SEO, and ensures a better user experience across different languages and regions.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More