Tag, you’re it! The Dreamweaver Tag Chooser

Web authors have a wide variety of HTML or XHTML tags to work with when creating Web pages. In addition to common tags like <p>, <ul> or <strong>, there are lesser-known, but still useful ones such as those below:

HTML/XHTML Element Use
<acronym> An acronym
<cite> A citation to a document such as a book or magazine
<code> A code sample
<dfn> A term that is being defined
<q> A short, inline quote
<sub>,<sup> A subscript and superscript

There are dozens of similarly useful and perfectly valid elements available for use. Some of them, such as <code>, have a default style in most browsers (<code> will render in a monospaced font). Others such as <acronym> have no default style. However, you can use the tags as hooks to add your own style by redefining the look of the element using CSS.

In addition to providing styling hooks, these tags also add greater semantic meaning to your Web pages. This will aid with search engine indexing, and it can allow you to create JavaScript applications that manipulate these elements programmatically.

However, using these tags in Dreamweaver is not as simple as clicking the bold or italic button in the Properties panel. You could add them manually to your markup in code view, but why do that? We use Dreamweaver so we don’t have to write code by hand, right?

An easy way to get access to these tags is Dreamweaver’s Tag Chooser.  To use the Tag Chooser, first click the appropriate icon on the Common tab of the Insert Toolbar as shown below:

Dreamweaver Insert Bar

You should then be able to browse a list of available HTML tags based on their type. If you click on an individual tag, you will see a brief description of its meaning and browser compatibility information.

Dreamweaver Tag Chooser

As you can see, you can also access tags for Web programming in languages such as Cold Fusion and ASP.NET.

To surround a particular bit of text or other page elements with a tag, simply select the text or elements you want to surround, choose your tag in the Tag Chooser, and then click insert.  You may then get an options menu allowing you to specify a class, ID, style or other attributes. Fill these fields out as necessary. The Tag Chooser window can stay open and be used repeatedly while editing your document. There’s no need to keep opening it.

Using this expanded vocabulary of elements will help you write better and more standards compliant code immediately.

Leave a Reply

Your email address will not be published. Required fields are marked *