Semantic markup for language switch

Question

• What markup do you use for the language switcher element?
• Should it be placed before <header>and .skiplink?
• Should it be added with a title?
• Any live examples?

Here is what I am using now:

 <header>
        <div><a href="#content" class="skiplink">Skip to content</a></div>
        <h1>
            <a href="/">Site Name - the best site</a>                      
        </h1>
        </header>

                <ul class="langSwitch">
<li class="langPl"><img src="/gfx/pl.png" alt="Polski" /></li>
<li class="langEn"><a rel="nofollow" href="/en" hreflang="en" lang="en" xml:lang="en"><img src="/gfx/en.png" alt="English" /></a></li>
<li class="langDe"><a rel="nofollow" href="/de" hreflang="de" lang="de" xml:lang="de"><img src="/gfx/de.png" alt="Deutsch" /></a></li>

Answer 1

Content

As you already know, you should indicate the language names in the respective target languages, and not in the current language.

As you use img, you probably include national flags. You must not do this . They symbolize countries, not languages.

, the a (. ).

, , , . , .

Id , skiplink ( ), skiplink : , .

nav. ( ), ; , .

nav , body - header.

ul nav .

rel - alternate hreflang , , :

hreflang, , , .

nofollow .

HTML5 ( XHTML5), xml:lang ( HTML5, "" ).

<nav>
  <h1>Translations of this page</h1> <!-- could be omitted → usability question -->
  <ul>
    <li>English</li> <!-- could be omitted → usability question -->
    <li><a rel="alternate" href="/pl" hreflang="pl" lang="pl">Polski</a></li>
    <li><a rel="alternate" href="/de" hreflang="de" lang="de">Deutsch</a></li>
  </ul>
</nav>