The W3 organization has been trying to internationalize the web and make it equally available to every system or culture around the World since early days.

Part of that effort is a possibility to choose the language of the content with the lang attribute and the text direction with the dir attribute.

Language attribute lang should be used to help a browser or a search engine determine and render the content that suits the best for the region and culture given within the attribute.

Some of the possible results are:

  • assisting search engines in geotargeting
  • helping a browser choosing correct glyph variants
  • assisting to spell checking
  • helping with the proper quotation marks
  • assisting non-visual browsers or tools (i.e. speech synthesizer)

The lang attribute defines the language code that is made of a primary code and a possible sub-code(s). If not used, the default value of a lang attribute is "unknown".

Examples of a language code:

  • "en" (English)
  • "en-US" (U.S. English)
  • "hr" (Croatian)
  • "x" (Experimental)

Considering that multiple elements can have lang attribute, the inheritance is very importance. The higher priority is the language attribute that belongs to the element itself, then the next, closest parent's, while the lowest priority is given to the document's HTTP header such as Content-Language: fr.

The dir attribute defines element's or content's text direction.

There are only two possible values and these are LTR or RTL with the left-to-right being default. If the direction is set up in the HTML element it becomes default for entire document.

To change parts of a document or inline text direction individually an <bdo> element can be used to reset previous values and set up new ones, or an inline let say <span> element with dir attribute.

Typical syntax:

<p lang="" dir=""></p>

<bdo lang="" dir="">

Example

Language information and text direction:

 

›› go to examples ››