Context: Dan tweeted about whether ABBA should be marked up as an abbreviation, and followed up with the confirmation that ABBA is an acronym. Jeremy responded that the abbr element is the more general, since acronyms are abbreviations themselves. And I did this diagram when I should have been working.
An abbreviation is a shortened form of a lengthy term. For example, etc. is an abbreviation of et cetera (the Latin phrase meaning “and so forth”), and Inc. is an abbreviation of Incorporated. Abbreviations can also be formed from the initial letters of a multiword phrase such as ATM for Automatic Teller Machine or CSS for Cascading Style Sheets, or from initials extracted from the syllables of a long word, such as DNA for deoxyribonucleic acid (these are also called initialisms). You can indicate an abbreviation in (X)HTML with the abbr element.
An acronym is a specific type of abbreviation, being a pronounceable word formed
from the first letters of a multiword phrase—laser from light amplification by simulated
emission of radiation and PIN from personal identification number—or the first portion of each word, as in defcon from defense condition and sysadmin from system administrator. You can mark up acronyms with the acronym element.
To know the difference between abbreviations and acronyms, just remember that
an acronym is a word that can be spoken; if you can’t pronounce it, it’s probably not an
acronym. Because acronyms are themselves abbreviations, there is considerable semantic overlap between these two elements. It’s important to distinguish the two on the web because screen-reading software can be designed to read the initials in an abbr element, but attempt to pronounce an acronym. Even so, many unpronounceable abbreviations (such as ATM or CSS) are still thought of as acronyms. If in doubt, use abbr, the more general of the two elements.