Html Link Tag: Web Development Tutorial Series Part 15

html link tag, html link element

The Html Link Tag

The Html link tag, aka, link ELEMENT is used to link a document to an external resource. It does not contain any content and consists only of ATTRIBUTES. For this reason, it is considered an empty element. Link tags are placed in the HEAD ELEMENT of an Html document. Let’s get right into it with an example of an Html document that links to an external style sheet. See the images below.

index.html: LINK ELEMENT: LINKING TO AN EXTERNAL STYLE SHEET

html link tag, link element

my-styles.css

css link tag, link element

DISPLAYED PAGE

html link element display

We begin by creating two documents; “index.html” and “my-styles.css”. These documents have been used many times throughout the lessons on this website. If you would like to see how the documents and folders are set up, click here: WEBSITE FOLDER SETUP. In the head section of the index.html document, we add the Html link tag directly under the title element. The rel attribute specifies what type of relationship the current document has with the linked document or resource. In our case, it’s a stylesheet. The type attribute specifies the “Internet Media Type” of the linked document or resource. This used to be called MIME type or “Multipurpose Internet Mail Extensions”. text/css indicates that the content we’re linking to is CSS code. Finally, the href attribute takes a URL value and specifies the location of the linked document. The document we are linking to is my-styles.css. In the body element, we add an H1 HEADING and a PARAGRAPH.

The my-styles.css stylesheet defines some FONT, BORDER, and COLOR styles. In the displayed page IMAGE, we can see that the styles were applied to the Html elements through the linked my-styles.css external style sheet. There can be multiple link elements in the Html head. You should also know that in Html, the link tag has no end tag, but in XHTML (Extensible Hypertext Markup Language), it must be closed. XHTML is almost identical to Html but is more strict with its coding standards. Refer to the code below, for an example of a properly closed link tag.


<link rel="stylesheet" type="text/css" href="my-styles.css" />

The link tag is closed by adding a space and a / after the last that holds the href URL. It’s as simple as that. You should not add a </link> tag to close the link tag. In HTML5, both tags are acceptable. So, it doesn’t matter if the link element is closed or not, but it’s considered good coding practice to close all empty elements.

Refer to the list below for more link types.

Link Type Link Category
alternate hyperlink
archives hyperlink
author hyperlink
first hyperlink
help hyperlink
icon external resource
index hyperlink
last hyperlink
license hyperlink
next hyperlink
pingback external resource
prefetch external resource
prev hyperlink
search hyperlink
stylesheet external resource
sidebar hyperlink
tag hyperlink
up hyperlink

It’s very common to have alternate stylesheet links in the Html head. Below is an example of how multiple external style sheets may be set up.

EXAMPLE OF MULTIPLE ALTERNATE STYLE SHEETS IN HEAD ELEMENT

multiple alternate style sheets link element

That finishes up this lesson on Html link tags. Thanks for reading, we’ll see you next lesson.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>THE HTML LINK ELEMENT</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<h1>This Heading Is Being Styled Through An External Style Sheet</h1>
<p>This paragraph is being styled through an external style sheet</p>

</body>
</html>

my-style.css Source Code


h1 {
font-family: tahoma;
color: white;
text-align: center;
background-color: orange;
border: 5px double blue;
border-radius: 8px;
}

p {
font-family: georgia;
color: blue;
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: