Ted's Computer World HTML & CSS
Tips and Tricks

FUN WITH TAGS

Did you know that you can invent any HTML tag you want, and the modern browsers will accept it?  You don't believe it?  Look at the paragraph below, created using seven homemade tags:

Roses are red,
Violets are purple;
Creating your own tags
Will not cause your browser to burple.

Still unconvinced?  View the source code for this very page and see for yourself:

*

Unfortunately, such renegade constructs are non-compliant, and there is no guarantee that they would work in the future anyway; so we won't add them to our bag of tricks.  The mind boggles at the possibilities, though...

Having been denied an adequate complement of user-optional tags, we must make the most efficient use of the tools provided; and fortunately, those of us who are not locked into the restrictions of the so-called 'assistive technology' are free to be creative.  Let's do that.

The best tags are the shortest tags, because they are the the easiest to type!  What a concept.  To that end, let us look first at three of the shortest tags of all:

<u>

The <u> tag was deprecated in HTML 4.01; so it won't pass muster on antiquated validators.  That tag was restored in HTML5, however, for its 'semantic value'.  We will use it to underline text.  The alternative is to use something like this: <span style="text-decoration: underline">text</span>.  This could be shortened by creating a class for the purpose: .u {text-decoration: underline}.  Then, one could write <span class="u">text</span>.  I actually used to do just that back in the days of HTML 4.01 in order to satisfy the code validator; but now, we'll simply write <u>text</u> every time, and keep our lives simple.

<i>

Similarly, usage of the <i> tag means that we wish to italicize some text; and our reason for doing so is irrelevant.

<b>

This tag never has been deprecated; but it remains controversial.  Its counterpart, the <strong> tag, also is frowned-upon in some circles; yet the lengthy alternative, <span style="font-weight: bold">text</span> is repulsive to me, and <span class="b">text</span> (after creating that class) isn't all that much better.

Moreover, the font-weight property itself seemingly was designed to provide multiple levels of boldness; yet it does not.  Assigning a font-weight of other than [600 = bold] does nothing at least, not on a computer screen, and nesting the tags accomplishes nothing either.  (More about boldface later.)

The three tags <b>, <i>, and <u> retain the same functions they always had — making text bold, italic, or underlined.  Use them as such.  And do you prefer to wade through that other stuff when viewing or editing your code?  I don't think so; but that's what the CSS pundits would have you do.

<var>

This is the only HTML tag designated as "user's choice"; and it is invaluable.  Anytime one repeats a style of text on a page multiple times, lots of effort can be saved by utilizing such a variable.  On this page itself, <var> has been used many times to display tag samples in red type, for the same reason that we use the other short tags — it is so easy to type.  Instead of coding, <span style="color:#900">tagname</span> multiple times (ugh), the requisite snippet of CSS has been put in place:

*

Now, entering <var>tagname</var> becomes routine and is so much more readable to boot.

On this page there are multiple instances of code samples highlighted in blue as well; yet the system all-purpose tag already is in use.  Ideally, another tag would be used, but which one?

The HTML gurus gave us a lot of useful tools, possibly without anticipating that they might be used for things unrelated to their originally perceived functions.  This does not make such usage wrong in itself, however.  If you were to beat a would-be robber about the head and shoulders with a baseball bat, that represents judicious employment of a tool for something other than its intended function.  The same can apply to tags.

<em>

This tag is a good alternative when <var> already has been assigned a task.  Its HTML5 default function is to print text in italics; but we already have a tag for that.  This one can be used for something else.  It supports the Global Attributes, as most tags do; and one can apply styles at will.

The major difference between this tag and those previously discussed is that an alteration might have to be made to its properties.  If italics aren't a desired part of the mix, the tag's default property, <font-style: italic>, must be stripped by specifying <font-style: normal>  After that adjustment, it can be used for virtually any purpose.

<q>

All that this tag was designed to do is to provide quotation marks around some text; but we can do that ourselves just by — you guessed it — typing quotation marks around some text.  Although it has been around for a long time, this tag has been used sparingly because not all browsers rendered it properly.  In particular, Internet Explorer tended to refuse to add the quotation marks as directed.

That is not a problem for us, however, because we're going to suppress the quotes anyway.  As with the <em> tag, this one can be used for any purpose after stripping its default properties in CSS thusly:

*


The powers that be never intended for us to function as actual programmers; that is why we need to commandeer otherwise nonessential tags to suit our needs.  Many of them cannot be so easily manipulated, though, in that certain properties cannot be overridden.  For example, <h1> is a block element, and that property cannot be changed.  Most tags are more malleable.  Any of the tags in the <dl>,<dt>,<dd> series could easily be adapted to any desired function.  Some other borrowable tags are <kbd>, <del>, <samp>, <ins>, <dfn>, <abbr>.  Those last two, having no default attributes, can be used as-is.

There is one other tag, however, that is so utterly useful that I employ it more than any other, except possibly <p>.  Start really improving your life on the next page.

Go Back