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

You are here: Reference > HTML > tags > link

link element

Browser support:

Specifies a link to an external resource.

This element must be placed in the head section.

The link element allows authors to link external documents into the HTML document. Usually it is used to link external .css (style) files into the document. Another common use of the link tag is to identify an own or a specific search provider, as shown in Example 2.

If you want to import a CSS file into another CSS file, use the @import at-rule.

If you want to see the HTML tags by categories, please visit this page.

This element cannot have a closing tag.

JavaScript page for this element: link.

Possible members:

Attributes

Events

Styles

charset

Sets the character encoding of the document, a linked document or a script block.

class

Sets the style class or classes that belong to the element.

dir

Sets the text direction as related to the lang attribute.

DISABLED

Sets the state of an object for user interaction.

href

Specifies the location of the destination.

hrefLang

Sets the language of a linked resource or anchor element.

Sets a unique identifier for the object.

lang

Specifies the language of the element.

media

Specifies the media types for style definition.

name

Sets the name of an element.

rel

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

rev

Specifies a reverse relationship from an anchor or link to the current document.

style

Sets an inline style associated with an element.

target

Specifies the target window or frame where the document is to be opened.

title

Specifies a tooltip for an element.

type

Specifies the content type (MIME type) of the object or the linked object.

xml:lang

Sets the language code of the XML document.

Example HTML code 1:

This example illustrates the use of the link element:

Code

red.css

<head>
    <link rel="stylesheet" type="text/css" href="red.css" />
</head>
<body>
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>


.red {
    color: red;
}

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 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

head
import

External links:

link element (MSDN)
link element (Safari Reference Library)
link element (W3C)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

link element

Possible members:

Example HTML code 1:

Example HTML code 2:

Related pages:

External links:

Post Content