The Semantic Web is Here! (for technical HOWTOs, at least)

I was reading through Mozilla.org’s Markup Reference and discovered some HTML elements that I honestly had never heard of before. Apparently, HTML 4 offers very detailed semantic elements for text typed into, and interpreted by, computers:

<code>

This one I knew, and use for all computer-related fixed-width text.

<kbd>

Use this for text a user should type at a keyboard.

<var>

Text that should be replaced by a user’s value, such as a filename.

<samp>

Sample output from the computer.

So remember: when following along with code samples, type <code> and <kbd> text literally, but put in your own stuff for <var>. To do anything else would be madness.

In other news, no, we don’t have multi-column support for text.

Read more in the spec’s phrase elements section.

IE Fun Fact: Inline images will trash your lineheight

In IE 6 and, in some cases, IE 7, inline images will cause the line that they’re on to disregard any custom line height:

This demo will describe a bug where the line-height is incorrectly rendered if the line contains a replaced element. Very simply, if the default line-height is changed to a larger value, the line spacing above and below any text line that contains a replaced element, such as a small emoticon, will be half of the spacing seen elsewhere in the text.
Jeroen Mulder, Line-height / Replaced Element Bug

Workaround
If your desired line height is larger than the normal, Bruno Fassino recommends using nearly-invisible spacer images to push the line height around the image back up to what you want.

Unfortunately, this solution does not work if you want the line height to be smaller than normal (see Fassino’s small images test). In those cases, your only recourse is to fake an inline image with a background on another element (such as a <span>) or take the image out of the flow somehow.

Use of a <span> with padding is unfortunately compromised in bi-directional text, as both IE and FF cannot handle padding correctly in those cases. (I hope to get to this topic in an upcoming Fun Fact.)