CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Multilingual page

HTML course · Expert · Lesson 23/39

Write a bilingual page skeleton with all i18n techniques.

What we learned in this group

In this group you met the internationalization techniques:

  • Declaring page language and direction with lang and dir
  • Introducing sibling pages with hreflang
  • Controlling mixed-direction text with <bdi> and <bdo>
  • Writing RTL-aware tables, forms and landmarks
  • Using canonical and hreflang together

Now we will combine all of these into a bilingual page skeleton.

Exercise Bilingual page skeleton

Write a skeleton for a Turkish home page. Start with <html lang="tr" dir="ltr">. In the <head> add <meta charset="utf-8"> and a <title> (text: Magazine). Also add three <link rel="alternate" hreflang="..."> to the head: hreflang="tr" href="https://magazine.com/tr/", hreflang="en" href="https://magazine.com/en/" and hreflang="x-default" href="https://magazine.com/tr/". In the body add a <header> holding an <h1> (text: Magazine) and a <main>.

Show example solution 
<html lang="tr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Magazine</title>
    <link rel="alternate" hreflang="tr" href="https://magazine.com/tr/">
    <link rel="alternate" hreflang="en" href="https://magazine.com/en/">
    <link rel="alternate" hreflang="x-default" href="https://magazine.com/tr/">
  </head>
  <body>
    <header>
      <h1>Magazine</h1>
    </header>
    <main></main>
  </body>
</html>

Test yourself

  1. Match each tag or attribute

    lang
    Declares language code
    dir
    Declares text direction
    hreflang
    Introduces a sibling page
    bdi
    Wraps unclear-direction text

  2. Complete the Turkish html tag

    <html ____>
  <head></head>
  <body></body>
</html>
    Show answer 
    <html lang="tr" dir="ltr">
  <head></head>
  <body></body>
</html>

  3. Which attribute declares RTL direction?

    • dir
    • lang
    • charset
    • href
    Show answer

    dir — Correct. The dir attribute declares text direction (ltr/rtl).

All lessons in Expert

1 Advanced accessibility

  1. WCAG principles
  2. Keyboard navigation
  3. Live regions
  4. Dialog and modal
  5. Heading outline
  6. Summary - Accessible widget

2 Advanced ARIA patterns

  1. ARIA roles
  2. States and properties
  3. Grid and tree
  4. Tabs and accordion
  5. Menu and menubar
  6. Summary - Accessible tabpanel

3 Project: High-performance page

  1. Project: High-performance page
  2. Critical resource order
  3. Image optimization
  4. Template and noscript
  5. Project final - Performance page

4 Internationalization

  1. Lang and dir
  2. Hreflang strategy
  3. Bidi and bdo
  4. RTL-aware markup
  5. Multilingual SEO
  6. Summary - Multilingual page

5 Project: Secure page

  1. Project: Secure form page
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Project final - Secure page

6 Advanced web components

  1. Custom element registry
  2. Slot and shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM and accessibility tree
  6. Summary - Component library skeleton

7 Expert final

  1. Challenge - Accessible dialog
  2. Challenge - ARIA tabpanel
  3. Challenge - Multilingual RTL
  4. Challenge - Security package
  5. Challenge - Expert capstone