HTML & CSS Tips and Tricks

FUN WITH TAGS

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

Still unconvinced?  View the source code for this very page and see for yourself; better yet, I'll save you the trouble.  Here is a portion of the <style> section, followed by the markup itself:

There are many web pages detailing a way to define a custom tag for your browser's enjoyment.  It involves registration, instantiation, and scripting; also, the tag must have a hyphen in its name so as to avoid a potential future conflict.  If you prefer to jump through those hoops, then more power to you.  Just reading about that stuff makes my brain hurt, though; and my own pages never will be sufficiently complicated to warrant such a study.

That being said, the ability to use tags as alternatives to classes and inline styles is highly desirable, and in fact every modern browser specifically supports them.  Any unrecognized tag is categorized as an HTMLUnknownElement and is processed accordingly.  Although such homemade constructs function perfectly, these technically invalid HTML designations won't pass muster with a code-validator, however; so in the interest of total compliance 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, there nevertheless is a solution for those who are not locked into the restrictions of the so-called 'assistive technology', and who therefore are free to be creative.

MAKING TAGS WORK FOR YOU

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>, which 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 immaterial.

<b>

This tag never has been deprecated, yet it remains controversial.  Its counterpart, the <strong> tag, also is frowned-upon in some circles; but 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 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>

If it isn't being utilized for one of its more exotic functions, this tag can easily be used for any purpose.  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 very page, <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; it would be nice to utilize a tag for such identification, 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 would represent 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 style.  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; so 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> somewhere.  After that adjustment, it can be used for 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 in any desired manner 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, if only to satisfy the code-validator.  Many of them cannot be so easily manipulated, though, in that certain properties cannot be overridden.  For example, <h1> is a block element, which property cannot be changed; and using <dd> out of its normal context would cause the code-validator to squawk.

Many tags are quite malleable, however, including some that are otherwise redundant.  For example, both <del> and <strike> are defined as 'strikeout' functions; yet one is enough.  Also, both <kbd> and <code> are expected to indicate a 'monospace font'; but we don't need two of those, either.

Besides <del> and <kbd>, some other easily borrowable tags are <dfn>, <ins>, <samp>, and even <mark> or <strong>.  The <abbr> tag, having no default properties, can be used as-is.

There is another 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.