Geek Answers Handbook

What is the correct semantics for language switching?

I am coding a multilingual site and I have the following navigation:

<nav id="language"> <ul> <li><a href="/en/" hreflang="en">en</a></li> <li><a href="/de/" hreflang="de">de</a></li> <li>fr</li> </ul> </nav>

Can I improve semantics? With Microdata attributes or tags like

+8
html5 semantic-web semantic-markup nav microdata
source share
3 answers

abbr elements

You must add abbr , specifying the full name of the language in the appropriate language:

 <nav id="language"> <ul> <li><a href="/en/" hreflang="en"><abbr lang="en" title="English">en</abbr></a></li> <li><a href="/de/" hreflang="de"><abbr lang="de" title="Deutsch">de</abbr></a></li> <li><abbr lang="fr" title="Français">fr</abbr></li> </ul> </nav>

title for a

You can add a title attribute to a with content such as: "Switch to English translation of this page"

header for nav

You can give this section nav heading similar to "Translations of this page" (for an English page).

If you do not want it to be visible on the page, hide it visually so that it is still readable to users of on-screen firmware (for example, using the clip method).

(If you provide such a title, you probably no longer need the title attribute on a .)

optional: link element (in head )

For bots, you can associate translations with link elements in the head your pages:

 <link rel="alternate" href="/de/" hreflang="de" /> <link rel="alternate" href="/en/" hreflang="en" />
+9
source share

I think that perhaps changing en to Change site language to English will improve semantics. Since it costs en , it is rather mysterious without context.

+2
source share

you must add the lang and hreflang to the link, with the IETF language tag (bcp47) as the target value, see, for example, links in the wikipedia article on water to the same subject in other languages:

 <a lang="de" hreflang="de" title="Wasser" href="//de.wikipedia.org/wiki/Wasser">Deutsch</a>

NB: the lang attribute is not specific to the link. it indicates the language of the content of the tag (wikipedia also places it in the <html> tag and in the header tag <h1> .), and hreflang indicates the language of the page you are linking to.

+2
source share

More articles:


All Articles