Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Multi-Language website using HTML

Hi there.

I was wondering if I can make website with multiple languages like: English, Arabic, ..etc using HTML. Can it be done or do I need another language like JavaScript or something else

Thank you

3 Answers

Ben Schroeder
Ben Schroeder
22,818 Points

I assume you want to allow the user to toggle between different languages? The simplest solution is, of course, to make entirely separate pages for each language. (For instance, if you have an "About Us" page in English, you could do an entirely separate "About Us" page in Arabic.)

You could include every version of your content (the English version, the Arabic version, etc.) in different elements on the same page, and use something like jQuery to hide or show these elements based on user interaction. For instance, you could have one <div> with the English text, and one <div> with the Arabic text. You could write some quick jQuery code that would hide the English <div> and show the Arabic <div> when a user says they want to read your website in Arabic.

There are other methods you could use too... mostly involving JavaScript or a back-end language.

If you want allow users to be able to select almost any language and get a (very rough) automatic translation, you could look into the Google Translate API.

Edit: I should also note a few things for languages like Arabic specifically. When using Arabic, you want to use CSS to make the font size larger than you would for English text. You'll also definitely want to take advantage of the CSS direction property.

Thank You Ben.

Russell Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points

According to w3schools these are the languages supported. If you want to have the same page in multiple languages then you need create the same page in the second language and link it to your first page.

The primary language of the page should correspond with the human language of the page. So if you want English or Arabic for a page, you will have to add the lang attribute to the html start tag. . .

<!--For English-->

<html lang="en"> 

<!--For Arabic-->

<html lang="ar">