HTML Basics - Linking Documents
Believe it or not, not everything has to be made by the developer. Luckily for people like myself with no visual art skills whatsoever, fonts are one of those things (I play some mean guitar though, so yours truly isn’t entirely void of artistic talent). And even better than that - fonts aren’t the only things we can import into an HTML project.
Importing style sheets is the most common practice (see my future CSS Basics series for more!) and allow us to style our HTML elements from a separate document. This is important so that we don’t have to muddy our otherwise-clear HTML waters with inline styles… ew….
All this is done with the <link> tag. HTML documents can contain a million of these but they always go in the <head> tag at the top of the document. I personally format my document head by putting <link> tags under the <title>, which I in turn put under my <meta> tags. This way more links can always be easily added under the existing ones without pushing around the rest of the typically-unused elements in the head.
So finally, the good part….
How to link stylesheets in HTML
The <link> tag has many attributes that can be added, but the main two are href and rel.
You may recognize href from the <a> tag, which specifies where the link should, well, link to. It does the same here by specifying where the document is which we want to link to.
The rel attribute, however, simply specifies the relationship the other attribute’s reference has to the HTML document as a whole. As superficial as this seems, it helps the browser know how to hand the linked document. In this case we will be defining the relationship as simply ‘stylesheet’.
Put that all together and we have this line -
<link href=”#” rel=”stylesheet”>The # here can be replaced by a typical URL or, like other instances of href, to a file. Typically HTML will be written with an IDE and saved locally before it is hosted on the big wide internet, so these files should be placed in the same directory as the HTML file.
Additionally I want to add the other common use of the <link> tag
How to Add Fonts in HTML
The second most popular linked items are fonts. Google and other font repositories have made this easy by adding HTML <link> tags to the pages in which their fonts are displayed. By visiting fonts.google.com, you can find thousands of free fonts with their associated linking code.
Here’s what their code will look like for the font Open Sans -
<link rel=”preconnect” href=”https://fonts.googleapis.com">
<link rel=”preconnect” href=”https://fonts.gstatic.com" crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel=”stylesheet”>Notice how the first two links, with the ‘preconnect’ relationship, don’t reference the specific font like the bottom one. This is because they are setting up the connection between the font repository and your HTML document/webpage. The great thing is you only have to use the top two tags once for any number of fonts. Simply add the respective bottom tag for as many additional fonts as you desire.
As usual with programming, there’s always more to know. Learn everything there is on linking documents by looking through the documentation for <link>: The External Resource Link element — HTML: HyperText Markup Language | MDN (mozilla.org)
