DEV Community

Youn
Youn

Posted on

HTML lang Attribute

#lang #attribute #html

😄 This post is based on the content from coding.courses.

Definition and Usage

The lang attribute specifies the primary language of an element's content and of any text-containing attributes.
Using this attribute provides language information for human-readable content that can be used by screen readers, browsers, and search engines.

Features

  • This is a global attribute that can be applied to any HTML element.
  • The lang attribute value is inherited by child elements.
  • The default value of the lang attribute is unknown, so it is recommended to always set this attribute to an appropriate value.
  • If the attribute value is an empty string (lang=""), the language is set to unknown.

Using the lang attribute provides the following benefits:

  • Allows screen readers to recognize the language of a web page and provide speech output in the appropriate language.
  • Enables browsers, such as Chrome, to automatically detect the page language for translation features.
  • Helps search engines identify the language of the web page and deliver search results in the corresponding language.

Examples

# Specifying the Primary Language for a Page

To set the primary language of the page text, always use the lang attribute on the root <html> tag.

<html lang="en">
Enter fullscreen mode Exit fullscreen mode

# When a Page Contains Content in Another Language

If a page contains content in a different language, add the lang attribute to the tag wrapping that content.

<p>The title is "<span lang="fr">Le Bon Usage</span>".</p>
Enter fullscreen mode Exit fullscreen mode

Things to Keep in Mind

# Applies to Text-Containing Attributes as Well

The lang attribute specifies the primary language not only for a tag's content but also for all text-containing attributes.

<a title="Spanish" href="qa-html-language-declarations.es">
    <span lang="es">Español</span>
</a>
Enter fullscreen mode Exit fullscreen mode

# When There Is No Appropriate Markup Around the Content 

<p>This content is in Chinese: <span lang="zh-Hans">中国科学院文献情报中心</span>.</p>
Enter fullscreen mode Exit fullscreen mode

References

HTML lang Attribute – Proper Understanding and Usage - codingCourses

The lang attribute specifies the primary language of an element's content and of any text-containing attributes.

favicon coding.courses

Top comments (0)