🧩 HTML Code for Your Cache Page
Learn how to enhance your geocaching cache pages using basic and advanced HTML. This guide covers everything from formatting text to inserting images and links.
❓ What Is HTML?
HTML (Hypertext Markup Language) is the code used to structure and display content on web pages. While the Geocaching website automatically formats plain text, you can manually add HTML to customize your cache descriptions.
To test HTML before using it:
- Open Notepad and save a file as
test.htm. - Add your HTML code and save.
- Open the file in a browser to preview.
- Copy and paste the code into your cache description.
✅ Make sure to tick “The descriptions below are in HTML” when editing your cache page.
✏️ Basic HTML Formatting
Paragraphs
<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>
Line Breaks
Line one<br />
Line two<br /><br />
Line four
Bold and Italic
<strong>This is bold</strong>
<em>This is italic</em>
<strong><em>This is bold and italic</em></strong>
🎨 Fonts, Sizes, and Colors
Font Face
<font face="Comic Sans MS">Comic Sans</font>
<font face="Times New Roman">Times New Roman</font>
Font Size
<font size="3">12 point</font>
<font size="4">14 point</font>
Font Color
<font color="red">Red text</font>
<font color="green">Green text</font>
Combined Styling
<font face="Comic Sans MS" size="4" color="red">Styled text</font>
📐 Text Alignment
Center and Right
<center>This is centered</center>
<p align="right">This is right-aligned</p>
Using DIV
<div align="center">Centered with DIV</div>
<div align="right">Right-aligned with DIV</div>
🔗 Creating Hyperlinks
Basic Link
Click <a href="http://followthearrow.gagb.co.uk">here</a> to visit the site.
Full URL as Link
Go to <a href="http://followthearrow.gagb.co.uk">www.followthearrow.gagb.co.uk</a>
Open in New Tab
Click <a href="http://followthearrow.gagb.co.uk" target="_blank">here</a> to open in a new tab.
🖼️ Adding Images
Basic Image
<img src="https://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg">
Image as Link
<a href="http://www.geocaching.com/track/details.aspx?id=182728">
<img src="https://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg" />
</a>
Centered Image with Caption
<center>
<img src="https://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg" /><br />
This is the Roamin Roman TB
</center>
📏 Horizontal Rules
<hr>
<hr color="green">
<hr color="green" width="50%">
