Language Attribute
Definition
One attribute on the opening html element does the bulk of the work: lang set to en-GB, fr, de or whichever tag applies. The values come from BCP 47, the IETF specification defined in RFC 5646, which composes a language subtag with optional script and region subtags — so en, en-GB and zh-Hant are all valid, while en-UK is not a real tag at all. The same attribute can be applied to any element to mark a passage in a different language, which is how a French quotation inside an English article gets spoken correctly. WCAG requires the page-level declaration in 3.1.1 Language of Page at level A and the in-page one in 3.1.2 Language of Parts at level AA. Non-web documents carry the same idea in a different place: a PDF stores a document language in its properties, and an EPUB declares one in its package metadata.
Why It Matters
A screen reader chooses a speech synthesiser and pronunciation rules from this attribute and nothing else. Get it wrong and English text is read with French phonetics, which is not an accent but genuine gibberish — 'though' read as though it were French is unrecoverable by ear. Default templates are the usual source: a site built from an English starter and translated into Spanish very often ships with lang set to en, so every Spanish page is mispronounced from the first word. The attribute also affects hyphenation, the quotation marks a browser inserts through the CSS quotes property, and whether the browser offers to translate the page, so getting it right pays off for readers who use none of the above.
How It Works
Set lang on the html element of every page, with the region subtag only if it matters — en-GB rather than en-US will affect date reading and some pronunciations, while plain en is fine if it does not. For a passage in another language, wrap it in a span or a blockquote with its own lang, and leave proper nouns and words fully absorbed into the language alone, since nobody wants 'rendezvous' announced in French mid-sentence. The attribute on the html element takes precedence over the Content-Language HTTP header for processing purposes, so the markup is what you should get right. Keep it distinct from hreflang, which sits on links and in link rel elements to tell search engines which translated version of a page suits which audience, and does not change how anything is spoken. For documents, set the language in the authoring tool before export — Word carries the proofing language into the PDF's document properties.
Real-World Example
A language school publishes its prospectus as a static page at school-prospectus.99helpers.site, written in English with course descriptions quoted in Spanish and Italian. The page was built from a template whose index.html still declared lang as en throughout, so a screen reader read every Spanish paragraph with English phonetics. Setting the root attribute correctly and wrapping each quoted block in a span with its own lang made the page switch voices cleanly at each boundary. It cost about twelve characters of markup per quote, and the file was re-uploaded to the same address.
Common Mistakes
- ✕Leaving the template's default lang value in place after translating the content — every page then declares the wrong language and is read aloud in the wrong voice
- ✕Writing invented tags like en-UK or cn instead of the real BCP 47 values en-GB and zh — an unrecognised tag is ignored, which puts you back where you started
- ✕Tagging individual loan words that have entered the language — 'cafe' and 'via' are English now, and switching voice mid-sentence for them is more disruptive than leaving them
Related Terms
Semantic HTML
Semantic HTML means using the element that matches the meaning of the content — button, nav, h2, label, table — rather than styling a generic div or span to look the part.
Screen Reader
A screen reader is software that turns what is on screen into speech or braille and gives the user a keyboard interface for moving through it. JAWS, NVDA, VoiceOver, Narrator and TalkBack are the ones in common use.
Accessible PDF
An accessible PDF is one that assistive technology can read out in a sensible order, because it carries a hidden structure of tags alongside the visible page. A scanned page saved as a PDF is a picture of text and carries none of that.
hreflang
hreflang is an annotation telling search engines that a page has equivalent versions in other languages or for other countries, and which version suits which audience.
index.html
index.html is the file a web server returns when a visitor asks for a folder rather than a named file. It is the default document for the site root and for every directory inside it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →