Bookmarks (also known as Anchors) are a normal part of any web content.  As well as linking to an external document section, they can be used to navigate within sections of the current document.  We have a feature in EditLive! to generate these links easily, but the feature is so well integrated into our UI that I recently discovered even some of the Ephox employees don't know about it.

When creating bookmarks, most people follow a five step process:

1. Find the text to bookmark
2. Insert a bookmark at that location
3. Find the place that will link to the bookmark
4. Open the Hyperlink dialog
5. Find the bookmark that has just been created and link to it

When building EditLive! we realized that the majority of these links will be to document headings, so we shortened it to a two step process:

1. Open the Hyperlink dialog
2. Find the heading you want to link to, and link to it

Any time you open the Hyperlink dialog, we find all heading tags in the document (H1 to H6) and list them under "Places in Document".  For example, the following HTML:

<h1>First Heading</h1>
<h2>Sub Heading</h2>

Looks like this in the Dialog:

Notice that spaces are removed from the bookmark address.  You don't have to worry about the dialog generating bookmarks you'll never use - they are only created when you actually link to them.  They're also inserted around the entire heading text so that it renders the heading with a blue underline and ensures the bookmark is not empty (which has caused problems on some integrations).

Combine this with easy linking to clipboard URLs and you have some cool tricks to improve your productivity.

This entry is filed under EditLive!, Hints & Tips, User Experience. You can follow any responses to this entry through the Atom feed. You can leave a response, or trackback from your own site.