<p>Simply straightforward question, but one for which I cannot find any suggestions.</p> <p>Supported HTML5 values that are appropriate are:</p> <ul> <li>author</li> <li>first</li> <li>last</li> <li>next</li> <li>prev</li> <li>help</li> <li>license (not "licence")</li> </ul> <h3>Example</h3> <h3>Navigation consisting of index, about, contact & legal</h3> <p>..from the perspective of the index.html page:</p> <ul> <li>index.html with rel="first"</li> <li>about.html with rel=author next"</li> <li>contact.html with rel="help"</li> <li>legal.html with rel="license last"</li> </ul> <p>...from the perspective of the contact.html page:</p> <ul> <li>index.html with rel="first"</li> <li>about.html with rel=author prev"</li> <li>contact.html with rel="help"</li> <li>legal.html with rel="license next last"</li> </ul> <p><em>I accept that the use of rel in navigation will achieve very little; but it might help Search Engines in some small way.</em></p> <p>I gave the examples both as a demonstration of how this would work in practise and for critique!</p> <p>Kind Regards, Dale</p> <h3><em>Edits to examples from comments below</em></h3> <h3>Navigation consisting of index, about, contact & legal</h3> <p>..from the perspective of the index.html page:</p> <ul> <li>index.html with no rel</li> <li>about.html with rel=author"</li> <li>contact.html with rel="help"</li> <li>legal.html with rel="license"</li> </ul> <p>...from the perspective of the contact.html page:</p> <ul> <li>index.html with no rel</li> <li>about.html with rel=author"</li> <li>contact.html with rel="help"</li> <li>legal.html with rel="license"</li> </ul>

<p>Good Question ! To be honest i'm no expert with the rel attribute (so someone correct me if i'm wrong) but from what i can find Google can verify an identity on a web page via the attribute. Such as</p> <p><code><a rel="me" href="https://plus.google.com/110037486217106671520">Luke Southam</a></code></p> <p>i know this is off the subject of site navigation but it shows Google is reading and indexing the attribute within the <code><a></a></code> tag. As for using it within site navigation, if it (possibly) helps Google (or other search engines) to index your website better I say go for it.</p>

<p>Yes, you may use <code>rel</code> for links in the navigation. Because …</p> <p>… you may use <code>rel</code> for <em>every</em> link.</p> <p>With an appropriate link type, that is. You may only use a specific set of defined and registered <code>rel</code> values in HTML5.</p> <hr> <h3> <code>first</code> & <code>last</code>, <code>next</code> & <code>prev</code> </h3> <p><code>first</code> and <code>last</code> are no longer defined in the HTML5 spec. In the Microformats wiki page existing rel values they are listed as synonyms for <code>begin</code> and <code>end</code>, which are defined as:</p> <blockquote> <p>identifies the author-defined start[/end] of a sequence of documents of which the current document is a node. </p> </blockquote> <p>So they are not suitable for a typical website navigation. Use them when linked documents should be read in a specific order.</p> <p><code>next</code> and <code>prev</code> are defined in the HTML5 spec as:</p> <blockquote> <p>[…] indicates that the document is part of a sequence […]</p> </blockquote> <p>Same argument as above for <code>first</code>/<code>last</code>: only use it if there is a specific order (which is not the case for a navigation consisting of "About", "Contact", "Legal", …). Most prominent use would be for pagination.</p> <h3><code>author</code></h3> <p>The <code>author</code> link type</p> <blockquote> <p>indicates that the referenced document provides further information about the author of the nearest <code>article</code> element ancestor of the element defining the hyperlink, if there is one, or of the page as a whole, otherwise.</p> </blockquote> <p>You just have to make sure that your navigation (resp. this <code>author</code> link) is not a child of an <code>article</code> element (which would be very uncommon for a site navigation).</p> <h3><code>help</code></h3> <p>The <code>help</code> link type is defined as:</p> <blockquote> <p>For <code>a</code> and <code>area</code> elements, the <code>help</code> keyword indicates that the referenced document provides further help information for the parent of the element defining the hyperlink, and its children.</p> </blockquote> <p>So this doesn’t seem to be appropriate (even <em>if</em> the Contact page would provide "further help information", because it would be technically the help for the navigation itself (→ the parent element of the link), not for the whole page (which is only the case if used in a <code>link</code> element in the <code>head</code>, or if the help link is a direct child of the <code>body</code>.)</p> <h3><code>license</code></h3> <p>The <code>license</code> link type </p> <blockquote> <p>[…] indicates that the referenced document provides the copyright license terms under which the main content of the current document is provided.</p> </blockquote> <p>Seems to be appropriate (if your Legal page contains those terms).</p>

Should we be using (HTML5) rel attributes within site navigation

Example

Navigation consisting of index, about, contact & legal

..from the perspective of the index.html page:

index.html with rel="first"
about.html with rel=author next"
contact.html with rel="help"
legal.html with rel="license last"

...from the perspective of the contact.html page:

index.html with rel="first"
about.html with rel=author prev"
contact.html with rel="help"
legal.html with rel="license next last"

I accept that the use of rel in navigation will achieve very little; but it might help Search Engines in some small way.

I gave the examples both as a demonstration of how this would work in practise and for critique!

Kind Regards, Dale

Edits to examples from comments below

Navigation consisting of index, about, contact & legal

..from the perspective of the index.html page:

index.html with no rel
about.html with rel=author"
contact.html with rel="help"
legal.html with rel="license"

...from the perspective of the contact.html page:

index.html with no rel
about.html with rel=author"
contact.html with rel="help"
legal.html with rel="license"

344

asked Apr 22 '12 18:04

Dale Rollinson

2 Answers

Good Question ! To be honest i'm no expert with the rel attribute (so someone correct me if i'm wrong) but from what i can find Google can verify an identity on a web page via the attribute. Such as

