Grow your CSS skills. Land your dream job.

Abbr’s for Web Nerd Acronyms

Published by Chris Coyier

I'm really lazy about using <abbr> tags for acronyms. Most people who read a techy blog like this probably understand them, but surely there are some visitors who don't where a simple tooltip explanation would be beneficial. Maybe with this easy copy-and-paste resource to reference I'll actually start doing it. This is an education blog, after all.

<abbr title="Customer Relationship Management">CRM</abbr>
<abbr title="Content Management System">CMS</abbr>
<abbr title="Structured Query Language">SQL</abbr>
<abbr title="International Organization for Standards">ISO</abbr>
<abbr title="PHP: Hypertext Preprocessor">PHP</abbr>
<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="JavaScript">JS</abbr>
<abbr title="European Computer Manufacturers Association Script">ECMAScript</abbr>
<abbr title="Internet Service Provider">ISP</abbr>
<abbr title="Internet Protocol">IP</abbr>
<abbr title="HyperText Transfer Protocol">HTTP</abbr>
<abbr title="Really Simple Syndication">RSS</abbr>
<abbr title="Internet Relay Chat">IRC</abbr>
<abbr title="File Transfer Protocol">FTP</abbr>
<abbr title="Asynchronous JavaScript and XML">AJAX</abbr>
<abbr title="Domain Name System">DNS</abbr>
<abbr title="Document Object Model">DOM</abbr>
<abbr title="Object Oriented Programming">OOP</abbr>
<abbr title="Don't Repeat Yourself (programming principal)">DRY</abbr>
<abbr title="Secure Sockets Layer">SSL</abbr>
<abbr title="Ruby on Rails">RoR</abbr>
<abbr title="Keep it Simple, Stupid">KISS</abbr>
<abbr title="Linux, Apache, MySQL, PHP (common server configuration)">LAMP</abbr>
<abbr title="Cross Site Scripting">XSS</abbr>
<abbr title="Search Engine Optimization">SEO</abbr>
<abbr title="Joint Photographic Experts Group (file format)">JPG</abbr>
<abbr title="Graphics Interchange Format (file format)">GIF</abbr>
<abbr title="Portable Networks Graphics (file format)">PNG</abbr>
<abbr title="Photoshop Document (file format)">PSD</abbr>
<abbr title="Adobe Illustrator (file format)">AI</abbr>
<abbr title="Software as a Service">SaaS</abbr>
<abbr title="Syntactically Awesome Stylesheets">SASS</abbr>
<abbr title="Red Green Blue">RGB</abbr>
<abbr title="Hue Saturation Lightness">HSL</abbr>
<abbr title="User Interface">UI</abbr>
<abbr title="User Experience">UX</abbr>
<abbr title="JavaServer Pages">JSP</abbr>
<abbr title="Active Server Pages">ASP</abbr>
<abbr title="What You See Is What You Get">WYSIWYG</abbr>

Maybe there could be some WordPress plugin that could REGEX post content and automatically do it?

Got some ones I should add to the list? I'll probably keep the list above specifically web development acronyms not general computer/internet ones.

