HTML and CSS Reference
In-Depth Information
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:
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>
