Battling Ampersands in Your Blog Design and Code

Filed as Guides on February 25, 2008 11:52 am

The history of the ampersand, the & on your keyboard, is a long and fascinating one.

Geoffrey Glaister writes in his “Glossary of the Book,” is a corruption of and (&) per se and, which literally means “(the character) & by itself (is the word) and.” The symbol & is derived from the ligature of ET or et, which is the Latin word for “and.”

One of the first examples of an ampersand appears on a piece of papyrus from about 45 A.D. Written in the style of early Roman capital cursive (typical of the handwriting of the time), it shows the ligature ET. A sample of Pompeian graffiti from 79 A.D. also shows a combination of the capitals E and T, and is again written in early Roman script. Later documents display a more flowing, less formal Roman lowercase cursive, which evolved into our italic, and the appearance of a ligature et becomes more frequent.

In the modern online world, the ampersand is a handy abbreviation for “and” to connect words, a popular element in computer programming, a character in emoticons &| , and a hassle for site code validation and publishing code in your blog posts.

Ampersands and Site Validation

Graphic of ampersands in various fonts copyright Lorelle VanFossenMany designers will work overtime to ensure their web design meets web standards and accessibility guidelines. Then they add a few advertisements, Google Maps, scripts, and other add-ons to their blog and errors pop up.

One of the most common design errors comes from the ampersand in URL and advertising links. Advertisers providing ad links are not necessarily to blame, though they could do a better job with the code they hand out, warn users that use of the code will break their perfect score for validation, and offer tips on how to fix the problem.

The blame rests with the limitation of browsers and passing information across the web. Most modern browsers handle ampersands well, but validation programs know that there are plenty of people using older browsers which can bork with ampersand usage.

In general, when using an ampersand in URL and advertising links, ampersands need to be converted into an HTML character entity, the browser translation of the ampersand.

& = &

For example:

http://example.com/index.php?query=test1&type=test&etc=test

typically won’t validate so you need to change the ampersand to its character entity in order to validate, which doesn’t change the effectiveness of the script.

http://example.com/index.php?query=test1&type=test&etc=test

You won’t see a difference when the link displays as the browser translates it into the ampersand, but the validation and problematic browsers will see the difference.

Here’s some real world examples. The first is an ad from Amazon.

<a href="http://www.amazon.com/gp/search?ie=UTF8
&keywords=dress%20code&tag=blahXYZ&index=dvd
&linkCode=ur2&camp=1789&creative=9325">Dress 
Code</a>...

In order to validate, each ampersand must be converted to &amp;:

<a href="http://www.amazon.com/gp/search?ie=UTF8
&amp;keywords=dress%20code&amp;tag=blahXYZ&amp;index=dvd
&amp;linkCode=ur2&amp;camp=1789&amp;creative=9325">Dress 
Code</a>...

Here is the Google search results link for “ampersand”:

http://www.google.com/search?
q=ampersand+errors+web+design+validation
&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:
official&client=firefox-a

To use this in your blog post and make it valid, according to web standards, you would have to convert the ampersands into HTML character entities:

http://www.google.com/search?
q=ampersand&amp;ie=utf-8&amp;oe=utf-8
&amp;aq=t&amp;rls=org.mozilla:en-US:official
&amp;client=firefox-a

In reality, you could remove everything after the search term “ampersand” and the link would still work.

To avoid many of the validation and browser issues with ampersands on your blog, consider the following recommendations:

  • Avoid using an ampersand in a post title.
  • Avoid using an ampersand in your blog title.
  • Avoid using an ampersand in your links.
  • Avoid using an ampersand in your blog URL.
  • Convert all ampersand usage into its HTML character entity &amp;.

Publishing Ampersands in Code on Your Blog Posts

I write a lot of code in my WordPress blogs which often includes a lot of ampersands.

Ampersands, quote marks and apostrophes are the bane of online technical writers. WordPress and other blog services and word processors ignore ampersands, however they convert quotes into “smart quotes” that slant pretty with the font. These converted quote marks will not reproduce as viable code if they are copied and pasted into your own code. Thus, quote marks and apostrophes must be converted into HTML character entities.

The added emphasis was on purpose. There is nothing worst than offering code to your readers and having them come back and say it doesn’t work all because you didn’t convert the quotes.

I not only publish code, I show you how the code should really look, which means I have to double convert the ampersands in the code to make it display properly.

All begin with an ampersand.

For instance, to show you the ampersand as &, I have to type in &amp;. To show you that, I have to type in &amp;amp;, breaking it down character by character.

To display the quote mark character entity &#35;, I have to convert the ampersand into the &amp; and convert the number or pound sign (#) into it’s character entity, which begins with another ampersand as &amp;#35;, and follow that with the number 35 and the semi colon. To show you that, it looks like:

&amp;amp;&#35;35;

You don’t want to see what it took to create that. :D

Here are a few examples of how to display code sources, not just the code.

Ampersand & &amp; &amp;amp;
Quote Mark " &#34; &amp;&amp;#35;34;
Apostrophe ' &#39; &amp;&amp;#35;39;
Number sign (Pound) # &#35; &amp;&amp;#35;35;
Colon & &#58; &amp;&amp;#35;58;
Semi-colon ' &#59; &amp;&amp;#35;59;
Equals sign = &#61; &amp;&amp;#35;61;
Right Slash or Fraction / &#47; &amp;&amp;#35;47;
Less than < &#60; or &gt; &amp;&amp;#35;60;
Greater than > &#62; or &lt; &amp;&amp;#35;62;

That’s a lot of ampersands.

Related References

Tags: ,

This post was written by

You can visit the for a short bio, more posts, and other information about the author.


Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. By hammy posted on February 25, 2008 at 10:51 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Phew. That’s some history.

    The digital age sure has changed the way we look at a lot of things. We invented a lot of terms for it, but we also gave new meanings to other terms. Even before the computer was born, we had mice, we had folders, we had files, we had monitors, we had word, and by God, we had windows… the words remain the same, but the meanings have evolved a lot.

    The ampersand is another character with meaning renewed…
    :)

    Reply

  2. By luis posted on January 12, 2010 at 8:46 am
    Want an avatar? Get a gravatar! • You can link to this comment

    THANK YOU! i seem to have missed this day in class. many thanks for posting this. i was able to fix my 104 validation errors in just a few minutes. cheers, lg

    Reply

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.

    Current day month ye@r *