Identification, Images, & Information
For Insects, Spiders & Their Kin
For the United States & Canada
Clickable Guide
Moths Butterflies Flies Caterpillars Flies Dragonflies Flies Mantids Cockroaches Bees and Wasps Walkingsticks Earwigs Ants Termites Hoppers and Kin Hoppers and Kin Beetles True Bugs Fleas Grasshoppers and Kin Ticks Spiders Scorpions Centipedes Millipedes

Upcoming Events

See Moth submissions from National Moth Week 2023

Photos of insects and people from the 2022 BugGuide gathering in New Mexico, July 20-24

Photos of insects and people from the Spring 2021 gathering in Louisiana, April 28-May 2

Photos of insects and people from the 2019 gathering in Louisiana, July 25-27

Photos of insects and people from the 2018 gathering in Virginia, July 27-29

Photos of insects and people from the 2015 gathering in Wisconsin, July 10-12

Previous events

FOR REVIEW: Complete Markup Article


--BBCode Version
--HTML Version
--Clickable Thumbnails
--Images from another web site
--Adding Anchors
--Linking to Anchors


--BBCode version
You will want to type:

[url=Web Site Goes Here]Word Goes Here[/url]

Fill in the colored words with what they say. Example:

[url=]Welcome to BugGuide.Net![/url]

would come out to look like:

Welcome to BugGuide.Net!

----Another way to do it is this:

[url]Web Site Goes Here[/url]


would come out to look like:

--HTML Version

You will want to type:

<a href="Web Site Goes Here">Word Goes Here</a>

Let's try it.
<a href="">Welcome To BugGuide.Net!</a>

which would look like:
Welcome To BugGuide.Net!

Now, if we wanted this link to take someone to a different tab, you would type:
<a href="Web Site Goes Here" target="_blank">Word Goes Here</a>

Let's try it out.
<a href="" target="_blank">Welcome to BugGuide.Net!</a>

Which would look like:
Welcome to BugGuide.Net!

»More about the target attribute
»More about the links


--Clickable Thumbnails*

You will want to type:

where # is the number on the top left corner of any image on BugGuide.


would come out to look like:

*These can only be used on BugGuide images.

--Images from another web site

NOTE: Be cautious when doing this. Always make sure to give the website/photographer credit for their photo.

You will want to type:

[img]Web Site (copy image location) Goes Here[/img]


comes out to look like:

--Images with HTML

<img src="" />

The result:

--Clickable Images
You can combine links and images to make a clickable image.
You will want to type:
[url=Site Here][img]Site Here[/img][/url]

Let's try it:

This would look like:

Now let's do the HTML version.
<a href="Site Here"><img src="Web Site (copy image location) Goes Here" /></a>

Let's try it:
<a href=""><img src="" /></a>

More about images...


The <span> tag is a way to use a form of CSS, called an inline style sheet. Instead of stating how the elements are used in the first part of the page, you can state how the elements are used with the <span>tag (or any tag).

For an inline style sheet, you will want to type this:
<span style="Commands here">Text to which the commands will apply</span>

Now, how to type the style commands:
Each property:value; is a declaration.
For example you might want to type:
<span style="font-size:25px;font-weight:bold;color:#0000ff;background-color:#ff0000;cursor:pointer;">This is a test</span>

This will generate:
This is a test

Here is another example that makes letters blink.
<span style="text-decoration:blink;font-size:20px;color:#ff0000;font-weight:bold;">Test</span>

NOTE: Blink is not supported by Internet Explorer, Safari, or Chrome.

It may be helpful to you to read this and this

--Text decoration

Some examples:
<span style="text-decoration:underline;">Test</span>
<span style="text-decoration:overline;">Test</span>
<span style="text-decoration:line-through;">Test</span>

The results:




You will want to type:

<span style="font-size:Size Goes Herepx">Word Goes Here</span>

Let's try it out:

<span style="font-size:17px"></span>

This is what it will look like:

You can change the size. I just randomly chose 17 for an example.


You will want to type:

