HTML and CSS Reference
In-Depth Information
what type of link the element represents. Some of the most common values for the
rel
attribute are
stylesheet
(for cascading style sheets),
alternate
(for alternative formats/versions of the document),
and
icon
(for a shortcut icon to associate with the web page). The
link
element also requires an
href
attribute (short for
hypertext reference
; you'll see much more of this one in Chapter 6) to carry the URL of
the linked resource.
Listing 3-3 shows two different
link
elements: one linking to a style sheet and one linking to a shortcut
icon (commonly known as a “favicon”).
Listing 3-3.
Two
link
elements relating the document to two different external resources
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<title>Power Outfitters Superhero Costume and Supply Co.</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<link rel="icon" type="image/ico" href="/favicon.ico">
</head>
<body>
<h1>Welcome, Heroes!</h1>
<p>Power Outfitters offers top of the line merchandise at
rock-bottom prices for the discerning costumed crime-fighter.</p>
</body>
</html>
There's no limit to the number of
link
elements you can include in a document's header. You can, for
example, link to different style sheets for different media or to offer alternate styles, or multiple icons in
different sizes, or link to multiple versions of your page in different languages.
Media Type (The type Attribute)
The
link
element's optional
type
attribute indicates the
Internet media type
of the linked resource. This is
also called the
content type
or
MIME type
(MIME stands for Multipurpose Internet Mail Extensions; these
media types were originally defined for use in e-mail but were later adopted for other Internet applications,
including the Web).
Different types of files are served and handled in different ways. Text files are very different from image
files, and both are different from video files or application files. The Internet media type is a two-part
identifier consisting of a type and a subtype, separated by a slash, that indicates what type of file the
browser is dealing with so it can process the data accordingly.
The media type for CSS files is
text/css
, indicating that the style sheet is a text file written in the CSS
language, and that's the
type
value you're most likely to encounter in a
link
element. Other media files
have their own content types, such as
text/html
for HTML documents,
text/javascript
for JavaScript
files,
image/jpeg
for JPEG graphics, and
audio/mpeg
for MP3 audio files. The
type
attribute can appear
on other elements besides
link
, and you'll see content types again in Chapter 5 when we cover
embedding audio and video, but all in due time.
