How can I tell Google Translate to not translate a section of a website?

Just a quick update, the HTML5 translate="no" attribute seems to work as intended by now :)

I tested it in a simple HTML that I passed to the translator and it seems to accept both forms of instruction (the class works fine as well)

According to Google instructions, setting class="notranslate" prevents Google translation. This appears to work, though using it inline (e.g., for a single word) may imply some confusion, so you need to check out what happens.

For example,

Welcome to the <span class="notranslate">Cool</span> company website!

translates into Spanish as “Bienvenido a la Coolweb de la compañía!”, which isn’t that cool, though it demonstrates that “Cool” has been taken as a proper name; without the markup, the text would translate as “Bienvenido a la fresca web de la empresa!”.

Reformulating the text as

Welcome to the website of <span class="notranslate">Cool</span>!

would result in “Bienvenido a la página web de Cool!”, which looks better except that “site” has been mistranslated.

For different target languages, different problems may and will arise. In general, the simpler the grammatical structure of a sentence is, the more often it will get translated reasonably well.

The bottom line is: you can try to prevent translation using class=notranslate, but the problems of Google Translator may cause confusion.