[color=Color Here]Word Goes Here[/color]

Let's try it out:

will look like:

Also, you could use Hex Colors.
A hex color is a hexidecimal number. The first 2 digits are the red, the next 2 digits are the green, and the last 2 digits are the blue.
Simply add a # to the code.

[color=#ff00ff]i am ugly[/color]

i am ugly

For a reference of hex colors, see the page on my website.

--Color with Inline Styling

<span style="color:#ff00ff">I am ugly</span>

The result is the same as the BBCode version.
I am ugly


Cites are used to credit books, images, forum topics, and links*. They are clickable.
You will want to type:
where # is the cite number of the page. If you go to a page on BugGuide, at the address bar, the last number is the number you will want..

Let's try it:

will look like:
*These can only be used on


--BBCode Version
You will want to type:
[b]Word Here[/b]

Let's try it.

will look like:

--HTML Version

You will want to type:
<b>Word Here</b>

Let's try it:

which would look like:


--BBCode version

You will want to type:
[i]Word Here[/i]

Let's try it.

will look like:

--HTML Version

You will want to type:
<i>Word Here</i>

Let's try it.

which would look like:


--BBCode Version

This is what you would type:
[u]Word Here[/u]

Let's try it:

which would look like:

--HTML Version

<u>Word Here</u>

<u>This is a good page!</u>

This is a good page!

Hmmm... BugGuide does not seem to allow the HTML version. Read the CSS way to do it instead.

--A CSS way to do it

<span style="text-decoration:underline;">Test</span>

The result:


--Adding Anchors:
You can use an anchor to link to a specific section of a page. To do that, you have to add an anchor to link to later on.

This is what you will type to add an anchor
<a name="Anchor Title Here">Word Here
Note: You cannot use spaces in anchor naming. I use underscores (_)

Here's an example:
<a name="Anchor_Test"></a>Anchor Test

Now I'm actually going to create an anchor so we can link to it.

Anchor Test=this is the anchor. I made it bold so it is noticeable.

--Linking to anchors

Linking to anchors is pretty much the same as a normal link. The only difference is you add a # on the end and then type the anchor name you are linking to.

Here is what you type: (I just chose to use BBCode here. You can use HTML as well.)
[url=Web Site Goes Here#Anchor Name goes here]Word Goes Here[/url]

Let's try it out on the anchor we made:
[url=]Anchor Test[/url]

Now let's see if it takes us to the anchor.
Anchor Test

»More about anchors...

Mixing Markup

You can use more than one markup at a time.
For instance, we could do this:
which would look like:

or this:
which would look like:

or this:
which would look like:

or this:
<span style="font-size:17px;color:blue;"><b><i></i></b></span>
which would look like:

or this:
<a name="Anchor Name Here" href="Site Here">Word Here</a>
which would look like:
<a name="anchor_test_ii" href=""></a>
which would be:
Then we could link to it:

There are unlimited tags you can combine. Try it out!


You will want to type:
<strike>Word Here</strike>

Let's try it:

which would look like:

Copy this code:




<span style="margin-right:2px;border:1px solid #c6be9e;-moz-border-radius:8px;-webkit-border-radius:8px;padding:5px;text-align:center;display:block;float:left;background-color:#e6dbae;">[thumb:489150]
Caption Text</span>

Note: This uses the thumb tag, see the thumb tag in this article.
Note: You can not use the same number in a thumb tag more than once in a page.
Note: You cannot go into the next line of code with another caption. Otherwise they will not display correctly.
Important Note: After the last caption is closed in each row of captions, place this line of code so your text is not hidden underneath each caption.

<span style="display:block;clear:both;"></span>


Symbol entities can be used to show a symbol without activating markup
Here are some codes that can be used: (code_____symbol it turns into)
&amp; (or &#38;)_____&
&lt;(or &#60;)_____<
&gt;(or &#62;)_____>

See my collection of over 600 symbol entities on my website here.


This is a list of all the forum topics on BugGuide that have helped me with this article


This was originally its own page, but I merged it with this markup page.

First of all, CSS stands for Cascading Style Sheets, a language used to style HTML elements.
The only type of CSS allowed in Bugguide messages is inline styling, styling within the HTML style attribute.
To learn more about this please see

I will only cover a few very neat ways to enhance your messages here at BugGuide.

Creating Stunning Headers

To create headers such as above copy this code:
<span style="display:block;padding:5px;-moz-box-shadow: 2px 2px 10px #000000;-webkit-box-shadow: 2px 2px 10px #000000;-moz-border-radius:10px;-webkit-border-radius:10px;background:#c0c0c0;background:-moz-linear-gradient(top, #efecde, #c9c5ae);background:-webkit-gradient(linear, left top, left bottom, from(#efecde), to(#c9c5ae));font-weight:bold;font-size:20px;border:1px outset #e5dcb2;text-shadow:0px 1px 0px white;font-family:trebuchet ms, verdana, sans-serif">PLACE YOUR TEXT HERE!</span>

To create a code container like above use this code:
<span style="display:block;padding:5px;-moz-box-shadow: 2px 2px 10px #000000;-webkit-box-shadow: 2px 2px 10px #000000;-moz-border-radius:10px;-webkit-border-radius:10px;background:#c0c0c0;background:-moz-linear-gradient(top, #efecde, #c9c5ae);background:-webkit-gradient(linear, left top, left bottom, from(#efecde), to(#c9c5ae));font-weight:bold;border:1px outset #e5dcb2;text-shadow:0px 1px 0px white;font-family:monospace">PLACE YOUR TEXT HERE!</span>

For all of these 3d boxes, they will only look correct if you are using Safari, Firefox (a new version), or Google Chrome. Here is an image of what you will see if you use either of those 3 browsers:

This code was originally from my Insects gallery and my Forum.

Finished? Place it!
Is this nice guide finished now?

If so, why isn't it placed so people looking for help can find it, like on the Help Tab - Images? Or at least have a link there to point to it if it can't be moved. Nobody will ever see it otherwise.

I've see other things that would be useful if placed where somebody would look for it. This is like a picture known to species yet still in the ID Request section (which bugs me no end).

links that are hard to find
Since there are a number of useful links that seem to get lost in the Forums what I do is list the ones that I think are useful on my account page for easy access.

simple question
how to make [cite:####] appear as text and not as say: (1)?

replace any element of the syntax by its code; see the Symbols section of this article

i put &#91; in stead of the opening bracket

You could always just do the non-cite technique
The Coccinellidae (Coleoptera) of America North of Mexico
then add the bugguide page
then close the square brackets
then add the title
The Coccinellidae (Coleoptera) of America North of Mexico
and finish with closing [/url

return to beginning of next line
We are working on Joe's Miridae article here following the pattern set up above under Captions. It says you have to end each line of captions otherwise it won't display correctly, but we're not sure how to tell how many images will fit on a line. The article looks fine on our computer but displays differently on two other computers we visited. It wraps to the next line, but not necessarily to the beginning of that line. Do we just arbitrarily put six or maybe seven images to a line and hope they fit?

Is there a way to write a string of superscripted characters?
Please see my posted query about this. My purpose is to use superscripted "(3)" rather than ordinary text "(ref. 3)" to denote the third reference (not hyperlinked) in my managed forum article. In that way I maintain the style dictated by superscripted hyperlink "(2)" which was automatically created for the second reference. I'm not sure what will happen if ever I add to the article a third hyperlinked reference. Will there be automatic creation of superscript "(3)"? That would compete badly with my previous reference"(3)" which is not hyperlinked. If that would happen, I would have to manually reassign all my superscripts "(3)" to "(4)". What a mess!

So I guess I'm asking two questions. How to do superscripts? How to best list and denote a mix of hyperlinked references and non-hyperlinked references?

Unfortunately I don't think superscripts can be done in BG. Usually you would use the HTML <sup> tag, but BG doesn't let you use this tag... not sure why exactly.

list question
I often create lists using the "+" markup, which creates a nice bulleted list. Is there a way to make certain bullets of a list indented?

If you're making lists, ...
use the <ul> tag and the <li> tag like this: <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> </ul> which will be
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

My captions are to the side of the image
What am I doing wrong? See this page.

A hunch
The caption needs to be on the next line. Unfortunately, that puts the caption outside the box when done on guide pages

The problem is that the system treats text differently in guide pages than in forum topics and comments: it wraps each line in a <div></div> pair, instead of just one for the whole text area. HTML pairs like the <span></span> and <div></div> should never cross each other- one needs to be completely nested inside the other. The result of doing so is unpredictable: some browsers may work ok, but others will have some odd mix of working and not, or even not work at all, hiding the whole thing.

I have a suspicion that the caption code is incompatible with guide pages and will only work in comments and forum topics, but there may be something I'm missing here.

I agree
Not sure how to fix this off the top of my head either...


Actually I may have figured it out...
Apparently BugGuide supports <!-- ... -->, which is an HTML comment. Assuming the guide pages support this, this could be a way to get around the <div> thing on each line:

<span style="margin-right:2px;border:1px solid #c6be9e;-moz-border-radius:8px;-webkit-border-radius:8px;padding:5px;text-align:center;display:block;float:left;background-color:#e6dbae;">[thumb:489150]<!--
-->Caption Text</span>

I just tried it. The result was the same as before.

Is the result still present?
if so I can see what's happening

I used that code for the the O. aglossus image on a) of the same link I show above.

No clue
If you included the <!-- --> thing that was in the code I'm not sure what else to do.

for trying. =]

is there a way to indent paragraphs in a hierarchical list?
i mean, without adding the nonbreaking space symbols (that only indent the first line anyway)
   Superfamily Neanuroidea
         Subfamily Neanurinae
            Tribe Neanurini
            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla that the entire bla bla bla text holds the left indentation of the first line, no matter how long the paragraph is? thanks.

Order Blah
<span style="display:block;margin-left:50px;">Family Blah</span><span style="display:block;margin-left:100px;">genus Blah</span><span style="display:block;margin-left:150px;">species Blah</span>

Order Blah
Family Blahgenus Blahspecies Blah

terrific. many thanks -- again
hope this works on info pages... will be trying

yaay! it worked...
...very much the way i wanted it to -- pls see the classif. synopsis at(1) -- i just wonder why does the interparagraph space expand so much when the 'block' thing is used...

interparagraph space
Since a newline in Bugguide turns into a <br />, that automatically puts the span tag into a new line. Display=block makes it so the element will automatically break. Therefore there are 2 breaks happening, which explains the interparagraph space. The way to fix this would be to get rid of newlines in between each span tag, for example:
do this:

instead of this:


Hope that made sense.

thank you so much again
i'll try to edit the code following your advice

Images and text
Can you show us how to put text side by side with a picture? I know that there is a way. In fact I found an example in one of the early Information pages but I can't remember where it is any more. I can't remember if it combined BB code and HTML code or not.
It would be very useful in cases like this. There is a lot of wasted space that I would like to eliminate.
Thanks for all the tips.

better use of the screen space is very important
knowing all the available ways to pack it more efficiently with info and eliminate wasted background will help a lot; i second the request and thank roar again in advance.

I'd love to know how you did those captions without the brown decorations... is it just a matter of removing the "background-color:#e6dbae;" from the code?

as a reply to both
To remove the decorations simply take out the background-color and the border.

To make the left-aligned images you
a) cannot use [thumb], you must use the [img] or <img> tag.
b) need to add the attribute align="left" to the <img> tag. Example:
<img src="" align="left" />
This would result in:

Yes, but...
It helps, yes. But: how do you post clickable thumbnails like the ones Christopher used here?
And I agree that Bugguide has been agonizingly slow today. At times it just gave an error message.

simply wrap the <img> tag in the <a> tag.
<a href=""><img src="" align="left" /></a>

Unfortunately there's no simple way to do it, you must manually find the image URL.

It works! Thanks!
I did it for the Carnivorous caterpillars that I mentioned in my query. Now there is no wasted space next to the first image.
One thing to remember is that the appearance changes when you enlarge or reduce the text.

posted by accident again
bugguide was being slow, i was unsure if it had posted or not

posted by accident

Are you thinking of

is there any possibility to:
  • make text arranged in columns? (e.g., here)
  • arrange thumbnails with a caption underneath each in a matrix format like here? would help to use the screen space more efficiently and make more content available at a glance -- especially important for side-by-side image comparison. (sorry about being so ignorant, and many thanks in advance for the answer; feel free to e-mail me directly, if this is off-topic. =v=)

    not off topic
    I put in captions, but it is a bit tedious making them and there is a lot of code.

    As for the multi-column layout I will have to look into that. Normally I would say use an HTML table but BugGuide doesn't allow those tags, so I'll have to do something with <span>.

    i immensely appreciate your help
    just noticed the new section you added -- will practice toying with that

    first results...
    you are most helpful, roar. i'm sure scores of people will arrange info page content this way. the pages will benefit a lot -- from more efficient use of the screen space and increased educational value.

    page looks good
    The decorations on the captions look good for only a few specimens I think, but in the format of many rows and columns it definitely looks better without them.

    i'm still coping with non-monochrome interfaces, man...
    back in the early 90s, MSOffice used to have this "black-n-white toolbar buttons" option; i can't tell you how much i miss it.

    a small addition
    you say about cites that "These can only be used on BugGuide books."
    however, as it turns out, any items posted under the 'Links' tab -- you can use the cite:# format the same way, just pick the actual number from the url, just like you do to include thumbs. Example:(1) -- you see?
    works the same way with anything: pix, forum threads, glossary entries... e.g. (2)(3)(4)

    and many thanks for this helpful manual, Roar.

    Didn't know that!!!
    If I did, I would have included it. Thanks for telling me!

    I rarely use [img] because I have personal concerns that if the image is from a site other than BugGuide it may be considered hot-linking, and that there may be copyright issues if we don't obtain permission and/or give proper photo-credit or some other type of citation. Is this possibly a real concern? I almost never use [img] in responses and never on a guide page, and instead use [url] to point to the image and allow views to "click to see".

    I rarely use it either.
    It is just a form of HTML/BBCode that people might want to know. I stated that it should always be given credit.

    A couple of tweaks
    On the whole, very good. It covers a lot of useful stuff in an easily-understandable way.

    First tweak: in you section on images, you should add the ability to make images from other sites clickable. You do this by putting the code for the link around it. Just replace the text in your link with the block code for the image. For instance:

    It also works with the html version, in case you want to use the target="_blank" trick.

    Second tweak: most people use the wrong terminology for the forums. A forum is the major section like "Articles" or "General Discussion". What many people call "forums" are actually forum topics, though there's nothing wrong with referring to them as "posts" or (in the case of this forum) "articles".

    An idiosyncracy of the BugGuide Search is that the forum topics themselves aren't included in any search, but the comments posted to them are (unless comments in general are excluded). That's because they don't belong to any of the types of pages that existed when the search was created, and it hasn't been worth the extra work of expanding it to include them.

    Thanks for the help!
    I added the BBCode version, but the HTML version did not seem to work. Here is what I typed:
    <a href=""><img src="" /></a>

    Let's try it

    It seems to work fine for me (I added target="_blank", but otherwise it's just copy and paste from your comment).

    It might be good to add the height and width attributes for the html img tag to your explanation. They're useful for making larger images fit on the page.

    Just remember that they don't help with the time it takes to load big images: to show the page, the browser loads the full-size image file, then changes its apparent size when it puts everything together on the page.

    To reduce this 161 x 48 pixel image to half I added the attributes as follows:
    <a href="" target="_blank"><img src="" width="80" height="24"/></a>

    HTML done
    I must have made a careless error somewhere.

    1 2
    next page
    last page
    Comment viewing options
    Select your preferred way to display the comments and click 'Save settings' to activate your changes.