What's in your <head>? Part 3—<link>

My selfie

James Turner,

Tags: HTML

So far, I᾿ve looked at the The Great Discontent's <meta> and <title> tags, and in this post, I want to look at another <head> tag: <link>.

There are quite a few <link> tags in TGD᾿s <head> section, but they seem to fall into one of a small number of categories:

Skip to navigation

RSS Feeds

<link rel="alternate" type="application/rss+xml"
      title="The Great Discontent (TGD) - Interview Feed"
<link rel="alternate" type="application/rss+xml"
      title="The Great Discontent (TGD) - Blog Feed"

These tags provide directions to alternate or related versions of the website, in this case, RSS feeds (one feed for TGD᾿s weekly interviews and another for its blog). At www.w3.org, you can read about how links can be used to point to alternate versions of a web page. This seems to be mainly for the benefit of search engine users; if you search on “Great Discontent RSS”, you᾿ll be directed to one of its RSS feeds.

Skip to navigation

Style Sheets

<link href="/assets/css/coyote.css" media="screen"
      rel="stylesheet" />
<link href="/assets/interviews/css/136-liz-danzico.css"
      media="screen" rel="stylesheet" />
<link href="/webfonts/ss-social-regular.css"
      media="screen" rel="stylesheet" />
<link href="/webfonts/ss-standard.css" media="screen"
      rel="stylesheet" />

External style sheets, I suppose, are one of the most essential things to link to. In TGD, from bottom to top, are style sheets for an external font provider (Adobe Typekit), a style sheet for the interview itself, and one for the logo.

I understand that the normal advice is to try to have just one style sheet for any HTML document, but in the case of TGD I guess there are certain elements that are modular and carry over from week to week, while others are unique to each interview. I᾿m not sure if it᾿s just how Typekit works, but I wonder if one problem with organising the style sheets like this might be if they decide to change their font at some point in the future, they᾿ll have to go in and edit 150+ HTML documents. Even sticking my foot in a blender sounds more fun than that.

Skip to navigation


<link rel="shortcut icon" type="image/ico" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/favicon-152x152.png">

These links enable the browser to display an icon for your website, particularly in the browser tab, the favourites menu, and elsewhere. PNG files can be used, but they only have one size, and can lose definition or detail at larger or smaller sizes. ICO files are a better choice because they contain several images at different sizes. You can convert PNGs to ICOs with free online tools like ConvertICO.

The icon as it appears in Firefox's tab at the top of the document.
The icon as it appears in Firefox᾿s tab at the top of the document.
The icon as it appears in Firefox's favourites menu.
The icon as it appears in Firefox᾿s favourites menu.

So, the <link> tags in TGD perform several tasks: directing search engines to alternate versions of the web page, such as RSS feeds; linking to style sheets; and adding unique icons to the site. If I᾿m right, there are many other ways in which <link> is used, but that᾿s enough on them for now.

Next time, I᾿ll be looking at the final <head> tag, <script>.

Skip to navigation