Would you like to know a little about HTML, to jazz up your cache pages on Geocaching.com? Here are a few tags you can learn to do just that.

HTML, or Hypertext Markup Language, is really just a set of tags that you can add to regular text to control the appearance that text, or to add and position pictures, on a web page.

This section, HTML 101, will cover the following elements:

Line breaks, Paragraphs, and Horizontal Rules
Headings
Bold and Italic tags

Line breaks, Paragraphs, and Horizontal Rules

You may have noticed that when you view text in a browser window, any carriage returns that are on your original text file are ignored by the browser and all your text runs together. You can use these first 3 tags to start your text on the next line.

Line Break, or <br>
 Insert this tag when you want to begin a new line

Code looks like:
 This is line 1 <br> And this is line 2

And it will look like this on the web page:
 This is line 1
 And this is line 2

Paragraph, or <p> </p>
 Text after the <p> tag, or text inside the <p> </p> tags, will begin on a new line after a blank line.

Code looks like:
 <p>This is line 1</p><p>And this is line 2</p>

And it will look like this on the web page:

 This is line 1

 And this is line 2

Horizontal Rule, or <hr>
 This tag will create a horizontal line across the page

Code looks like:
 This is line 1 <hr>  And this is line 2

And it will look like this on the web page:
 This is line 1

 And this is line 2

Back to the top

Headings

You can turn text into a "heading" that will stand out from regular text, by wrapping that text with the following heading tags. The heading sizes range from 1 to 6, with 1 being the largest.

Code looks like:
  <h1> This is Heading 1 </h1>
  <h2> This is Heading 2 </h2>
  <h3> This is Heading 3 </h3>
  <h4> This is Heading 4 </h4>
  <h5> This is Heading 5 </h5>
  <h6> This is Heading 6 </h6>

And it will look like this on the web page:
 

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

Back to the top

Bold and Italic tags

You can make text bold or italic, by wrapping that text with the following tags.

Bold, or <b> </b>

Code looks like:
  <b> This text is bold </b>

And it will look like this on the web page:
  This text is bold

Italic, or <i> </i>

Code looks like:
  <i> This text is italic </i>

And it will look like this on the web page:
  This text is italic

Back to the top