{"id":19275,"date":"2017-12-11T16:15:12","date_gmt":"2017-12-11T14:15:12","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=19275"},"modified":"2018-01-11T21:30:44","modified_gmt":"2018-01-11T19:30:44","slug":"html5-internationalization-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/","title":{"rendered":"HTML5 Internationalization Example"},"content":{"rendered":"

In this post we will look at Internationalization in HTML5. We will be translating the web page to use the language chosen by the user. At the same time we will keep the process passive, in the sense that, instead of making the decision on language ourselves, we will let the user choose a language of choice from a set of options.
\n 
\n 
\n 
\n 
\n 
\n 
\n 
\n[ulp id=’tgm4cmEWcKUikZNn’]
\n 
\nTo keep things simple we will display three options, viz., German, French and of course English. We will let the user decide after initially displaying the page in English. So lets get started with the implementation of our example.<\/p>\n

\n

Table of Content<\/h3>\n
\n
1. Project Layout<\/a><\/dt>\n
2. Tools & Technologies<\/a><\/dt>\n
3. Internationalization<\/a><\/dt>\n
\n
\n
3.1. Creating Resource Files<\/a><\/dt>\n
3.2. HTML5 Markup<\/a><\/dt>\n
3.3. JavaScript<\/a><\/dt>\n
3.4. Demonstration<\/a><\/dt>\n<\/dl>\n<\/dd>\n
4. Running the Project<\/a><\/dt>\n
5. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n

<\/a>1. Project Layout<\/h2>\n

The project structure of our example application is as follows:<\/p>\n

\"\"<\/a>
Project Layout<\/figcaption><\/figure>\n\n\n\n\n\n\n\n\n
css<\/em><\/strong><\/td>\nThis folder contains the css files for the application.<\/td>\n<\/tr>\n
js<\/em><\/strong><\/td>\nWe place the client side JavaScript files in this folder. These files contain JavaScript code that works on the client end in the browser.<\/td>\n<\/tr>\n
i18n<\/em><\/strong><\/td>\nThis is the location of our JSON resource files, they basically contain name value pairs used in translation by our application. They play a key role in enabling support for different languages on the UI.<\/td>\n<\/tr>\n
images<\/em><\/strong><\/td>\nI have downloaded and placed images of flags of the countries whose languages we plan to support in this application. These include the french, german and british flag images.<\/td>\n<\/tr>\n
index.html<\/em><\/strong><\/td>\nThis is our application’s landing page and hosts our UI.<\/td>\n<\/tr>\n
index.js<\/em><\/strong><\/td>\nOur barebones nodejs web server resides in this file. All our server side JavaScript code sits in this file. It is the entry point of our application.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/a>2. Tools & Technologies<\/h2>\n

To build the application for this example, I have used the following toolset. Some of them are required whilst others could be replaced by tools of your own choice.<\/p>\n

    \n
  1. HTML5<\/li>\n
  2. CSS<\/li>\n
  3. JavaScript<\/li>\n
  4. Nodejs v6.3.0<\/a><\/li>\n
  5. Express<\/a><\/li>\n
  6. Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n

    Node.js, in essence, is JavaScript on the server-side. The Express module is used to create a barebones server to serve files and resources to the browser. I prefer the Visual Studio Code IDE but you can use any text editor of choice.<\/p>\n

    <\/a>3. Internationalization<\/h2>\n

    To implement our internationalization example we will proceed stepwise, first we will create the language resource files next we write markup. Then we use JavaScript to enable the user to transition from one language to another for the UI.<\/p>\n

    <\/a>3.1. Creating Resource files<\/h3>\n

    We will create resource files that will allow us to replace the text with their translated one depending on the language the user switches to. These resource files are in JSON<\/code> format and are basically key-value pairs. The key being the value of the data-langkey<\/code> attribute of tags in the HTML markup. So in a file named france.json<\/code>, for example, will be keys and corresponding text in the french language.<\/p>\n

    We use three resource files in this application one each for the three languages we intend to support in our example, i.e., france.json<\/code>, germany.json<\/code> and britain.json<\/code>. I have created these by getting translations from Google Translate. These files look like below:<\/p>\n

    france.json<\/em><\/span><\/p>\n

    {\r\n    \"Name\": \"Pr\u00e9nom\",\r\n    \"Company\": \"Compagnie\",\r\n    \"Email Address\":\"Adresse e-mail\",\r\n    \"Mobile No.\": \"Num\u00e9ro de portable\",\r\n    \"Application Form\":\"Formulaire de demande\",\r\n    \"Telephone No.\":\"Num\u00e9ro de t\u00e9l\u00e9phone\",\r\n    \"Gender\":\"Le genre\",\r\n    \"Male\": \"M\u00e2le\",\r\n    \"Female\":\"Femelle\",\r\n    \"Prefer not to say\":\"Je pr\u00e9f\u00e8re ne pas le dire\",\r\n    \"WCG -- HTML5 Internationalization Example\": \"WCG - Exemple d'internationalisation HTML5\"\r\n}\r\n<\/pre>\n
    germany.json<\/em><\/span><\/p>\n
    {\r\n    \"Name\": \"Name\",\r\n    \"Company\": \"Unternehmen\",\r\n    \"Email Address\":\"E-Mail-Addresse\",\r\n    \"Mobile No.\": \"Handynummer\",\r\n    \"Application Form\": \"Anmeldeformular\",\r\n    \"Telephone No.\":\"Telefonnummer\",\r\n    \"Gender\":\"Geschlecht\",\r\n    \"Male\":\"M\u00e4nnlich\",\r\n    \"Female\": \"Weiblich\",\r\n    \"Prefer not to say\":\"Mache lieber keine Angabe\",\r\n    \"WCG -- HTML5 Internationalization Example\": \"WCG - HTML5 Internationalisierung Beispiel\"\r\n}\r\n<\/pre>\n
    britain.json<\/em><\/span><\/p>\n
    {\r\n    \"Name\": \"Name\",\r\n    \"Company\": \"Company\",\r\n    \"Email Address\":\"Email Address\",\r\n    \"Mobile No.\": \"Mobile No.\",\r\n    \"Application Form\": \"Application Form\",\r\n    \"Telephone No.\":\"Telephone No.\",\r\n    \"Gender\":\"Gender\",\r\n    \"Male\":\"Male\",\r\n    \"Female\": \"Female\",\r\n    \"Prefer not to say\":\"Prefer not to say\",\r\n    \"WCG -- HTML5 Internationalization Example\": \"WCG -- HTML5 Internationalization Example\"\r\n}\r\n<\/pre>\n
    <\/a>3.2. HTML5 Markup<\/h3>\n
    We will implement a generic application form to demonstrate internationalization. Following markup spins up a application form for us:<\/p>\n
    index.html<\/em><\/span><\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n    <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n    <title>WCG -- HTML5 Internationalization Example <\/title>\r\n\r\n    <link rel=\"stylesheet\" href=\"css\/html5.internationalization.css\" type=\"text\/css\" \/>\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n<!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n<!--[if lt IE 9]>\r\n<script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n<script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n<![endif]-->\r\n<\/head>\r\n<body>\r\n    <h1 data-langkey=\"WCG -- HTML5 Internationalization Example\">WCG -- HTML5 Internationalization Example <\/h1>\r\n    <div id='languages'>\r\n        <img src='images\/if_FR_167740.png' class='language' data-lang='france' alt='French Flag' \/>\r\n        <img src=\"images\/if_DE_167808.png\" class='language' data-lang='germany' alt='German Flag' \/>\r\n        <img src=\"images\/if_GB_167794.png\" class='language' data-lang='britain' alt='British Flag' \/>\r\n    <\/div>\r\n    <fieldset>\r\n        <legend>\r\n            <span data-langkey=\"Application Form\">Application Form<\/span>\r\n        <\/legend>\r\n        <span data-langkey=\"Name\">Name<\/span><br \/><input type=\"text\" \/><br \/>\r\n        <span data-langkey=\"Company\">Company<\/span><br \/><input type='text' \/><br \/>\r\n        <span data-langkey=\"Mobile No.\">Mobile No.<\/span><br \/><input type='text' \/><br \r\n        \/>\r\n        <span data-langkey=\"Telephone No.\">Telephone No.<\/span><br \/><input type='text' \r\n        \/><br \/>\r\n        <label data-langkey=\"Gender\">Gender<\/label><br \/>\r\n        <select>\r\n            <option data-langkey=\"Male\">Male<\/option>\r\n            <option data-langkey=\"Female\">Female<\/option>\r\n            <option data-langkey=\"Prefer not to say\">Prefer not to say<\/option>\r\n        <\/select>\r\n    <\/fieldset>\r\n\r\n    <script src='js\/html5.internationalization.js' ><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
    One thing to notice is the decoration of each tag with text data with the attribute data-langkey<\/code>. This proves to be a key in our attempt to translate all the text in the page to another language. We use the key of a tag to look up the translation of its text in our resource files. We replace the innerText<\/code> of a tag with the value from the resource file. The UI of our application looks like below in browser.<\/p>\n
    \"\"<\/a>
    Screen Layout<\/figcaption><\/figure>\n
    <\/a>3.3. JavaScript<\/h3>\n
    Now that we have the resource files and the markup in place let us write some JavaScript to make it all tick. In our code we bind to the click event of each flag icon that we are displaying. On trigger of the event we send an AJAX<\/code> request to the server to fetch the correct resource file with the translations.<\/p>\n
    The name of the resource file is again picked up from the data-lang<\/code> attribute of the respective image tags. Once we receive the same we go about translating the text in the UI with appropriate translations from the resource file. Our code looks like below:<\/p>\n
    html5.internationalization.example.js<\/em><\/span><\/p>\n
    var languages = Array.from(document.getElementsByClassName('language'));\r\nvar xhttp = new XMLHttpRequest();\r\nvar langDocument = {};\r\n\r\nlanguages.forEach(function(value, index){\r\n    languages[index].addEventListener('click', function(){\r\n        switchLanguage(this.dataset.lang);\r\n    });\r\n});\r\nxhttp.onreadystatechange = function(){\r\n    if (this.readyState === 4 && this.status === 200) {\r\n        langDocument = JSON.parse(this.responseText);\r\n        processLangDocument();\r\n    }\r\n};\r\nfunction switchLanguage(language){\r\n    xhttp.open(\"GET\", \"i18n\/\" + language + \".json\", true);\r\n    xhttp.setRequestHeader(\"Content-type\", \"application\/json\");\r\n    xhttp.send();\r\n}\r\nfunction processLangDocument(){\r\n    var tags = document.querySelectorAll('span,img,a,label,li,option,h1,h2,h3,h4,h5,h6');\r\n    Array.from(tags).forEach(function(value, index){\r\n        var key = value.dataset.langkey;\r\n        if(langDocument[key]) value.innerText = langDocument[key];\r\n    });\r\n}\r\n<\/pre>\n
    <\/a>3.4. Demonstration<\/h3>\n
    Now that we have all the pieces in place, let us see the results at runtime. We run the project and navigate to the URL http:\/\/localhost:8090\/index.html<\/code> which displays the following:<\/p>\n
    If we click on any of the flag icons we should see the switch to the appropriate language. Below are the results when we click on the german flag:<\/p>\n
    \"\"<\/a>
    Landing Page — German<\/figcaption><\/figure>\n
    Similarly the french version of the page looks like below:<\/p>\n
    \"\"<\/a>
    Landing Page — French<\/figcaption><\/figure>\n
    <\/a>4. Running the Project<\/h2>\n
    To run the project, Run the commands below at the root of the project:<\/p>\n
    > npm install\r\n<\/pre>\n
    then<\/p>\n
    > node index.js\r\n<\/pre>\n
    Now navigate to the URL http:\/\/localhost:8090\/index.html<\/code> in a browser of choice. This should take us to the landing page of the application.<\/p>\n
    <\/a>5. Download the Source Code<\/h2>\n
    This was a look at the HTML5 Internationalization Example<\/p>\n
    Download<\/strong>
    \nYou can download the full source code of this example here :     WCG — HTML5 Internationalization Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
    In this post we will look at Internationalization in HTML5. We will be translating the web page to use the language chosen by the user. At the same time we will keep the process passive, in the sense that, instead of making the decision on language ourselves, we will let the user choose a language …<\/p>\n","protected":false},"author":213,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-19275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"\nHTML5 Internationalization Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this post we will look at Internationalization in HTML5. We will be translating the web page to use the language chosen by the user. At the same time\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Internationalization Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this post we will look at Internationalization in HTML5. We will be translating the web page to use the language chosen by the user. At the same time\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-11T14:15:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-11T19:30:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"HTML5 Internationalization Example\",\"datePublished\":\"2017-12-11T14:15:12+00:00\",\"dateModified\":\"2018-01-11T19:30:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/\"},\"wordCount\":923,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/\",\"name\":\"HTML5 Internationalization Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2017-12-11T14:15:12+00:00\",\"dateModified\":\"2018-01-11T19:30:44+00:00\",\"description\":\"In this post we will look at Internationalization in HTML5. We will be translating the web page to use the language chosen by the user. At the same time\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Internationalization Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Internationalization Example - Web Code Geeks - 2026","description":"In this post we will look at Internationalization in HTML5. We will be translating the web page to use the language chosen by the user. At the same time","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Internationalization Example - Web Code Geeks - 2026","og_description":"In this post we will look at Internationalization in HTML5. We will be translating the web page to use the language chosen by the user. At the same time","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-12-11T14:15:12+00:00","article_modified_time":"2018-01-11T19:30:44+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"HTML5 Internationalization Example","datePublished":"2017-12-11T14:15:12+00:00","dateModified":"2018-01-11T19:30:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/"},"wordCount":923,"commentCount":2,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/","name":"HTML5 Internationalization Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2017-12-11T14:15:12+00:00","dateModified":"2018-01-11T19:30:44+00:00","description":"In this post we will look at Internationalization in HTML5. We will be translating the web page to use the language chosen by the user. At the same time","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-internationalization-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Internationalization Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=19275"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19275\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=19275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=19275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=19275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}