Using the Right Tag for the Right Job - HTML5 Mastery: Semantics, Standards, and Styling - page 47

Links, styles, and resources: base, link, and style
Only one base element may be used per document. It should appear in the head before
any other elements that include a URL in their attributes. The idea is that the base ele-
ment can prevent redundant typing of the same root URL over and over again when
adding links throughout the page. Its two attributes, href and target , specify the
URL to use and the default target (where applicable). target tells, for instance, wheth-
er a link opens in a new window or the same window. For example, if this appeared
inside the head section:
<base href="http://example.com/portfolio/" target="_blank"
/>
and this appeared in the body section:
<a href="photographs.html">Photography</a>
then clicking the link would open a new browser window and connect the user to the
URL http://example.com/portfolio/photographs.html .
The link element
The link element has the attributes href , rel , media , hreflang , type , and
sizes , as well as the global attributes. Of these, at very least href and rel are com-
monly set. The href specifies the address (URL) of the linked resource, while rel
specifies the type of resource. The following code is how you will most likely use this
element, because it is commonly used for linking style sheets to your pages:
<link rel="stylesheet" href="main.css" type="text/css" />
However, the rel attribute can be used to provide additional related information
about the page. The nature of this attribute can be a little tricky to grasp, so let's consider
an example. In addition to style sheets, you may have encountered rel before when us-
ing the link element to reference an RSS feed in the head of your web page, like this:
<link rel="alternate" href="http://example.com/feed/"
type="application/rss+xml" />
The preceding code means that “an alternative version of this document exists at
http://example.com/feed/ , ” and user agents can spot that and find the RSS
feed—most modern browsers will display a feed icon in the browser address bar, allow-
ing the user to select, view, and subscribe to the feed.
The alternate value can also be used with the hreflang attribute if the alternate
version is a translation. It can also be used with the media attribute if the alternate ver-