Web developer

Series – 3 Links

HTML 5 – As I Learn

Series – 3


Links are generally used for connecting an external stylesheet to the web page or adding a favicon.

Mostly we use the stylesheet

<link rel="stylesheet" href="style.css" type="text/css" />

In HTML5 the type attribute is no longer required (it is upto the developer to have it or not because the only form of style information for HTML5 has to be CSS)

There is another attribute with link for stylesheet “media” – takes – Braille, handheld,  projection, print, screen, aural, all, others,

I guess there is no need to explain that.

For a favicon –

<link rel="icon" href="http://example.com/myicon.ico" />

If you are using some png image as your icon – you may have to write a little more –

<link rel="icon" type="image/png" href="http://example.com/image.png" />

But is that all link does?

Looking at the link tag, it is the rel attribute that differentiates between a stylesheet and a favicon. So what else can rel hold?

What came up is very interesting ——–

Rel supports the following – (this list is not complete, visit http://www.w3.org/TR/html5/links.html#linkTypes for more info)

Alternate – link to an alternate source.

Author – information of author at a different location

Help – location of help files

Icon – favicon

License – link license related information about the current document

Next – link to the next page, when the current page is part of a series

Prev – link to the previous page

Start – the first page of the series

Index – the index of content of the series.

Prefetch – used to prefetch some page or image mentioned in link.

Search – link to a resource that can be used to search through the current document

Most of these go into the head section and are not visible in the browsers.

There are some browser and plugin with them that can be used to navigate or display the information through the link tag. I am informed that Google Reader uses these link tags for page navigation and other information.

The attribute rel can be used with <a> anchor tags – check for bookmark, noreferrer, sidebar etc.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: