HTML For Dummies How to Make a Footnote, Superscript and Hard Spaces

Creating superscripts in HTML is easy with a simple combination of the SUP tag and a few basic codes. If you missed the article on HTML tag basics, read up on them now: Part One of HTML for Dummies, W3Schools Getting Started.

The SUP tag
The SUP tag tells your browser to put the enclosed characters in superscript. It very easy to apply. Simply put the tag around the text you want in superscript. Here are a few examples.

• Basic footnote:  …end of my sentence.¹ = …end of my sentence.¹
• Dagger note:      …more thoughts.^† = …more thoughts.^†
• Double Dagger note:  …running out.^‡ = …running out.^‡

Let’s stop for a moment and look at the basic construction. You open the superscript tag with ^{and close it with the corresponding}. This is no different than any other HTML tag. Anything between the two will render in superscript. It doesn’t have to be just a simple number. You can put other HTML codes in superscript just as easily. This is handy when you need to label something with a trademark or copyright symbol. As with the daggers above, HTML provides an easy way to type the escape code for common special characters.

• Trademark:   BrandName^TM = BrandName^TM
• Copyright:    Protected Work^© = Protected Work^©
• Registered:   I am registered^® = I am registered^®

Spaces
The space is something we seldom think about, but HTML has a different way of looking at spaces. I’ve seen long forum discussion over the need for two spaces at the end of a sentence. Some line up on the side of “It’s not proper,” and bemoan others for not using two spaces. What these people don’t realize is, in the world of HTML two spaces equal one space. In fact, any number of contiguous spaces equals one space. This includes the TAB and even the RETURN character.

A browser will collapses multiple white-space characters to a single space when the document is rendered for display. There are two ways around this and both are tricky and troublesome. You will not want to try this just to force two spaces at the end of each sentence. It would be laborious and unreadable in its native state.

Forcing a space
HTML has a special escape character that tells the browser, “This is a space and don’t you forget it.” It’s called the non-breaking space character and the code for it is  . With the non-breaking space you can force any number of hard spaces into your document. For example, “I want 5 spaces between the dashes –       – of this sentence,” yields “I want 5 spaces between the dashes –       – of this sentence.” If I had just pressed my space bar five times, the sentence would look like, “I want 5 spaces between the dashes – – of this sentence.” I really did press the space bar five times, but your browser ignored my feeble attempts and collapsed the five spaces to one.

The non-breaking space is fine for what it’s worth, but you’ll have a difficult time making things line up properly if that is your intent. That’s because fonts come in two flavors: fixed width and variable width. Most browsers default to a variable-width font like Times Roman. This means the number of spaces between letters can vary depending on the surrounding letters’ widths. Fixed-width fonts line up nicely because all the letters take up the same number of pixels. So how can you override the browser’s default?

The PRE tag
PRE is a HTML tag that tells the browser that the enclosed it “pre-formatted” text. Your browser then usually chooses a fixed-width font like Courier to display the enclosed. A word of caution is in order. The PRE tag is still subject to the web site’s style sheet (CSS) and it may display in a way that makes you sad…in your pants. For example:

This block is enclosed in a PRE tag.  WordPress' CSS has rendered it in tee-tiny Courier letters
that are almost impossible to read.  I didn't do this.  The CSS did.  However, I can control
the line returns.  I pressed "Enter" at the end of "letters" and "control" to make the text wrap.

Since I would have to spend about an hour rewriting my own style sheet to replace WordPress’, you’ll just have to use your zoom feature to read the PRE text above. Not all sites will render PRE tags like the above example. You’ll just have to experiment with the site to see how they do it. The PRE tag is good if you want to display something like code snippets or other text where the exact formatting of spaces and returns is important. It’s handy for technical writing, but not something the average writer really wants to use.

---

More on linking footnotes to their citation points.