Using RagTag

Code Basics

RagTag assumes you know some HTML, but even with just a little knowledge, you can make it work for you. Ragtag does two major things: It counts your tags to see if you have an equal number of opening tags and closing tags, and it checks whether they open and close in order.

Most HTML tags come as pairs. Only a few are lonesome individualists without a closing tag, and they insert an object into a page rather than modifying an existing element. Some of the single tags that you might commonly use are:

<br>            line break
<hr>            horizontal rule or line
<img ...>       image
<input ...>     field to collect user data

As a side note, these singles are sometimes coded with a space and trailing slash to indicate they have no closer. So you may sometimes see valid code that looks like this: <hr />

There are also some optional tags that are allowed to remain open and single, but that should be paired up with closing tags in the newest versions of HTML. These tags originally inserted an object (for instance, full carriage return); now they are used to style the text that they enclose, so they should be used as pairs:

<p>       paragraph 
<li>      list item (usually a bullet list)

All the rest of the tags that beginners commonly use should be pairs of tags with an opening tag and a closing tag. You will notice that all tags that modify text appearance must be used as pairs, as they are essentially wrappers. These tags need to be nested so that the closing tags appear in the opposite order as the opening tags. This code illustrates properly nested pairs of code - the closing codes are a mirror image of the opening codes

<font><b><i>text</i></b></font>

This is an example of improper coding, since the tag pairs are interleaved and the closing tags are not in the opposite order of the opening tags.

<font><b><i>text</font></b></i> ---wrong

Also be aware that you can nest multiple font tags, and each closing font tag will only turn off the formatting that was changed by it's matching counterpart in the opening tag. And did you know that you can have a space before the closing bracket? I often code with the extra space ( or <td >) to make it easier to get my curser in there to add more attributes.

Scan Code

RagTag will look at your tags and at the order of your tags. When you scan your code, first examine the report at the very bottom. It will list all the tags you have used, and will place an x beside the pairs that don't have a matching count. There will be a ? beside the tags that don't match, but are in the list of optional closing tags (p, li, etc). And finally, there will be a summary of the number of tags out of order.

If you have used a lot of lonesome tags, they can be ignored for now so that you can concentrate on real issues. To ignore those tags, select "Ignore these Tags..." from the "Scan Options" menu and checkmark the ones you are using. Then run the scan again. That should reduce the error count in the report.

eBay users may also wish to turn on the "Use Auction filters" option in the "Scan Options" menu. That will flag tags that may be inappropriate for use in eBay auctions.

Locate Errors

Now down to business. The bottom window will display your code in an outline form with all the tags indented and aligned. The vertical lines are used to match up the opening tags with their closing tags. If your code has matching pairs of tags in the proper order, all the vertical lines will join those matching pairs and the code will start at the left edge, fan out to the right, and then end at the left edge.

When there are missing tags, all the errors will clump at the bottom, but that does not necessarily mean that there are errors in the code at the bottom. It just means that those codes at the bottom do not line up with their mates at the top.

The errors (or tags that are out of order), will be marked with **** in the bottom window. Each error will be accompanied by a location [2038] where you can find the error in the top window. Click your cursor in the top window and its location will display above the code window. Use that display to find your place in the upper window and to find the location of the problem codes.

Fix Errors

The most efficient way to fix errors is to first make sure that your HTML codes in the report are intact, and then fix the most deeply nested errors first. Make all of your corrections to your source code in the upper window.

Examine the report first. Sometimes there are simple spelling errors in the tags, and more often there are missing closing brackets > causing two tags to run together in the report (<img). Find and fix those first and then rerun the scan.

Then look for the errors that are indented farthest right in the scan. Fix those codes, starting with the most deeply nested far right codes, and working from the top down. Rerun the scan after each correction because sometimes one correction will cause the other tags to line up correctly and thus cure a lot of reported errors.

How do you know what to fix? If you follow the vertical line up from the flagged tag, you will see the code up there that is supposed to have a matching closing tag below, instead of the tag that was flagged. Add the closing tag or swap the closing tags if they were merely out of order. Some tags may be marked as out of "table" order, so even though the pairs may line up, if they do not follow the table-tr-td and /td-/tr-/table sequence, they will be flagged as table errors. In most such cases, there are codes missing from the table structure, so be sure to pay attention to table ordering and rearrange the codes or add the missing codes. Remember that your corrections are made in the upper source code window.

Export Scan

This is an optional feature to help users who have unformatted code. Unformatted code can be difficult to plow through when making corrections. After running a scan, the "export" button will open the scanned and annotated results in a text window, and the code will be indented (sometimes called "pretty code"). That pretty code can be pasted back into the upper RagTag window and you can use the annotated comments within the code to locate and correct errors (always starting from the most deeply indented). This method also helps users who have difficulty correlating the errors in the scan window with the source code in the upper window. Every scan will remove the error messages that no longer apply and a new export can be obtained and run back through RagTag for another round of cleanup.

HTML Editor

In addition to finding errors in codes, RagTag's text editing capability simplifies adding HTML codes when editing or creating a new document. The program has a set of shortcut keys that add HTML code wrappers around the highlighted text. To use a shortcut key, highlight the text to be tagged and then hold down the Ctrl-key while pressing another keyboard key (the actual shortcut). For instance, Ctrl+B wraps around the highlighted text and Ctrl+Enter appends a single line-break. All the shortcut keys can be previewed and changed in the Edit menu's "Shortcut Keys..." option. There are also numbered shortcuts associated with the top row of numbers on the keyboard. These can be used to add large chunks of code and text that you find yourself repeating a lot. For instance, Ctrl+1 contains complete table code.

Preview

At any time during editing, you can click the "Preview" button to see what your code will look like in a browser. Code that is viewed in a browser will not necessarily look the same in an eBay auction because eBay uses stylesheets to format their pages - but the general appearance should hold true.

Get RagTag here