Marjolein's HTML Tag Editors: More of everything!

On this page:

Introduction
More tags
More attributes
More choices
More flexible
More consistent
More smarts
More help
More documentation
More user friendly
More maintainable
More fun

This page mainly uses the term "Tag Editors". I am actually releasing two packages: HTML Tag Editors for HomeSite 3.01 and ColdFusion 3.11 and HTML Tag Definitions for HomeSite 4.0 and ColdFusion studio 4.0.

The difference? The Tag Definitions not only define Tag Editors, they contain information used by Tag Insight and Tag Inspector as well. The "More of everything" is however most visible in the Tag Editors and applies to both packages. This table gives another view of how with my packages there is "More of everything", including for Tag Insight and Tag Inspector.

HomeSite 3.01 comes with 42 Tag Editors for HTML; HomeSite 4.0 comes with 44. This set has double that: there are 88 Tag Editors! Not just fancy stuff added either: there simply are a lot of holes in the set of Tag Editors that comes with these programs. In my collection, every tag that takes attributes in HTML 3.2 or HTML 4.0 which are also supported by the latest (release) versions of the major browsers now has its own Tag Editor. No more holes.

Even the browser-specific tags are covered: you'll find LAYER, MARQUEE and H7 here as well!

All attributes for a tag that occur in HTML 3.2 or HTML 4.0 are covered - and browser-specific attributes as well. Even events defined in HTML 4.0 can be entered!

The Tag Chooser clearly shows the difference between tags without attributes (shown in the form they will be entered into the document, like <NOEMBED></NOEMBED> in the screen shot below) and tags with a Tag Editor (shown with just the name). All tags are also clearly classified so already in the Tag Chooser you can make a conscious choice about using browser-specific or deprecated tags.

If different browsers have different value sets for an attribute, the Tag Editors will allow you to choose between those as well - all clearly labeled. (See the screen short in the More smarts section.)

You also have more control over how your tags are written: apart from the standard choice for linear or vertical layout, you can choose whether to quote all attribute values or leave off the quotes where it's really safe to do so; and you can choose between using double or single quotes for attribute values. (See screen shot in the next section.)

For container tags that have optional end tags you also get the choice of writing the end tags or not; the default is to write them though: it causes fewer problems with browsers, especially when you're also using Style Sheets.

If you're using a Tag Editor, you'll find that all attributes for that tag will always be written in the same order. I'm taking that a step further: for all tags all attributes will always be written in the same order. That way, your code becomes not only easier to read, it also becomes easier to maintain (extended Search and Replace can be more accurate).

All attributes that are required are clearly marked with an asterisk before the field in all my Tag Editors. But since there is no way to do error checking in the Tag Editors, they also make sure that all required attributes are always written to your code, even if you didn't enter a value: validation will then show what you missed. Default attribute values are indicated as well.

Sometimes browsers support extended sets of values for certain attributes. For such attributes, these Tag Editors always have separate fields for the standard set and for the browser-specific set, and will make a sensible choice in writing the tag based on your input. What's more, if you're editing a tag where you've used a browser-specific attribute value, that value will show up only in the browser-specific input field, not in the standard input field. That way, the Tag Editor will tell you what's what - even if you haven't written the code yourself.

In the code below, APPLET has the browser-specific attribute value "absmiddle" for ALIGN.

If you edit the code, the value will show up only in the field on the browser-specific tab; and it's also clear that this specific for Internet Explorer. (A standard value would show up in both fields.)
  

The Tag Editors also take relationships between attributes into account; attributes that are irrelevant based on your input of other attribute values are simply not written; this will also help with cleaning up code written by others. In the example below, TYPE and MEDIA attributes will not be written when a reverse link type has been selected.

Some of the examples above already give you an idea how these Tag Editors will help you with writing clean code that conforms to standards. The last screen shot just above also illustrates how extra notes on Tag Editors will help you making the right choices. Also, the descriptions in the Tag Chooser have been carefully edited to show complete syntax for a tag in a consistent way. See for instance the screen shot above!

These editors are much more than a simple means to write tags and edit tag attributes: All attributes are always clearly labeled and grouped by classification so they also teach about HTML. Tabs and group boxes classify by standard and purpose, asterisks tell you what's required, icons tell you what's specific for which browsers, notes give extra information where needed, new tags for HTML 4.0 are marked by a special logo:

While these Tag Editors themselves already teach you something about HTML, there's no substitute for a good on-line reference. This set of Tag Editors uses Brian Wilson's Index DOT Html as the embedded help reference, because it's quite simply the best HTML reference there is. For each tag and tag attribute meaning and purpose are described, as well as which standard it first appeared in, and which browsers support it: Internet Explorer, Netscape navigator, Mosaic and Opera are all treated. And there are some excellent general articles as well. Instructions for downloading and installing Index DOT Html so they integrate with these Tag Editors can be found on the HTML download page.

When you install the package, you will get a much better HTML reference than comes with HomeSite. Also, each Tag Editor links to the relevant page of Index DOT Html, giving you all that information at your fingertips while working with the Tag Editors.

These Tag Editors were created with a strict style guide. Not only is all labeling and classification strictly consistent throughout, so is the layout of the various tab pages: you'll always find the same things in the same relative places and the same tabs in the same order. The windows have been designed for easy readability; learnability and reducing memory load were further important criteria used for the design. You'll quickly find your way around and learn more about HTML without even trying to.

And if you plan to use these Tag Editors with HomeSite 4.0 or ColdFusion Studio 4.0 (see installation instructions) you'll also find they have full support for Large fonts, while maintaining the nicely aligned layout of fields. (Large fonts were not supported in HomeSite 3.01, but all attributes are present in the editors.) Please note however, that due to the size of some of the editors they will only be usable with a Large fonts setting if your screen resolution is 600x800 or higher.

Should you want to change these editors to your own liking, you'll find that also for the source code strict rules have been applied. Layout, order of attributes, and techniques used are consistent throughout. If you want to learn more about the (sometimes very advanced!) techniques used in these Tag Editors, check the VTML Tips and Techniques section.

You'll find that these Tag Editors are simply fun to work with. Not only because they're so carefully designed: I've even added a few images just for fun, and to make them more pleasing to work with. Still, even these images will help with recognizability. For instance, all Tag Editors for table-related tags have an image indicating which part of the table it's referring to.

The browser logos are based on the original program logos, which are copyright by their respective makers. The anchor image is from a freeware icon collection. All other images were created especially for this package by me.