The Html Link Element
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
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.
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
That finishes up this lesson on Html link tags. Thanks for reading, we’ll see you next lesson.
index.html Source Code
<title>THE HTML LINK ELEMENT</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
<h1>This Heading Is Being Styled Through An External Style Sheet</h1>
<p>This paragraph is being styled through an external style sheet</p>
my-style.css Source Code
border: 5px double blue;
Clear Coded Programming