Monthly Archives: March 2006

Linking to Paragraphs in HTML

HTML provides the ability to link not just to other pages on the web — like so: Norman Walsh’s website — but also to paragraphs or elements within those pages — like so: the paragraph on the same page beginning with the words ‘Just about everything changed’.

On that same page you’ll notice that anytime you hover over a paragraph a pilcrow symbol (¶) appears at the end of that paragraph. That symbol is actually an HTML link to the paragraph. (It appears in Firefox 1.5; in IE 6.0 you’ll have to hover just beyond the last word of the paragraph to have the symbol appear.) Copy that link if you want to point directly to that paragraph from your own website.

Mr. Walsh uses (maybe devised?) a mixture of javascript and CSS to implement this feature. A javascript function finds all

elements and inserts a link at the end of each one. A set of CSS rules ensure that the pilcrow symbol is the same color as the page background until you hover over it, and then the color of the link changes to make it visible.

This link-inserting only occurs in paragraphs that have an id attribute —

. I haven’t figured out if these paragraph IDs are inserted by hand or automatically by JS or CSS. Cool effect though. And perhaps even useful.