---
title: More about HTML5 and Multilingual Websites
description: "Below are some more ways in which to utilize HTML5 to enhance your multilingual websites: Ruby anno..."
---

[Marketing Insights and News | Website Magazine: Digital Marketing Tips and Blog](https://www.websitemagazine.com/marketing)

# [More about HTML5 and Multilingual Websites](https://www.websitemagazine.com/marketing/more-about-html5-and-multilingual-websites)

 Written by [Linc Wonham](https://www.websitemagazine.com/marketing/author/linc-wonham) | Apr 30, 2012 5:00:00 AM

Below are some more ways in which to utilize HTML5 to enhance your multilingual websites:

**Ruby annotations**

Ruby annotations are pieces of text showing up alongside the so-called base text. They usually provide additional information about the base text, such as its pronunciation. Their use is most common in East Asian documents. It can also show translations right above the source text. Here are some examples:  
   
*Ruby providing translation*

*Ruby providing pronunciation guidance*

Examples taken from [**here**](https://www.useragentman.com/blog/2010/10/29/cross-browser-html5-ruby-annotations-using-css/).

HTML5 supports Ruby annotation through the following four tags:

 The Ruby tag -- Specifies a Ruby Annotation  
 Ruby base tag -- Specifies the base text to be annotated   
 Ruby text -- Specifies the actual annotating Ruby text and by default appears above the base text  
 Ruby parenthesis -- Specifies alternative text for browsers that don't support Ruby text

Because the use of Ruby annotations can complicate the website translation process, you'll want to partner with a translation agency specializing in website localization. The experts will know how to work with these annotations across your target languages.  
  
**The attribute**

Have you ever dreamed of adding sticky note functionality to your website, allowing users to jot down comments directly on your Web pages? Or have you ever wished your translation agency could directly access your web copy to extract text for translation? Your wishes are granted with this new attribute.

All you need to do is set ContentEditable to true for any element, and the user or translator can then click on it to directly change or copy the text.

*Here's how it works:* By default, elements with the ContentEditable attribute set will have a gray border as the user hovers over them. Clicking inside the element will give the user access to its content. The user can then edit or copy it directly.

**The attribute**

If you want to provide spellcheck for user-generated content, you can now use the new attribute. Adding this attribute to an editable element will trigger spellcheck when the user adds or changes text. The following elements can be spellchecked:

*Text values in input elements (exception: password)*   
  
*Text in  elements</i><br /><i><br />Text in editable elements</i><br /><br />For this to work correctly in the context of a multilingual site, you need to make sure the right language is used for the spellcheck. The browser will use the language set for the edited element itself first. It the element itself does not have a language set, the setting of its parent element will be used, and so on. Here's an example:<br /><br /><html lang="en">  <br /><body><br /><textarea spellcheck="true">Hello World!    
Bonjour tout le monde! *

*    
-‚àö¬∫-‚àö√ë-‚Äö√†√®-‚Äö√¢¬ß-¬¨¬µ-‚àö√° -‚àö‚à´-‚Äö√†√®-‚àö√ë!  *   

*    
 

In the above sample code, the first text area will be spellchecked in English (html lang="en"). The second text area has French set as its language, so it will be spellchecked in French. The third text area does not have a language set, so it will use the setting of the first parent up, which is the

 with lang="ru" (Russian).   
Pay extra attention to the language settings of your elements when you set up spellcheck for a site that will be in multiple languages.

**About the author:**  *Jon Ritzdorf serves as the in-house globalization architect for Acclaro. He is an adjunct professor of translation technology, localization and the business of translation at New York University, the Monterey Institute of International Studies, and the University of Chicago.**

[View full post](https://www.websitemagazine.com/marketing/more-about-html5-and-multilingual-websites)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Linc Wonham"
  },
  "dateModified" : "2023-05-01T21:30:30.310Z",
  "datePublished" : "2012-04-30T05:00:00Z",
  "headline" : "More about HTML5 and Multilingual Websites",
  "image" : {
    "@type" : "ImageObject",
    "height" : 400,
    "url" : "https://22253773.fs1.hubspotusercontent-na1.net/hubfs/22253773/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-12-07-01-0416-AM-Apr-10-2023-01-33-08-2813-PM-Apr-25-2023-03-17-56-6976-AM-May-01-2023-09-28-54-9624-PM.png",
    "width" : 400
  },
  "mainEntityOfPage" : "https://www.websitemagazine.com/marketing/more-about-html5-and-multilingual-websites",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60.0,
      "url" : "https://22253773.fs1.hubspotusercontent-na1.net/hubfs/22253773/gradient-regular@3x-1.png",
      "width" : 242.48277
    },
    "name" : "Digital Marketing News, Tips, And Insights From Website Magazine"
  }
}
```