GUIDE: HTML In Cache Descriptions

Placing caches is great fun, but presenting them well is important. The geocaching editing layout offers many great features to do this automatically, but it’s possible to instead use HTML in the cache descriptions for more options. With this, you can create bold text, italic, make text-links, and a lot more that the editor can already do with a single click, but you can also add photos and a lot more! This guide shows you how.

Before we start, make sure that when editing your cache page you first click “Source” in the editor. This disables the automatic editing and enables HTML.

How does HTML work?

When writing plain text in the descriptons it will automatically begin at a new row when you hit ENTER and all basic features happen by themselves. With HTML on the other hand, you have to tell the computer everything. This opens up for more possibilities, but also takes some extra work to make perfect.

In short, HTML works by surrounding the text or parts of it with specific commands. Each command has it’s own function, and you usually provide a starting point and an ending point in the form of <> and </>. Anything in between those two points will be affacted by the command.

If you want a part of a text to be written in italic, you simply start with , write the text, and when you want the italic to stop you add . An example:

If you write “No, my name is not Monica” it will appear as “No, my name is not Monica”.

Below is a list of some simple commands.

Basic commands:

Bold
Italics
Underlined
<center> Centered

Remember that each command has to end by adding a slash before the letter (or word, as in “center”), for example or </center>.

If you want to start a new text block on a new row, however, no start or ending is required. You simply just write   and the text will break, jumping down one line. If you want a white space between two blocks, simply write   twice. Example:

“Hi, my name is Monica. And I’m Nic. What’s your name?” turns into this:

”Hi, my name is Monica.
And I’m Nic.

What’s your name?”

Simple? Try it and see for your self.

Add a photo

Do you want to include a photo? No problem! Copy and paste the following code at the place where you want the picture:

<img src=PHOTO LINK HERE>

The photo link is the adress where the photo is located. You have to upload it first. Here’s an example of a photo link:

http://geocachingkungsbacka.files.wordpress.com/2009/05/24_128x128.png

The result of this:

<img src=http://geocachingkungsbacka.files.wordpress.com/2009/07/dsc_4835.jpg>

…would be this:

Create text links

You can of course simply paste any link into your description. But it will usually be long and look ugly. If you want to do it properly, you create text links. Copy and paste the following code, and change the colored parts:

<a href=http://www.completegeocaching.com>Click here to go to Complete Geocaching.</a>

Red is the adress of the page you want to link to. In this case the main page of Complete Geocaching.
Blue is the text you want to be visible.

The above example would end up like this:

Click here to go to Complete Geocaching.

It’s also possible to make an image clickable by adding the image code from above between <a href=YOUR LINK> and </a> instead of text.

Color and text size

You can (among other things) change the color and text size by using the command . Here are some examples:

<font=+1>Makes the text bigger!
<font=green>Makes the text green!

You can experiment with other numbers and colors.

Mixed examples

It’s time to test our new skills. Here are two examples that take advantage of several of the above commands in various combinations:

Bold, blue text in two blocks:

<font=blue>This text is bold and blue. It’s also broken into two parts.

Becomes:

This text is bold and blue.

It’s also broken into two parts.

Centered image leading to the Complete Geocaching story “Caches & Landmines in Bosnia & Hercegovina” when clicking it:

<center><a href=http://completegeocaching.com/2012/07/01/caches-landmines-in-bosnia-hercegovina/>
<img src=https://completegeocaching.files.wordpress.com/2012/07/featured-caches-landmines.jpg?w=980></a></center>

Becomes: