Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, Apple iPhone, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

What are the coolest forgotten HTML and CSS tags?

A funny email message arrived: " The other day, I was working on a site when I stumbled across a forgotten corner of HTML. The <dl> tag is a "definition list"; it uses alternating <dt> ("definition term") and <dd> ("definition definition", it seems) child elements. This sort of markup fits pretty well for, say, dates and news items, so I've used it for that.

"My question for you is, what are your favorite obscure tags? I'm not talking about <img> or <br> -- I'm talking about the ones everybody's forgotten about, like the <dl> tag. Other bits of obscurity (like weird CSS selectors) are welcome too, of course. :^)"

Dave's Answer:

What a wonderful question! Of course, since I write about HTML and teach intro HTML classes, I am likely much more familiar with the definition list <dl> than most people at the close of 2004, but let me see if I can list some of my favorite obscure tags anyway...

Here's my secret: rather than obscure tags, I'm actually much more fond of character entities. For example, I build my own bullet lists by using the • character entity, and then I can tightly control exact positioning by using my other favorite character entity,  , a non-breaking space. One example of this is the newly revamped APparenting.com site: all the little bullet lists on the right are created with tables and • sequences. And before you CSS purists complain, I want to point out that by using the • entity, I can wrap it in a font-size and thereby shrink it down or enlarge it to be exactly what I want. There's a lot of control you gain from CSS unordered list attributes, but changing the size of the bullet isn't one of them.

In addition, I'm addicted to the style attribute since it easily lets me tweak individual HTML elements to be "just so". A very common one: I use the <pre> tag for code listings on this weblog and if you look at the earlier entries, you'll find that they're all of the form <pre style="font-size:110%"> because without that tweak, monospace type on a typical Web page ends up noticeably smaller (read "less legible") than proportional type. Somewhere along the way I finally just defined a class called code, so more modern entries use <pre class="code"> instead. Much nicer!

I also still sometimes pull an <hr> tag out of my pocket for a quick horizontal line. In particular, I like being able to turn off shading, so a nice sequence is (using XHTML): <hr noshade="noshade" size="1" />.

One CSS attribute that I wish existed was font-color or text-color. It doesn't: you just use color instead, but if it did exist, it'd sure save me a bunch of recurring typos in my style sheets! And since I'm complaining about CSS implementation, I have to say that I've never seen a particularly fantastic typeface result from font-family: fantasy. But then again, how many people have fantasies about font families anyway? :-)

Finally, I like the CSS text-transform: uppercase within header tags as a nice way to change the appearance of headers on your page, and float:left or float:right lets you perform amazing tricks on containers that would otherwise be trapped in your layout.

How about everyone else? What's your favorite obscure or unsung HTML tag or CSS attribute?

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon

Categorized: HTML and CSS (Article 3779)
Tagged:
Previous: How do I add photos to my eBay auctions?
Next: How can I use Google and other Web tools to identify and research competitors?

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

...and as to the usage - if you want all pre to be 110% of standard size define it that way in the CSS then all your blocks will be 110% with 1 line of code, loaded once by the browser. You save typing & we save bandwith.

Posted by: Nigel at December 13, 2004 10:38 AM

Right, if I want *all* of them to be the same. But what if I want more flexibility? I can have a "noncode" class that I could apply to PRE blocks that I don't want to have 110%, but isn't it then six of one, half dozen of the other? Also, the bandwidth savings has got to be completely trivial, less than 30 bytes on even the largest of pages. :-)

Posted by: Dave Taylor at December 13, 2004 2:35 PM

◊ I like to sprinkle in the LOZ tag in key places, a little different than a bull.

Posted by: c b at December 13, 2004 10:30 PM

Isn't <dd> "definition data" rather than "definition definition"?

I've recently found the obscure <fieldset> tag useful when organising forms, along with other obscure form tags <legend> and <label>.

Posted by: Chris Limb at December 14, 2004 9:35 AM

It's entirely possible that is "definition data", but since I always think of the DL list as a definition list, I think of it having a term and definition. Either way, at least the acronym works!

Also, regarding the "loz" tag, aka &loz;, I really like that it stands for "lozenge". Seems like something you'd have from an Ear, Nose and Throat specialist, not a Web designer!

Posted by: Dave Taylor at December 14, 2004 3:13 PM

The and tags are at the top of my list. The , though it allows graceful degradation options on pages that utilize JavaScript, is rarely employed. From a meta tag for page redirection to a simple text message, the tag can enclose markup that will improve the browsing experience of those that have their JavaScript interpreter disabled.

The tag, while once unique to Internet Explorer, is widely supported by current browsers. It allows virtually any HTML content, divs, imgs, etc. to be scrolled across the page. Nevertheless, one still sees this task being accomplished with cumbersome Java applets or JavaScript functions.

Posted by: James Bradley at December 18, 2004 4:27 AM

Actually the <dd> and <dl> tags are not that obscure. I used them all the time...

My favorite obscure tag must probably be the <acronym> tag. That one and the forgotten <address> tag.

Btw - why do you use <pre> for code segments? You can use the obscure, yet functional <code> tag!

I hope these are obscure enough :)

Posted by: Luke at September 7, 2005 6:47 PM

It's been so long since I used them, I've even forgotten what they are called ... but there was (perhaps still is) a way to order the sequence that the tab key would move between hrefs on a page.

ISTR that they are an accessibility tag for screen readers that basically were used to keep menu links accessed in sequence. But I've been wrong before. ;-)

I am GLAD that 'blink' and 'marquee' are falling off the edge of the world. Yechhhh!

Posted by: BillinDetroit at April 7, 2007 1:17 AM

Thanks for the noshade help--your site was second from top in a Google search.

Posted by: AAB at May 18, 2007 12:42 PM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!