Intrapage Anchors

If you want to link to another location on the same web page, it is typically done with an anchor-link pair.

<a name="pageTop"></a>

Further down on the page there would be:

<p>Return to <a href="#pageTop">top of page.</a></p>

Obscure Trick

The # symbol in the href attribute tells the link to jump to a location on the same page. It works with more than just an anchor tag like <a name="pageTop></a>. You can link to any id or name attribute. To see this in action, take a look at the definition example.

Target and Rel Attributes

The target attribute is used to tell the browser how to open a link (and to give information about the link when using old-school frames.) Practically speaking, if you wanted to open a page, typically those outside of your website, you’d write something like:

<a href="http://othersite.com" target="_blank">

Many designers consider it rude to force pages to open in a new window—that decision is best left to the user. A better approach is to mark that link as an external page via the rel attribute. For example:

<a href="http://othersite.com" rel="external">

If your client insists (the customer is always right!) on external pages opening in a new window, then use the following technique.

Unobtrusive JavaScript to Open Links in New Window

Start by creating a link that will work even without JavaScript, such as:

<a href="../index.html" rel="external">Home Page</a>

Then, to change the standard action, you can modify the behavior as:

var links = document.getElementByTagName('a'),

  rel,

  i = links.length;

while (i--) {

  rel = links[i].getAttribute('rel');

  if (rel && rel.match(/\bexternal\b/)) {

    links[i].onclick = function() {

      openInWindow(this.href);

      return false;

    };

  }

}

This will scan for all <a> tags that have the rel attribute set to external, and then override the standard hyperlink action to passing the href to function openInWindow. (Note: you will need to write your own “openInWindow” function.)

A jQuery version of the above

Open Table of Contents with initial width set to 800px.

$('a[rel="external"]').on('click',function(e) {
	e.preventDefault();
	window.open($(this).attr('href'),'external','scrollbars=yes,resizable=yes,width=800');
});

Hiding Your eMail Address and Phone Number

The technique that is the most secure, is also the worst for your users, which is making an image of the email address or phone number. The following technique should defeat some spam bots (at least until they get smart enough to convert the following codes).

Option 1: Use character entities

Ohlone College has a nice online tool to convert plain text into encoded text. The great thing about this technique is you can style your text like normal, there is no degration in the quality of the text, and your users can still click to use it, right-click it, or copy-and-paste the text. It will take, for example, <a href="bob@hisDomain.com"> and convert it to <a href="mailto:&#098;&#111;&#098;&#064;&#104;&#105;&#115;&#100;&#111;&#109;&#097;&#105;&#110;&#046;&#099;&#111;&#109;">

This is a converted link —>. For more information, send an email to bob@hisdomain.com

Use this same technique for telephone links. For example, <a href="tel:651-555-1234"> becomes <a href="tel:&#054;&#053;&#049;&#045;&#053;&#053;&#053;&#045;&#049;&#050;&#051;&#052;">

This is a converted link —> For more information, call Bob at 651-555-1234.

Option 2: Use obfusicated JavaScript

This would be very secure, but you your users must have JavaScript enabled (generally not an issue).

function launchMail(domain, ext, usr) {
	if (ext == "c") ext = "com"; 
 	if (ext == "i") ext = "info";
	if (ext == "n") ext = "net";
 	if (ext == "e") ext = "edu";
	if (ext == "o") ext = "org";
 	window.location=("mai"+"lto:"+usr+"&#064"+domain+"."+ext);
}