Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Abdulrahman Almasoudi
Front End Web Development Techdegree Student 2,276 PointsMulti-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
22,818 PointsI 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.
Russell Sawyer
Front End Web Development Techdegree Student 15,705 PointsAccording 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.
Alistair Holmes
11,571 PointsThe 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">
Abdulrahman Almasoudi
Front End Web Development Techdegree Student 2,276 PointsAbdulrahman Almasoudi
Front End Web Development Techdegree Student 2,276 PointsThank You Ben.