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

Fall Fund Drive

New Markup Article

The article can be found here. Post comments here to tell me about errors.

It's a good article..
and would be useful to a lot of people. The content looks fine, but there are problems with the html code for the article.
The article will display fine in Internet Explorer but not in a W3C standards-compliant browser like Firefox, Opera, etc..
To see what I mean click here.
Those images are screen captures of parts of your article as they appear in my browser (Firefox). Note the red text in the first image, I think it's red because you didn't use a closing tag for any of your anchor links. In the second image, note the text that I underlined. It's like that because you didn't use a semi-colon and space after the code for that special character. At the bottom of the page is a link to a text file that explains it in more detail and shows how to correct it. If you want or need more help or explanation you can comment here or e-mail me (x_J_C_x at hotmail.com).
When I ran the article through the W3C Markup Validation Service, it says there are over 200 errors on the page (most of which is the same error(s) repeated multiple times). Just copy the address for your article and paste it into the "address" menu bar on that page and click "check", it will show you where the errors are.

 
red parts
I kind of already stated this, but the red is because of the a:hover selector in CSS. Any text that is in between the <a name="link"> and the closer </a> will be red. Also note the red ended when an <a> tag was closed.

 
I'll have to change the HTML codes...
from <A NAME> to <*A NAME> and say "without the *"

Also, about the anchors. How do you close off an anchor? What I do is what it says on the article. Please tell me if I am doing something wrong.

 
The problem is not...
what you are presenting in the article, it's in the source code for the web page.

Your code:

<A NAME=link> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <br />
<span style="font-size:17px">< b>LINKS:</b> </span><br />

Should look like this:

<a name="link">~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<br />
<span style="font-size:17px"><b>LINKS:</b></span><br /></a>

Note that A Name is now in lowercase letters and link is in quotation marks.
Also note that there is now a </a> tag after the last <b /> tag. Anchors are the same thing as an <a href> type of link, you still have to use that </a> tag at the end of what you are linking to.

If your anchor is referring to a link or a section of text that ends with a link then you need two closing tags, one for the link and one for the anchor.

Examples:

<a name="link"><a href="http://www.w3schools.com/tags/default.asp">HTML tags</a></a>

or

<a name="link">Bunch of text here<a href="http://www.w3schools.com/tags/default.asp">HTML tags</a></a>


You could still use those special characters, you just have to remember that they always end with a semi-colon. You are leaving out the semi-colon.

ampersand<a name> - There should be a semi-colon between the t and the a. ( replace the word ampersand with & )

 
Just making sure...
You say I don't need to do this:
<*a>
I can do what it was as
<a>

I edited all the <a name="link here"> as well.

 
You still forgot...
the semi-colon.

&lt;   ends with a semi-colon

&gt;   ends with a semi-colon

&#91;   ends with a semi-colon

&#167;   ends with a semi-colon

Notice they all end with a semi-colon, the semi-colon is part of the code for all special characters,
without the semi-colon my browser shows:

&lta name   instead of   <a name

&#91img   instead of   [img

a name&gt   instead of   a name>

So as long as you put the semi-colon at the end of the special character code you can use them and everyone will see them as you intended.

 
Ack....did I mention
I hate Internet Explorer.
Had to edit the comment so you would see it as I saw it in Firefox.
I wish Microsoft would get on board with the W3C HTML standards, it sure would make coding web pages easier.

 
It really does mess up HTML.
I wish all browsers would support the text-decoration:blink; attribute in CSS. It is really noticeable.
If you see this whole comment blinking, it is supported in your browser.

 
All done!
Just another question: How did you type those codes so they do not turn into the symbol? Is there another code for that?
When I type these it just turns into:
> < § [

 
It's easy...
just use the code for an ampersand (&amp;) instead of the & in the code for whatever symbol code you want to show.
Example:
to show the code for    >   you would type &amp;gt;

to show the code for   <    you would type &amp;lt;

Tip: You can right click in an empty white area of this page and in the menu that pops up choose "view page source" and then in the browser window that pops up scroll about halfway down and you'll see the code used to display our comments back and forth. You can see how I just did those special character codes that way. Viewing the source code for your mark-up article was how I knew where you had made mistakes in the code.

BTW: The article looks good now. Great job!!
Only other thing I would change is the position of the lines of ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ I would place these before your anchor tag instead of behind it where they are now, so they wouldn't change color when they or the link below them is mouseovered. But that's just me. :-)

 
I'm going to make an <hr /> replicate soon
by typing this:
<span style="width:100%;display:block;border:1px inset;"></span>


