Language and html
The lang attribute is used for setting the language of a whole document or a specific part of the document.
First, for HTML 4, language tags are specified with the lang attribute. For XHTML, language tags are given in the xml:lang attribute. So when writing HTML 4.01 write lang="sv" and if you are writing XHTML write both lang="sv" and xml:lang="sv". See W3C advice on the lang attribute.
Second, the lang attribute is are used for two major reason. Search engines use it when index the page. So when searching for French pages, only those with the fr in the lang attribute will be searched. The second reason is that screen reading software use it to pronounce the content correctly. Other is to help user agents select glyph variants, help user agents choose a set of quotation marks and assist spell checkers and grammar checkers.
Normally you do not need to worry about language when developing website, you just add an lang attribute in the HTML element and you are done.
<HTML lang="sv" xml:lang="sv">
The lang attribute is inherited along the hierarchy so all part of the page will have the same language if nothing else has been specified further down.
If you want to add just a part of the page in another language you can add the attribute to almost whatever you want, heading, paragraphs, divs or spans.
So lets say you have declared the document (HTML) to lang="sv" xml:lang="sv". Down the document you want to add some text in French. Then you add lang=”fr” xml:lang="fr" to the paragraph that is in French. Easy as that.
Sometimes you might also want to link to another page where the language is different than on the page the link is. Hmm, you might think that is correct.
<HTML lang="en" xml:lang="en"><a href="#" lang="fr">Read more at the French site</a>
or mayby like this.
<HTML lang="en" xml:lang="en"><a href="#" lang="en"><span lang="fr">Read more at the French site</span></a>
Either is plain wrong. Instead there is an attribute that was new to me. It is called hreflang. So the correct code would then be.
<HTML lang="en" xml:lang="en"><a href="#" hreflang="fr">Read more at the French site</a>
If using the attributes correctly you can now start using CSS in a cool way. By using attribute selectors and generated content you can now add correct flags to the links as an example, here is how the flag example would look like.
This is the HTML code.
<a href="#" title="This link goes to a Swedish page" hreflang="sv">Read more in Swedish</a><a href="#" title="This link goes to a French page" hreflang="fr">Read more in French</a>
And the CSS code.
[hreflang=sv]:after { content: URL(sv.gif); margin-left: 5px }[hreflang=fr]:after { content: URL(fr.gif); margin-left: 5px }
Cool stuff, please note that IE will not render this at all.
- http://charlvn.blogspot.com/2005/02/lang-attribute.html
- http://www.w3.org/International/articles/language-tags/
- http://www.w3.org/TR/REC-html40/struct/links.html#adef-hreflang
- http://www.w3.org/TR/REC-XML/#sec-lang-tag
- http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1 http://www.w3.org/TR/xhtml1/#C_7
Related Posts:
- None
April 7th, 2005 at 9:16 am
Hörru, svenska är “sv”. “se” är Sverige.
April 7th, 2005 at 10:08 am
Thanks D. for clearing up my mixup.
February 18th, 2006 at 11:00 pm
‘XHTML write both lang=”sv” and xml:lang=”sv”.’
XHTML 1.0, not XHTML 1.1
XHTML 1.1 only uses xml:lang.
February 19th, 2006 at 12:41 pm
John Doe: You are absolutely correct.
November 7th, 2007 at 11:36 pm
Also it is incorrect to use upper-case tags in XHTML. So you would begin with
November 7th, 2007 at 11:38 pm
example was trunncated, basically, use HTML not HTML
April 5th, 2008 at 5:07 am
thanks a lot..