In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > rel (a, link)

rel property (a, link)

Browser support:

Specifies or returns the relationship between the current document and the destination of an anchor or link.

This property contains information for the author only, there isn't any functionality assigned to this property.

Syntax:

object.rel;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: rel

Possible values:

String that sets or retrieves a space-separated list of relation types.

The list of the supported relation types:

Alternate

Designates substitute versions for the document in which the link occurs.

Appendix

Page that is an appendix for the set of pages.

Bookmark

Bookmark.

Chapter

Refers to a document serving as a chapter in a collection of documents.

Contents

Refers to a document serving as a table of contents.

Glossary

Glossary for the page.

Help

Help document.

Index

Refers to a document providing an index for the current document.

Refers to the next document in a sequence.

Nofollow

Instruct search engines that the current document has no effect on the page ranking of the linked document.

Offline

Location that contains a path to the CDF file.

Refers to the previous document in a sequence.

Referes to an XML file in OpenSearch description format.

Section

Page that is a section for a set of pages.

Shortcut Icon

Refers to an icon location.

sidebar

Refers to the bookmarks panel. Only works with Opera and Firefox.

Start

Refers to the first document.

Stylesheet

Refers to an external style sheet.

Subsection

Page that is a subsection for a set of pages.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the rel attribute:

Code

style.css

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    Some text content
</body>

body {
  background-color: #FF0000;
}

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to tell the client's browser that you offer a search plugin from HTML. If the search provider is currently installed it will be selected search engine. Note that the AddSearchProvider method provides similar functionality in JavaScript.

Code

searchProvider.xml

<head>
    <link rel="search" type="application/opensearchdescription+xml" href="searchProvider.xml" title="Dottoro Search" /> 
</head>
<body>
    Please open the drop-down menu of your browser's Search Box.
</body>

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">

        <!-- a brief human-readable title that identifies the search engine -->
    <ShortName>Dottoro</ShortName>

        <!-- a brief human-readable title that identifies the search engine -->
    <LongName>Dottoro Search Engine</LongName>

        <!-- description of the search engine -->
    <Description>Use Dottoro to search on dottoro.com</Description>

        <!-- an URL where the search requests can be handled -->
    <Url type="text/html" method="get" template="http://www.dottoro.com/search.php?query={searchTerms}" />

        <!-- the image that is associated with the search engine -->
    <Image height="16" width="16" type="image/x-icon">http://www.dottoro.com/favicon.ico</Image>

        <!-- character encoding of the search -->
    <InputEncoding>UTF-8</InputEncoding>
    <OutputEncoding>UTF-8</OutputEncoding>


        <!-- the URL of the Search Home Page -->
    <moz:SearchForm>http://www.dottoro.com/search.php</moz:SearchForm>
</OpenSearchDescription>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the rel property:

Code

style.css

<head>
    <link id="baseStyles" rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript">
        function GetRelationType () {
            var link = document.getElementById ("baseStyles");
            alert (link.rel);
        }
    </script>
</head>
<body>
    Some text content
    <button onclick="GetRelationType ();">Get relation!</button>
</body>