Comments

  1. Dun it. To my surprise it worked at the first try º_º

    All changes are on the fly, it doesn’t change the database, it doesn’t replace catnIP, it’s case insensitive (both ‘ip’ and ‘IP’ will be replaced) and it works just by pasting it into functions.php

    function tag_abbreviations($content) {
    	$abbrs = array(
    		'CRM' => '<abbr title="Customer Relationship Management">CRM</abbr>',
    		'CMS' => '<abbr title="Content Management System">CMS</abbr>',
    		'SQL' => '<abbr title="Structured Query Language">SQL</abbr>',
    		'ISO' => '<abbr title="International Organization for Standards">ISO</abbr>',
    		'PHP' => '<abbr title="Hypertext Preprocessor">PHP</abbr>',
    		'HTML' => '<abbr title="HyperText Markup Language">HTML</abbr>',
    		'XHTML' => '<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>',
    		'CSS' => '<abbr title="Cascading Style Sheets">CSS</abbr>',
    		'JS' => '<abbr title="JavaScript">JS</abbr>',
    		'ECMAScript' => '<abbr title="European Computer Manufacturers Association Script">ECMAScript</abbr>',
    		'ISP' => '<abbr title="Internet Service Provider">ISP</abbr>',
    		'IP' => '<abbr title="Internet Protocol">IP</abbr>',
    		'HTTP' => '<abbr title="HyperText Transfer Protocol">HTTP</abbr>',
    		'RSS' => '<abbr title="Really Simple Syndication">RSS</abbr>',
    		'IRC' => '<abbr title="Internet Relay Chat">IRC</abbr>',
    		'FTP' => '<abbr title="File Transfer Protocol">FTP</abbr>',
    		'AJAX' => '<abbr title="Asynchronous JavaScript and XML">AJAX</abbr>',
    		'DNS' => '<abbr title="Domain Name System ">DNS</abbr>',
    		'DOM' => '<abbr title="Document Object Model">DOM</abbr>',
    		'OOP' => '<abbr title="Object Oriented Programming">OOP</abbr>',
    		'SaaS' => '<abbr title="Software as a Service">SaaS</abbr>',
    		'SASS' => '<abbr title="Syntactically Awesome Stylesheets">SASS</abbr>',
    		'RGB' => '<abbr title="Red Green Blue">RGB</abbr>',
    		'HSL' => '<abbr title="Hue Saturation Lightness">HSL</abbr>'
    	);
    	foreach ($abbrs as $abbreviation => $tag) {
    		$content = preg_replace("/(\b$abbreviation\b)/i", $tag, $content);
    	}
    	return $content;
    }
    add_filter( 'the_content', 'tag_abbreviations' );
    • Very cool. Would it make more sense to search for them with spaces on either side of the acronym? Or is it already doing that with the \b?

      For the record, Matt Mullenweg wrote some PHP to do this nearly 10 years ago: http://ma.tt/scripts/acronymit/ But it’s not a WordPress function and it uses the deprecated tag.

    • Anna Funk
      Permalink to comment#

      That function is awesome!

      And it’s a pretty universally-known abbreviation, but I don’t think any list is complete without KISS => “Keep it Simple, Stupid” or “Keep it Stupid Simple” (if you’re feeling nice)

    • Scott
      Permalink to comment#

      “So my friend DOM called me yesterday but I missed his call because I just got out the shower and needed to DRY off. He wanted to know if I wanted tickets to the Man Utd vs AJAX match. Just as I called him back I saw my pet ASP had escaped and in the surprise, accidentally knocked over my LAMP.”

      :D

    • Scott, I didn’t think about that, the best way to fix it would be to remove the i at the end of the regex so that it only matches UPPERCASE abbreviations. And you’re unlikely going to talk about Man Utd vs AJAX on a blog where you’d use any of these acronyms!

      Chris, yes, /b is for word boundaries, so it should only match acronyms preceded and followed by a space, a linefeed and punctuation. More on regular-expressions.info/wordboundaries.html

    • Permalink to comment#

      Hey Federico,

      I tried both the code you have posted and the improved code you linked too. Great idea. For some reason though the improved code you linked to doesn’t work for me. I get a fatal error caused by the allowed memory being exhausted. Any idea why that would be occuring?

      Thanks. And good work!

    • Permalink to comment#

      nm figured it out

  2. I found this to be a very good idea. There is a WordPress plugin that does this. It is called Acronyms.
    The plugin gives a list of abbreviations in the WordPress dashboard.
    I just installed it on a 3.3 beta install and it worked fine.
    It does use the acronym tag instead of the abbr tag but that could be changed fairly easy I suspect.

  3. kevin
    Permalink to comment#

    SEO has le typo

  4. Permalink to comment#

    Pretty sure that lightness in HSL should be luminance instead..

  5. hoge
    Permalink to comment#

    not eXtensible, but Extensible.

  6. róm
    Permalink to comment#

    ISO = International Organization for Standardization

  7. Permalink to comment#

    Hi there, my premature versión of the wordpress plugin, any pull requests are welcome!

    https://github.com/Markcial/Wordpress-Nerd-Terms-Explainer-Plugin

    • Hassan
      Permalink to comment#

      How about an admin interface to edit the list?

    • Permalink to comment#

      The issue about an admin interface is that it won’t be just a simple function.

      The admin interface shoud require access to the DB in order to mantain new acronyms.

      But it surely isn’t that hard to acomplish.

      (excuse my poor english. i’m kinda rusty=)

  8. Dave
    Permalink to comment#

    You included one in your post that isn’t in your list – REGEX.

    Granted it’s not an acronym, but it is an abbreviation which may not be understood by everyone!

  9. Brian
    Permalink to comment#

    With as much as we use APIs nowadays, it would be a great addition to the list.

  10. KZS
    Permalink to comment#

    When writing the plugin remember to avoid replacing anything inside attributes of HTML tags. For example if the link (href attribute) includes the word seo, the abbr might get inside the href and mess up the HTML syntax. Unless the \b in the example posted by Federico fixes that issue somehow.

  11. There is a plugin called Acronyms. I have been using since some time and never fails. The plugin site URL doesn’t make sense but I’ve pastied the code here: http://pastie.org/2730994

    Hope it helps, Chris.

  12. Permalink to comment#

    RTFM – Read The Fucking Manual
    JFGI – Just Fucking Google It

    • Sebastiaan Stpl
      Permalink to comment#

      Replace fucking with freaking.

      And in RTFM you can use fine.

  13. My Text Filter Suite has a ‘TFS Acronymit’ piece that does automatic substitutions like that. But it’s old and crusty, and needs to be rewritten from scratch one day. :)

  14. By the way, PHP is actually “PHP: Hypertext Preprocessor“. It’s what’s known as a recursive acronym.

    Sorry to be the stickler. Just haven’t seen anyone else mention it. :P

    • Point of history — earlier in PHP’s life, it stood for “Personal Home Pages”. It was changed to the recursive “PHP Hypertext Processor” when 3.0 was released.

    • Scott Vivian
      Permalink to comment#

      Yep, so technically PHP stands for “Personal Home Page: Hypertext Processor” :D

  15. Cam Carnell
    Permalink to comment#

    REST – Representational State Transfer

  16. I would add:
    URL – Uniform Resource Locator
    URI – Uniform Resource Indicator
    and of course there must be RTFM in the list :) it’s the best acronym, it there can be such a thing.


  17. IA
    UCD
    IxD

    Not all abbreviations are initialisms, so I use class="initialism" to pick out those terms which are 100% upper-case. FedEx, for example is not an initialism but is an abbreviation.

    I increase letter spacing and decrease font size for initialisms – a treatment which would be inappropriate for the FedEx example.

    Pedantic.

  18. Permalink to comment#

    Apologies for repeating this, but folks may have missed it up there in the middle of the comments.

    Joel Pan’s Acronyms plugin is no longer being maintained and does not support HTML5. An updated fork which auto-detects your theme’s DOCTYPE (and is actively maintained by yours truly) can be found here.

  19. Karl Crowley
    Permalink to comment#

    Doesn’t the first P in PHP stand for PHP? ludicrous, I like to think it means powerful

  20. Permalink to comment#

    I scored like 98%, yeah! I rule!

  21. Sebastiaan Stpl
    Permalink to comment#

    XHR = XMLHttpRequest: https://secure.wikimedia.org/wikipedia/en/wiki/XMLHttpRequest
    IaaS = Infrastructure as a service
    JSON = JavaScript Object Notation
    XLST = Extensible Stylesheet Language Transformations

    • Sebastiaan Stpl
      Permalink to comment#

      Whoops, I Spelled my last name wrong. Its Stok not Stpl.

  22. Hi everyone-

    For any TextExpander users, I made a TE group that will automatically output these. Thanks, Chris, for the great list.

    The TE group is available for download on my site.

    Hope some of you find it useful!

  23. Permalink to comment#

    What about doing a GIST out of it?

  24. elbryan
    Permalink to comment#

    HCI: Human Computer Interaction

  25. myshock
    Permalink to comment#

    Certainly, abbr’s and acronyms play an important role in web accessibility.
    I know you can be fed up with coding them all the time.
    But the problem with abbr’s is that they’re not keyboard focusable in user agents. so the tooltip does not display for people navigating keyboard only.

    So if you plan to build a plugin that does the job, try to make a plugin that explains the first occurency of the term in the text of the page itself this way, for an example :

    css-tricks is all about cascading style sheets (css).

    Please forgive my english

  26. Permalink to comment#

    GNU = GNU’s Not Unix

  27. UX Guy
    Permalink to comment#

    RFTM by far my fav

  28. Permalink to comment#

    Missing WYSIWTF for IE ;)

  29. Permalink to comment#

    HLL (High Level Language)
    LLL (Low Level Language)

    *******

    PDF (Portable Document Format)

  30. Permalink to comment#

    Can’t really understand wht is the use of codes like these in HTML… Is it any better coding the full-form than writing it in a simple bracket?
    If we can simply write – “Intel (Integrated Electronics)” – , why code so long?

    There are a number of lame tags in HTML, like the defination-list-tags etc.

    The same HTML also offers extensive features like changing the browser-button-color according to color of website (in HTML5).
    It is a two-way language…
    Should we put it as a High Level Lang., OOL, or what?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".