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).

Answer 2

From the Chicago Manual of Style

Civil, military, religious, and professional titles are capitalized when they immediately precede a personal name and are thus used as part of the name (typically replacing the title holder’s first name). In formal prose and other generic text (as opposed to promotional or ceremonial contexts or a heading), titles are normally lowercased when following a name or used in place of a name

So it seems clear that you shouldn't capitalise CTO's (unless you mean the Central Treaty Organization).

I don't share your concern - the uncapitalised versions look fine to me. If it is for tooltip-style popups you could mandate all lowercase as house style.

and Away From Keyboard really does look weird...

(forgive my mixed spelling, uk-english quoting us-english...)