<em> vs. <i>
<em> is exclusively for stress emphasis in language and linguistics. it helps semantically add emphasis and importance to written words that, when read aloud by a screen reader or in other cases, will convey the intended tone of the sentence:
Dambara Ruru is the greatest idol of all time.
Are you sure you want to do that?
read aloud without the stress/emphasis, these sentences convey less meaning.
<i> is more generic. for indicating languages other than what the text is presented in, a lang attribute can be used so that assistive technology can recognize it correctly:
<p>
The world has many words for cats: for example, Italian has <i lang="it">gato</i>,
while Japanese has <i lang="ja-Latn">neko</i> (<i lang="jp"><bdi>猫</bdi></i>).
</p><i> can also be used to indicate character thought:
Of course Cass raided the fridge again, Tim thought.
title attribute and alternatives
<abbr> is commonly used with a title attribute. for example:
<abbr title="Hypertext Markup Language">HTML</abbr>the above would produce a text element, HTML, which, when hovered over on desktop, would produce a tooltip that contains Hypertext Markup Language: HTML.
however, in the years since the attribute was implemented, title has been abused for SEO spam purposes to the point where many screenreaders will ignore it. additionally, mobile users and other groups do not have access to a hover mechanism (except in smaller cases, like tablet pen users). as a result, using <abbr title> as intended will lock out many users.
some interesting alternatives:
<dfn>, to denote a new term on a page, and then spell out its contents in parenthesis following the element: HTML (Hypertext Markup Language)- a creative CSS trick by alexia would make
<abbr title>accessible to touch-screen users, but i’m still worried about screenreader accessibility.