HTML language declaration in Hugo sites - a short guide

Defining the language of the html document is useful for i18n (obviously) - but also this will help with a11y for your site. Here is an example of a google lighthouse report for a site that does not have a html language declaration.

An example lighthouse report

Read about Google Lighthouse reports.

A HTML Language declaration looks like this:

 <html lang="en">

You simple add a lang attrbiute to the opening <html> tag in your templates.

Read about html language declarations.

You can keep it simple and add a static value to your tag: i.e. en or en-US. But whats the point in having front-matter and config files if you aren’t going to use them.

Hugo let’s us define a default language code for the site in the site config file.

languageCode = 'en'

Once they’re set; Hugo give us a few Site Param variables to access the current languages and language codes for the site. So here’s a simple example to reference the language code we defined above.

<html lang="{{ $.Site.Language.Lang | default "en-US" }}">