I don't know what's the problem -- this looks correct, and saving this to a.html I visualize it just perfectly on Safari, Chrome and Firefox on my Mac. What browsers and platforms are visualizing them wrong for you? Can you "view source" on said browsers to ensure this is actually what they're being served?
I think the server serving the page is overriding the encoding. Can you please try: Setting charset information in .htaccess.
Works fine for me either double-clicking a file (as long as the editor is utf-8 capable) or serving it from localhost (Apache, defaults to UTF-8).
You should indeed check what HTTP headers your web server is sending along the file. If your previous content is in English (read: ASCII) you may have never had a hint that your server was overriding the infile declaration of UTF-8 with a header saying ISO-8859-1 or Windows-1252.
You may take a look at the headers in realtime with some Firefox extensions like Live HTTP Headers or HTTPFox. If this is the cause of the mishap and your server is Apache just add the line AddDefaultCharset utf-8
either in the mainl httpd.conf file or a .htaccess file in the webroot folder.