• Share a link to this article:

Language attributes

The web browser (and search engines) need to know what primary language your webpage is presented in. This information can be used to adjust search engine results (to prioritise the order of pages for particular languages) or to help translation tools quickly identify what language a page is written in. It could also be used to help assistive devices (like screen readers) correctly pronounce words, when reading a page aloud.

Changing language attributes

All HTML5 webpages now need to define the primary language of the page in the source code. A webpage that does not define it's language will be marked as invalid, and this could potentially create problems later on. In ThemeFlood themes, we already add a language attribute to the opening HTML tag on the page like this:

<html lang="en">

This simple code snippet satisfies HTML5 specifications and advertises the webpage as containing English content.

Of course, you may wish to change this language attribute, if the website you're building with the theme is not written in English.

To do change the language attribute, open the theme contents (as discussed in the First Steps article) and open the index.html file in your preferred code editor (like TextWranger, Coda or Espresso). Below is a screenshot showing the highlighted line (in blue) that needs modification, in Espresso:

The language attribute in index.html

Right at the top of the page (normally about the second line down), you should see the HTML tag and the language attribute inside. Simply change the value (en) to something more suitable. A list of ISO 639-1 language codes can be found on this webpage.

So if your website using the theme is written in Spanish, it would be recommended to change the language attribute to this instead:

<html lang="es">

Once done, save the changes and close the index.html file. Republish the website for changes to take effect.

Something else you can do is to set individual blocks of content in your website to particular languages. This same language attribute (as discussed above) can be added to any HTML tags or divisional containers in a page. The language attribute applied to that content will then override whatever the page language attribute has been set to, at the top of the index.html file. So this method provides you with a means of switching languages part-way through a page, and not require any modifications to the theme. The free UsefulStack has this capability built-in.