Foundation HTML5 with CSS3

Linking the Web

Fragment identifiers can link to portions of the same page, as well. This technique works exceptionally well

if your page has a table of contents at the top with expanded content below. Listing 6-9 illustrates a sample

table of contents with some associated content.

Listing 6-9. A table of contents with links to fragment identifiers

<ul>

<li><a href="#products">About Our Products</a></li>

<li><a href="#faq">Frequently Asked Questions</a></li>

<li><a href="#villain-policy">Villain Policy</a></li>

</ul>

<div id="products">

...

</div>

<div id="faq">

...

</div>

<div id="villain-policy">

...

</div>

The rel attribute

The rel attribute of the anchor element consists of a space-separated list of tokens that describe the

relationship of the current document to the destination document defined by the anchor's href attribute.

As such, the rel attribute relies on the href attribute being a non-empty string. In HTML specification

parlance, a token is any string that does not contain space characters. For example, "home" or "home-

page" are acceptable tokens, but "home page" is not. A rel attribute value of "home page" is interpreted

as two discrete tokens.

Listing 6-10 shows an example of an anchor element with a single rel attribute value.

Listing 6-10. A sample anchor element with a single rel attribute value

<a href="secret-lair.html" rel="nofollow">Secret Lair (don’t click here!)</a>

The "nofollow" value of the rel attribute is interpreted by some search engines (most

notably Google) as a directive to not follow the hyperlink to its destination. It's important

to note, though, that this is not an effective means of hiding sensitive information from

search engines. You can find more information about the "nofollow" rel

attribute value on this Google Webmaster Tools Help page:

http://www.google.com/support/webmasters/bin/answer.py?answer=96569

Listing 6-11 shows another example of the rel attribute in action, this time with multiple attribute values.

Listing 6-11. A sample anchor element with multiple rel attribute values

<a href="latest-product.rss" rel="nofollow alternate">Latest Products RSS Feed</a>