Upper or lower case inside in abbreviation tags?

Question

Since HTML5 does not support Microsoft's <acronym> tag, we're left with using the abbreviation element:

<abbr title="Microsoft">MS</abbr>

When it comes to capitalization, cases like that are obvious: it needs to be capitalized.

However, what about other contexts where the word itself isn't usually capitalized in context?

For example:

<p>What is a <abbr title="chief technical officer">CTO</abbr>?</p>

That seems to be fine if one were to switch the title and actual text around.

But when hovering the mouse, it looks a bit odd:

The same goes for:

<p><abbr title="Chief technical officers">CTOs</abbr> are usually skilled technically.</p>

It makes sense if the abbreviation and actual text were switched around, but hovering also looks a bit "weird":

Now, what if we capitalize abbreviations as if they were titles?

For example:

<p>Wouldn't capitalizing <abbr title="Away From Keyboard">AFK</abbr> look weird?</p>

It would if the the title was substituted for the abbreviation, but on mouse-over it seems to look "better":

But what is right semantically?

Answer 1

The replacement text should reflect what the real text would be if it were substituted. Acronyms are generally not constructed from proper nouns, therefore the replacement text should be in all lower-case.

You'd never actually type "Chief Technical Officers" (unless you mistakenly thought they were proper nouns).