HTML alternate language links: identify equivalent page versions

Implementation choice

A public safety notice exists in English and Hindi. Each document identifies the equivalent versions in head, and each page also needs an obvious language switch that a visitor can use. These links should point to translated pages with equivalent meaning, not a generic language homepage. Set the actual document language on each version and keep both notices synchronized when a regulation or safety step changes.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Depot safety notice</title>
  <link rel="alternate" hreflang="en" href="/safety/depot-notice/en">
  <link rel="alternate" hreflang="hi" href="/safety/depot-notice/hi">
</head>
<body><main><h1>Depot safety notice</h1>
  <p><a href="/safety/depot-notice/hi" hreflang="hi">हिन्दी में पढ़ें</a></p>
</main></body>
</html>

What remains outside the markup

The two same-site routes must exist and contain genuinely equivalent notices. Head metadata does not translate content or provide a visible switch on its own; the body link serves that human task.

Cost and limits

Two metadata links are cheap. The real cost is maintaining translation parity and testing every language route after a notice changes, including links, dates, and emergency instructions.

Common Mistakes

• Do not point every translated article at one generic language homepage.
• Do not mark an untranslated page with another language code.
• Do not forget a visible language switch.

Connected lessons

• HTML lang, dir, and bdi: keep text pronunciation and direction stable
• HTML title and metadata: distinguish document identity from page copy
• HTML anchors: use href for navigation and stable fragment targets