CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Multilingual menu

HTML course · Intermediate · Lesson 12/67

Build a menu with download, external and language links.

What we learned in this unit

In this unit you met the advanced features of links:

  • download for downloadable file links
  • rel values: noopener, noreferrer, license, bookmark
  • hreflang and rel="alternate" for multilingual pages
  • aria-label for accessible links
  • the right choice between <a> and <button>

Now we will combine them into a multilingual menu.

Exercise Complete the multilingual menu

Add three links to the existing menu. First, an external link: href goes to https://wikipedia.org, rel="noopener noreferrer" for safety and the text Wikipedia. Second, a download link: href to /files/brochure-2026.pdf, with the download attribute and file name brochure.pdf, text Download brochure. Third, a language link: href to /tr/hakkında, with hreflang="tr" and rel="alternate", text Türkçe.

Show example solution 
<li><a href="https://wikipedia.org" rel="noopener noreferrer">Wikipedia</a></li>
<li><a href="/files/brochure-2026.pdf" download="brochure.pdf">Download brochure</a></li>
<li><a href="/tr/hakkında" hreflang="tr" rel="alternate">Türkçe</a></li>

Test yourself

  1. Which attribute makes a link behave as a download?

    • download
    • hreflang
    • canonical
    • aria-label
    Show answer

    download — Correct. The download attribute makes the link download.

  2. Match each attribute to its role

    download
    File download
    noopener
    Safe external link
    hreflang
    Multilingual page
    canonical
    Main URL
    aria-label
    Accessible link

All lessons in Intermediate

1 Advanced text elements

  1. Abbr, cite and time
  2. Code, kbd and samp
  3. Sub and sup
  4. Pre and code block
  5. Wbr, bdi, bdo
  6. Summary - Technical doc

2 Advanced links

  1. Download links
  2. Ping and rel types
  3. Hreflang and canonical
  4. Link accessibility
  5. Button vs link
  6. Summary - Multilingual menu

3 Project: Landing page

  1. Project: Product landing page
  2. Hero section
  3. Feature list
  4. Pricing table
  5. Project final - Landing

4 Advanced tables

  1. Col and colgroup
  2. Scope and headers
  3. Table accessibility
  4. Responsive tables
  5. Table visual structure
  6. Summary - Comparison table

5 Project: Data table

  1. Project: Data table
  2. Header and caption
  3. Body data
  4. Summary row
  5. Project final - Data table

6 Advanced form elements

  1. Fieldset and legend
  2. Datalist and output
  3. Progress and meter
  4. Input attributes
  5. Autocomplete and inputmode
  6. Summary - Survey form

7 Form validation

  1. Required and pattern
  2. Min, max and step
  3. Minlength and maxlength
  4. Type-based validation
  5. Novalidate and formnovalidate
  6. Summary - Registration validation

8 Project: Contact form

  1. Project: Contact form
  2. Form skeleton
  3. Person fields
  4. Message and subject
  5. Project final - Contact form

9 Semantic layout

  1. Header structure
  2. Main content
  3. Sidebar and aside
  4. Footer structure
  5. Sectioning rules
  6. Summary - Magazine page

10 Accessibility basics

  1. ARIA basics
  2. Visually hidden heading
  3. Skip link
  4. Form accessibility
  5. Table accessibility
  6. Summary - Accessible card

11 Project: Site skeleton

  1. Project: Multi-page site skeleton
  2. Consistent header/footer
  3. Home page
  4. About and contact
  5. Project final - Site skeleton

12 Intermediate final

  1. Challenge - Advanced text
  2. Challenge - Accessible table
  3. Challenge - Validated form
  4. Challenge - Semantic layout
  5. Challenge - Intermediate capstone