Battling Ampersands in Your Blog Design and Code

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

Many 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 &:

<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&ie=utf-8&oe=utf-8
&aq=t&rls=org.mozilla:en-US:official
&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:

See Also

Adding Images to WordPress: Step-by-Step Guide

• 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 &.

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 HTML Character Entities begin with an ampersand.

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

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

#

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.

That’s a lot of ampersands.

Related References

• Writing and Publishing Code in Your WordPress Blog Posts
• Publishing Signatures And Writing Code In Your WordPress Posts
• Ampersands (&’s) in URL s
• HTML Help – Validation Problems with Ampersands
• Anne Van Kesteren – Ampersands matter
• Character entity references in HTML 4
• HTML Codes – Table of ascii characters and symbols
• Text Creation Partnership Character Entity List
• Checklist for HTML Character Coding
• Character Entity References in HTML 4
• Web Design Group: HTML 4.0 Entities