Hopefully this looks much better than a bunch of ~~

 
Thanks again...
You have helped me so much with all this code!!
You don't really need to type the ; at the end of the codes you told me how to do in the last comment. This is what it looks like:
&lt;_____&#91;
Take it off and it looks "real"...
&lt______&#91
(I put the underscore there so the codes don't look mashed together.)

 
There is a solution I just found:
Do this
<a name="anchor"></a>Text Here

You don't have to have text in between, it still works. This way it does not turn reddish when you hover over it.

 
It'll work for your article..
..

 
An easier way to do the tag.
You said you can do this:
<a name="link"><a href="http://croar.net/">HTML tags</a></a>
That works, but wouldn't it be easier to combine the tags?
<a name="link" href="http://croar.net/">HTML tags</a>
This way you only have 1 <a> tag going on. Just a thought

Also, what do you mean by "for your article". Is this HTML incorrect? If it is, please tell me because I would like to do it correctly.

 
Yes you can do either but..
while you could do this "<a name="link"><a href="http://croar.net/">HTML tags</a></a>" and it displays and works correctly, it is invalid HTML.

This "<a name="link" href="http://croar.net/" rel="nofollow">HTML tags</a>" is valid HTML.

I assumed (from your comment) you were going to use it in your article, hence the "for your article" comment.

 
what does the
rel="nofollow" do??

 
rel="nofollow"
Basically it tells a web crawler not to follow the link you use it in.
More info here and here

I did a copy and paste from something I was doing and swapped your addy into the code. Since I'm a two finger typer, I C&P when I can to save time typing.

 
rel="nofollow"
BugGuide's software adds rel="nofollow" to all links in comments. It was implemented to discourage spam. If I'm copying a link into a BugGuide comment, I remove rel="nofollow", because another one is always added, and the multiple instances begin to stack up.

 
I noticed that.
If you edit an automatic "moved from whatever" comment, sometimes it adds 5 or so rel="nofollow" attributes.

 
when you type a link,
and when you edit it, it does not add the rel="nofollow"

 
I c&p a lot as well.
Whenever I update my website here I copy&paste. Rarely do I ever type long strands of code.

 
forget it
i get it now. took me a while.

This seems like a worthy project...
...thanks for investing the time! I guess I might add "font color" to the list.

Also, I just wanted to add a cautionary note, which perhaps can be included in some way within your article. Including images from outside websites often seems to be done on this site without any credit being given to the original website and/or photographer. I think this practice should be discouraged. I doubt any of us would like to see our images used in that fashion elsewhere on the Web. If an outside graphic is to be used here on BugGuide, I think that at a bare minimum, all efforts should be made to also include the URL of the original website where it was found, as well as the name of the photographer (if possible). Personally, I think that simply using a URL-link to the image is a more respectful way to go (unless one has received permission from the photographer) but I accept that not everyone will agree with me on that point.

 
Good idea
I will mention something about giving the photographer credit. Good idea with the font color. I totally forgot about that. I know how to do that already.

I know this has already been mentioned, but how do you type out a link without using spaces and still not activate it?

 
notes on font color
This is a terrific article, I've actually referred some of my publishing company coworkers to it for basic HTML training - and a few of them have investigated other parts of BG and thanked me for the introduction :-)

A couple things about font color you might want to mention: blue text tends to look like a hyperlink - it's been the default hyperlink color since the earliest Web pages - so using it for another purpose can be a bit confusing. I see blue and think I should click on it :-)

Also, be careful with red and green, because red-green colorblindness is not uncommon and some people can't tell the difference between the colors at all. I'm very slightly colorblind and the typical BG family page taxonomy list, which must have come from a template with red and green headings, always bothers me a bit. I can still read it, but the extra work my eyes do to differentiate the colors gives me a headache!

 
now with css
you can make a link a different color, but BugGuide does not allow this.
I wish it did, or you could do it somehow with inline styles. For more HTML see my website http://croar.net/html/
This page covers HTML that BugGuide does not allow.

 
I found it!! Here's the links
here and here

[url=http://bugguide.net/node/view/258535#403776]Just A Test[/url]
<A NAME=Just Another Test>

 
Fantastic!
I already spoke my praises in the "comments" on the article itself. Really, really helpful stuff:-)

Comment viewing options
Select your preferred way to display the comments and click 'Save settings' to activate your changes.