<a rel="me" href="https://plus.google.com/110037486217106671520">Luke Southam</a>

i know this is off the subject of site navigation but it shows Google is reading and indexing the attribute within the <a></a> tag. As for using it within site navigation, if it (possibly) helps Google (or other search engines) to index your website better I say go for it.

164

answered Sep 19 '22 12:09

luke

Yes, you may use rel for links in the navigation. Because …

… you may use rel for every link.

With an appropriate link type, that is. You may only use a specific set of defined and registered rel values in HTML5.

`first` & `last`, `next` & `prev`

first and last are no longer defined in the HTML5 spec. In the Microformats wiki page existing rel values they are listed as synonyms for begin and end, which are defined as:

identifies the author-defined start[/end] of a sequence of documents of which the current document is a node.

So they are not suitable for a typical website navigation. Use them when linked documents should be read in a specific order.

next and prev are defined in the HTML5 spec as:

[…] indicates that the document is part of a sequence […]

Same argument as above for first/last: only use it if there is a specific order (which is not the case for a navigation consisting of "About", "Contact", "Legal", …). Most prominent use would be for pagination.

`author`

The author link type

indicates that the referenced document provides further information about the author of the nearest article element ancestor of the element defining the hyperlink, if there is one, or of the page as a whole, otherwise.

You just have to make sure that your navigation (resp. this author link) is not a child of an article element (which would be very uncommon for a site navigation).

`help`

The help link type is defined as:

For a and area elements, the help keyword indicates that the referenced document provides further help information for the parent of the element defining the hyperlink, and its children.

So this doesn’t seem to be appropriate (even if the Contact page would provide "further help information", because it would be technically the help for the navigation itself (→ the parent element of the link), not for the whole page (which is only the case if used in a link element in the head, or if the help link is a direct child of the body.)

`license`

The license link type

[…] indicates that the referenced document provides the copyright license terms under which the main content of the current document is provided.

Seems to be appropriate (if your Legal page contains those terms).

answered Sep 19 '22 12:09

unor

Related questions
                            
                                Link to RSS/Atom feed, relative, doesn't work in Firefox
                            
                                How to check if a checkbox in a checkbox array is checked with jquery
                            
                                CSS3 Columns and Images
                            
                                Scan site for images and alt attributes [closed]
                            
                                Peculiar Reverse Cascading in CSS
                            
                                jQuery templates with html5 elements in ie8
                            
                                Is there a Javascript support library for html5 file API and upload?
                            
                                iframe versus div + jquery
                            
                                pushstate is not working correctly in backbone.js
                            
                                Resource interpreted as Other but transferred with MIME type undefined
                            
                                Add a contact to the mobile device Address book from an HTML webpage
                            
                                Executing HTML5/Javascript Within An iFrame Securely
                            
                                Silverlight for Mac and Is Silverlight dead? [closed]
                            
                                Fixed gap between CSS columns
                            
                                How can i store a 50MB video in HTML5's app cache?
                            
                                CSS/HTML5 equivilent to iframe marginheight and marginwidth
                            
                                iframe is cut when in div on mobile safari
                            
                                Rounded corners in Firefox: space between border and background
                            
                                How to preformat inside textarea
                            
                                Why doesn't Opera throw a click event when you partially mark text?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With

Should we be using (HTML5) rel attributes within site navigation